본문 바로가기

슬라이드이펙트3

[Slide Effect] 슬라이드 이펙트 03 - 좌로 움직이기(연속적으로) 슬라이드 이펙트 03 이번 시간에는 그 동안 배웠던 JavaScript를 이용하여 슬라이드 이펙트를 만들어보도록 하겠습니다. 2초마다 다음 사진으로 슬라이드 되는 효과이며, JS 코드를 보여드리겠습니다. HTML, CSS 코드는 원본 소스 보기 버튼을 눌러 확인해주세요. 자, 그럼 시작해볼까요? 01. 변수와 상수(const/let) 선언하기 필요한 만큼의 변수와 상수를 선언해주도록 한다. const sliderWrap = document.querySelector(".slider__wrap"); const sliderImg = document.querySelector(".slider__img"); // 보여지는 영역 const sliderInner = document.querySelector(".slid.. 2022. 9. 1.

[Slide Effect] 슬라이드 이펙트 02 - 좌로 움직이기 슬라이드 이펙트 02 이번 시간에는 그 동안 배웠던 JavaScript를 이용하여 슬라이드 이펙트를 만들어보도록 하겠습니다. 2초마다 다음 사진으로 슬라이드 되는 효과이며, JS 코드와 GSAP, jQuery 코드 세 가지를 보여드리겠습니다. HTML, CSS 코드는 원본 소스 보기 버튼을 눌러 확인해주세요. 자, 그럼 시작해볼까요? JS 코드 슬라이드 이펙트 02의 JS 소스와 부연 설명(주석 처리됨)이다. const sliderWrap = document.querySelector(".slider__wrap"); const sliderImg = document.querySelector(".slider__img"); // 보여지는 영역 const sliderInner = document.querySele.. 2022. 8. 29.

[Slide Effect] 슬라이드 이펙트 01 슬라이드 이펙트 01 이번 시간에는 그 동안 배웠던 JavaScript를 이용하여 슬라이드 이펙트를 만들어보도록 하겠습니다. HTML과 자바스크립트 소스를 설명드리며 CSS는 복잡해지기 때문에 CSS 소스 보기 버튼을 클릭하여 봐 주시기 바랍니다. 자, 그럼 시작해볼까요? HTML 소스 보기 : 모달 박스 슬라이드 이펙트 01의 HTML 소스와 부연 설명(주석 처리됨)이다. JAVASCRIPT SLIDER EFFECT 01 슬라이드 이펙트 ① - 트랜지션 효과 01 02 03 04 05 06 07 소스 보기 JavaScript HTML CSS // 선택자 const searchKeyword = document.querySelectorAll(".search__info .keyword span"); // 알.. 2022. 8. 25.

이전 1 다음

Reference Book

JavaScript

JavaScript

HTML

HTML

CSS

CSS

광고 준비중입니다.

티스토리툴바