Leeyanggoo
[JS] 자바스크립트로 슬라이드 만들기 3!! 세로 슬라이드! 본문
다양한 스크립트를 활용해보자!!
<main id="main">
<div class="slider__wrap">
<div class="slider__img">
<div class="slider__inner">
<div class="slider"><img src="./img/sliderEffect06-min.jpg" alt="이미지1"></div>
<div class="slider"><img src="./img/sliderEffect07-min.jpg" alt="이미지2"></div>
<div class="slider"><img src="./img/sliderEffect08-min.jpg" alt="이미지3"></div>
<div class="slider"><img src="./img/sliderEffect09-min.jpg" alt="이미지4"></div>
<div class="slider"><img src="./img/sliderEffect10-min.jpg" alt="이미지5"></div>
</div>
</div>
</div>
</main>
/* slider__wrap */
.slider__wrap {
width: 100%;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.slider__img {
/* 이미지가 보이는 영역 */
position: relative;
width: 800px;
height: 520px;
overflow: hidden;
}
.slider__inner {
/* 전체 이미지를 감싸고 있는 박스 : 움직이는 영역 */
/* display: flex;
flex-wrap: wrap; */
width: 100%;
height: 520px;
}
.slider {
/* 개별적인 이미지 */
position: relative;
width: 800px;
height: 520px;
}
이번 예제는 각각의 슬라이드가 세로로 넘어가는 형태입니다.
slider 관련 div의 height 값을 동일하게 설정했습니다.
전체 이미지를 감싸고 있는 slider__inner의 flex를 해제하여 div가 세로로 쌓이도록 하고,
slider__img에 overflow: hidden을 주어 넘치는 슬라이드가 가려지도록 설정했습니다.
Javascript
// 선택자
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 sliderInterval = 3000; //이미지 변경 간격
//트랜지션 설정
sliderInner.style.transition = "all, 1s";
setInterval(()=>{
currentIndex = (currentIndex+1) % sliderCount;
sliderInner.style.transform = "translateY("+ -520 * currentIndex + "px)"
}, sliderInterval);
각 HTML의 class를 모두 querySelector와 querySelectorAll을 이용해 선택합니다.
변수 currentIndex는 현재 보이는 이미지의 순서를 나타냅니다.
변수 sliderCount는 슬라이드의 총 개수를 나타냅니다.
변수 sliderInterval는 슬라이드가 넘어갈 간격을 나타냅니다.
변수 sliderImg는 슬라이드가 보이는 영역입니다.
변수 sliderInner는 슬라이드가 모두 쌓여 있는 영역입니다.
setInterval() 메서드는 두 개의 인자를 가질 수 있습니다.
첫 번째 인자는 반복 실행할 콜백 함수이고, 두 번째 인자는 콜백 함수를 실행할 시간 간격(밀리초)입니다.
따라서 이번 예제에서 설정한 sliderInterval의 3000은 3초가 됩니다.
인덱스가 querySelectorAll()로 선택한 슬라이드의 총 개수를 넘어가면 안 되기 때문에 인덱스 설정을 먼저 합니다.
currentIndex가 현재 이미지의 인덱스이므로 1을 더한 값은 다음 슬라이드를 나타냅니다.
sliderCount는 슬라이드의 총 개수이므로 이를 이용해 나누면 인덱스는 배열 인덱스를 넘어서지 않게 됩니다.
따라서 querySelectorAll()을 이용해 선택한 slider의 요소는 각각의 슬라이드입니다.
슬라이드는 sliderImg에 있을 때만 보여집니다.
슬라이드가 height만큼 밀려나게 설정하기 위해 translastY 속성을 이용해 슬라이드의 height만큼 전체 sliderInner의 영역에서 밀어내고 있습니다.
또한 전환 효과가 일어나는 슬라이드에 transition 속성을 입력하여 교체 효과가 1초 동안 일어나게 하고 있습니다.
jQuery
setInterval(() => {
currentIndex = (currentIndex+1) % $(".slider").length;
$(".slider__inner").css("position", "relative");
$(".slider__inner").animate({top : -520 * currentIndex}, 1000, "easeInOutElastic")
}, sliderInterval);
jQuery는 Javascript의 querySelector()와 querySelectorAll()을 $("선택자")의 문법으로 씁니다.
자바스크립트에서 사용했던 선택자 const slider = sliderWrap.querySelectorAll(".slider")가 $(".slider")로 쓰입니다.
jQuery는 translateY라는 CSS 속성을 사용할 수 없습니다.
따라서 top의 값을 뺌으로써 Y 좌표 값을 뺀 효과를 줄 수 있습니다.
slider__inner가 slider의 부모 div이므로 CSS 속성 position = relative를 준 뒤에, top 값을 슬라이더의 height 값만큼 빼고 있습니다.
뒤에는 애니메이션이 지속될 시간을 1000밀리초(1초)로 설정하고 jQuery의 특수 효과인 ease 효과를 이용합니다.
GSAP
setInterval(() => {
currentIndex = (currentIndex+1) % sliderCount;
gsap.to(sliderInner, {
y : -520 * currentIndex,
duration : 1,
ease: "elastic.out(1, 0.5)"
});
}, sliderInterval);
GSAP(GreenSock Animation Platform)은 HTML5 애니메이션을 만드는 데 사용되는 JavaScript 라이브러리입니다. GSAP은 자바스크립트를 사용하여 요소의 위치, 크기, 회전, 투명도 등 다양한 속성을 애니메이션화하는 데 사용됩니다.
GSAP는 요소에 애니메이션을 만들고 실행하기 위해 gsap.to()라는 문법을 사용합니다.
첫 번째 인자로 애니메이션 대상 요소를 선택하고, 두 번째 인자로 애니메이션 속성들을 가진 객체를 전달합니다.
예제에선 자바스크립트의 요소 활용을 통해 sliderInner 선택자를 활용하고 있습니다.
GSAP에서는 translateY의 CSS 속성을 알파벳 소문자 y 하나로 입력합니다.
duration으로 transition의 시간을 입력하고, GSAP의 특수 효과인 ease의 elastic을 입력하고 있습니다.
