...
728x90
반응형
연속적으로 좌로 넘어가는 슬라이드 효과 만들기
이번에는 사진이 연속적으로 끝 없이 좌로 넘어가는 슬라이드 효과를 만들어 보도록 하겠습니다.
HTML 작성하기
<main id="main">
<div class="slider__wrap">
<div class="slider__img">
<div class="slider__inner">
<div class="slider s1"><img src="img/sliderEffect06-min.jpg" alt="이미지6"></div>
<div class="slider s2"><img src="img/sliderEffect07-min.jpg" alt="이미지7"></div>
<div class="slider s3"><img src="img/sliderEffect08-min.jpg" alt="이미지8"></div>
<div class="slider s4"><img src="img/sliderEffect09-min.jpg" alt="이미지9"></div>
<div class="slider s5"><img src="img/sliderEffect10-min.jpg" alt="이미지10"></div>
</div>
</div>
</div>
</main>
HTML 정리해보기
- html문서 상의 구조는 이전에 만들었던 translateX를 사용하여 좌로 보내는 슬라이드 페이지와 동일합니다.
CSS 작성하기
변경된 css
- 기존 스타일과 동일합니다.
Javascript 작성하기 ( javascript 사용 )
<script>
// 선택자
const sliderWrap = document.querySelector(".slider__wrap");
const sliderImg = sliderWrap.querySelector(".slider__img"); // 보여지는 영역
const sliderInner = sliderWrap.querySelector(".slider__inner"); // 윰직이는 영역
const slider = sliderWrap.querySelectorAll(".slider"); // 개별 이미지
let currentIndex = 0; // 현재 보이는 이미지
let sliderCount = slider.length; // 전체 이미지 개수
let sliderWidth = slider[0].clientWidth; // 이미지 width값
let sliderHeight = slider[0].clientHeight;
let sliderClone = sliderInner.firstElementChild.cloneNode(true); // 첫 번째 이미지 복사
let sliderInterval = 2000;
// 복사한 첫 번째 이미지 마지막에 붙여넣기
sliderInner.appendChild(sliderClone);
function sliderEffect(){
currentIndex++;
sliderInner.style.transition = "all 0.8s";
sliderInner.style.transform = `translateY(-${sliderHeight * currentIndex}px)`;
// 마지막 이미지 순서에
if(currentIndex == sliderCount){
setTimeout(() => {
sliderInner.style.transition = "all 0s";
sliderInner.style.transform = `translateY(0px)`;
}, 700);
currentIndex = 0;
};
};
setInterval(sliderEffect, sliderInterval);
</script>
javascript 정리해보기
- sliderWidth와 sliderClone이라는 변수를 추가했습니다.
- sliderWidth = clientWidth를 사용하여 [0] 번째 slider(순서 무관)의 width 값을 저장합니다.
- sliderClone = cloneNode(true)를 사용하여 sliderInner의 firstElementChild(첫 번째 요소)를 복사하여 저장합니다.
- 복사한 sliderClone을 appendChild를 사용하여 slideInner의 마지막에 붙여넣습니다.
- sliderEffect 함수
- currentIndex를 1 증가시킵니다.
- sliderInner의 변화시간을 0.8초로 설정합니다.
- sliderInner의 위치를 translateX를 이용하여 움직입니다. 움직이는 거리는
- - (sliderWidth * currentIndex) px 로 설정합니다. (슬라이더 개별 width값 * 현재 index값)
- if( currentIndex == sliderCount) 를 사용하여 마지막 이미지 순서일 때에 대한 조건문을 정의합니다.
- setTimeout 함수는 특정시간 이후 한번 실행되는 함수입니다.
- 마지막 이미지가 나온 후, 700ms뒤에 sliderInner의 변화시간을 0으로 바꾼 후 위치를 translateX(0px)로 초기화합니다.
- currentIndex도 0으로 초기화 시킵니다.
- setInterval함수에 sliderEffect함수를 넣고 sliderInterval의 시간마다 반복합니다.
Javascript 작성하기 ( GSAP 사용 )
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script>
<script>
function sliderEffect(){
currentIndex++;
gsap.to(sliderInner, {
x : -sliderWidth * currentIndex,
duration : 0.5,
ease : "power.out"
});
if(currentIndex == sliderCount){
setTimeout(() => {
gsap.to(sliderInner, {
x : 0,
duration : 0,
ease : "power.out"
});
}, 700);
currentIndex = 0;
};
};
setInterval(sliderEffect, sliderInterval);
</script>
javascript 알아보기
- gsap cdn을 적어줍니다.
- 위 javascript에서 translateX의 값을 사용하여 조정했던 위치를
- gsap.to(sliderInner, {
- x : -sliderWidth * currentIndex, (x 좌표 이동)
- duration : 0.5, (움직임의 기간)
- ease : "power.out" (움직임의 종류) } 로 표현 가능합니다.
Javascript 작성하기 ( jQuery 사용 )
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js"></script>
<script>
function sliderEffect(){
currentIndex++;
$(".slider__inner").css("position", "relative");
$(".slider__inner").animate({left : -sliderWidth * currentIndex}, 500);
if(currentIndex == sliderCount){
setTimeout(() => {
$(".slider__inner").animate({left : 0}, 0);
}, 700);
currentIndex = 0;
};
};
setInterval(sliderEffect, sliderInterval);
</script>
javascript 정리해보기
- 마찬가지로 jQuery의 cdn을 적어줍니다.
- jQuery에는 translate의 기능이 없어 left 값을 조정해야하기 때문에 $(".slider__inner")에 position : relative 속성을 부여
- 합니다.
- jQuery에서는 animate({left : -sliderWidth * currentIndex}, 500)으로 표현합니다.
이상으로 무한하게 좌로 넘어가는 슬라이드 효과를 세 가지 스크립트를 통해 만들어 보았습니다 !
728x90
반응형