오늘은 사진이 자연스럽게 넘어가는 슬라이드 효과에 대해 알아보겠습니다!
자바스크립트 슬라이드 효과
슬라이드 효과 3
슬라이드 이펙트 중 이미지가 세로로, 위쪽으로 넘어가는 효과입니다.
슬라이드 2번과 거의 동일한 구조와 스크립트지만, CSS 속성 중 바뀌는 부분이 있습니다.
구조
<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>CSS에서 바뀌는 요소
.slider__inner { /* 이미지 움직이는 영역 */
flex-wrap: wrap;
width: 4000px;
height: 450px;
}2번에선 사진을 가로로 정렬하기 위해 display: flex를 사용했지만, 이번엔 세로로 움직이므로 flex를 제거해줍니다.
스크립트_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 sliderInterval = 3000; // 이미지 변경 간격 시간
sliderInner.style.transition = "all 0.4s";
setInterval(() => {
currentIndex = (currentIndex + 1) % sliderCount;
sliderInner.style.transform = "translateY("+ -450 * currentIndex + "px)";
}, sliderInterval);
</script>2번 방법과 동일하지만, translateX를 translateY로, width값 800을 height값 450으로 바꿔줍니다.
1. 먼저, sliderInner 요소에 대해서 transition 속성을 "all 0.4s"로 설정합니다. 이는 슬라이더 이미지가 이동할 때 애니메이션을 적용하기 위함입니다.
2. 그 후에는 setInterval() 함수를 사용하여 일정한 시간 간격으로 슬라이더 이미지를 변경합니다. setInterval() 함수는 첫 번째 인자로 실행할 함수를 받으며, 두 번째 인자로 실행할 시간 간격을 받습니다.
3. setInterval() 함수 안에서는 currentIndex 값을 1 증가시키고, sliderCount로 나눈 나머지 값을 currentIndex로 저장합니다. 이는 슬라이더 이미지를 순환하도록 하기 위함입니다. 즉, currentIndex가 sliderCount와 같아지면 다시 0으로 돌아가게 됩니다.
4. 그리고, sliderInner 요소의 transform 속성을 변경하여 이미지를 이동시킵니다. translateY() 함수를 사용하여 y축 방향으로 이미지를 이동시키며, 이동 거리는 currentIndex에 -450을 곱한 값으로 설정됩니다. 이 때 -450은 이미지 한 장의 높이를 나타내며, currentIndex가 0일 때는 0px, 1일 때는 -450px, 2일 때는 -900px, ... 이렇게 이동하게 됩니다.
스크립트_GSAP
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script>
<script>
setInterval(() => {
currentIndex = (currentIndex + 1 ) % sliderCount;
gsap.to(".slider__inner", {
y : -450 * currentIndex,
duration : 1,
ease: "power4.out"
});
}, sliderInterval);
</script>GSAP도 마찬가지로 x값을 y로, -800을 -450으로 바꿔줍니다.
1. 먼저, setInterval() 함수를 사용하여 일정한 시간 간격으로 슬라이더 이미지를 변경합니다. 이전 예제와 마찬가지로 currentIndex 값을 1 증가시키고, sliderCount로 나눈 나머지 값을 currentIndex로 저장합니다.
2. 그리고, gsap.to() 함수를 사용하여 slider__inner 요소의 y축 위치를 변경합니다. 이 때 이동 거리는 -450 * currentIndex로 설정되며, duration 속성을 사용하여 이동하는데 걸리는 시간을 1초로 설정하였습니다. ease 속성을 사용하여 이동하는 동안의 애니메이션 효과를 "power4.out"으로 설정하였습니다.
3. 즉, gsap.to() 함수는 slider__inner 요소의 y축 위치를 1초 동안 -450 * currentIndex로 이동시키며, 이때 "power4.out" 애니메이션 효과를 적용합니다. 이를 반복적으로 실행하여 이미지 슬라이더를 구현합니다.
스크립트_jQuery
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js"></script>
<script>
setInterval(() => {
currentIndex = (currentIndex + 1) % $(".slider").length;
$(".slider__inner").css("position", "relative");
$(".slider__inner").animate({top : -450 * currentIndex}, 600);
}, sliderInterval);
</script>left를 top으로, -800을 -450으로 바꿔줍니다.
1. 먼저, setInterval() 함수를 사용하여 일정한 시간 간격으로 슬라이더 이미지를 변경합니다. 이전 예제와 마찬가지로 currentIndex 값을 1 증가시키고, $(".slider").length로 나눈 나머지 값을 currentIndex로 저장합니다.
2. 그리고, $(".slider__inner").css() 함수를 사용하여 slider__inner 요소의 position 속성을 "relative"로 설정합니다. 그리고, $(".slider__inner").animate() 함수를 사용하여 slider__inner 요소의 top 속성을 -450 * currentIndex로 이동시킵니다. 이동하는데 걸리는 시간은 600밀리초로 설정되었습니다.
3. 즉, $(".slider__inner").css() 함수는 slider__inner 요소의 position 속성을 "relative"로 변경하며, $(".slider__inner").animate() 함수는 slider__inner 요소의 top 속성을 600밀리초 동안 -450 * currentIndex로 이동시킵니다. 이를 반복적으로 실행하여 이미지 슬라이더를 구현합니다.
완성된 페이지와 코드 보기
오늘은 사진이 자연스럽게 넘어가는 슬라이드 효과에 대해 알아보겠습니다!
자바스크립트 슬라이드 효과
슬라이드 효과 3
슬라이드 이펙트 중 이미지가 세로로, 위쪽으로 넘어가는 효과입니다.
슬라이드 2번과 거의 동일한 구조와 스크립트지만, CSS 속성 중 바뀌는 부분이 있습니다.
구조
<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>CSS에서 바뀌는 요소
.slider__inner { /* 이미지 움직이는 영역 */
flex-wrap: wrap;
width: 4000px;
height: 450px;
}2번에선 사진을 가로로 정렬하기 위해 display: flex를 사용했지만, 이번엔 세로로 움직이므로 flex를 제거해줍니다.
스크립트_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 sliderInterval = 3000; // 이미지 변경 간격 시간
sliderInner.style.transition = "all 0.4s";
setInterval(() => {
currentIndex = (currentIndex + 1) % sliderCount;
sliderInner.style.transform = "translateY("+ -450 * currentIndex + "px)";
}, sliderInterval);
</script>2번 방법과 동일하지만, translateX를 translateY로, width값 800을 height값 450으로 바꿔줍니다.
1. 먼저, sliderInner 요소에 대해서 transition 속성을 "all 0.4s"로 설정합니다. 이는 슬라이더 이미지가 이동할 때 애니메이션을 적용하기 위함입니다.
2. 그 후에는 setInterval() 함수를 사용하여 일정한 시간 간격으로 슬라이더 이미지를 변경합니다. setInterval() 함수는 첫 번째 인자로 실행할 함수를 받으며, 두 번째 인자로 실행할 시간 간격을 받습니다.
3. setInterval() 함수 안에서는 currentIndex 값을 1 증가시키고, sliderCount로 나눈 나머지 값을 currentIndex로 저장합니다. 이는 슬라이더 이미지를 순환하도록 하기 위함입니다. 즉, currentIndex가 sliderCount와 같아지면 다시 0으로 돌아가게 됩니다.
4. 그리고, sliderInner 요소의 transform 속성을 변경하여 이미지를 이동시킵니다. translateY() 함수를 사용하여 y축 방향으로 이미지를 이동시키며, 이동 거리는 currentIndex에 -450을 곱한 값으로 설정됩니다. 이 때 -450은 이미지 한 장의 높이를 나타내며, currentIndex가 0일 때는 0px, 1일 때는 -450px, 2일 때는 -900px, ... 이렇게 이동하게 됩니다.
스크립트_GSAP
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script>
<script>
setInterval(() => {
currentIndex = (currentIndex + 1 ) % sliderCount;
gsap.to(".slider__inner", {
y : -450 * currentIndex,
duration : 1,
ease: "power4.out"
});
}, sliderInterval);
</script>GSAP도 마찬가지로 x값을 y로, -800을 -450으로 바꿔줍니다.
1. 먼저, setInterval() 함수를 사용하여 일정한 시간 간격으로 슬라이더 이미지를 변경합니다. 이전 예제와 마찬가지로 currentIndex 값을 1 증가시키고, sliderCount로 나눈 나머지 값을 currentIndex로 저장합니다.
2. 그리고, gsap.to() 함수를 사용하여 slider__inner 요소의 y축 위치를 변경합니다. 이 때 이동 거리는 -450 * currentIndex로 설정되며, duration 속성을 사용하여 이동하는데 걸리는 시간을 1초로 설정하였습니다. ease 속성을 사용하여 이동하는 동안의 애니메이션 효과를 "power4.out"으로 설정하였습니다.
3. 즉, gsap.to() 함수는 slider__inner 요소의 y축 위치를 1초 동안 -450 * currentIndex로 이동시키며, 이때 "power4.out" 애니메이션 효과를 적용합니다. 이를 반복적으로 실행하여 이미지 슬라이더를 구현합니다.
스크립트_jQuery
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js"></script>
<script>
setInterval(() => {
currentIndex = (currentIndex + 1) % $(".slider").length;
$(".slider__inner").css("position", "relative");
$(".slider__inner").animate({top : -450 * currentIndex}, 600);
}, sliderInterval);
</script>left를 top으로, -800을 -450으로 바꿔줍니다.
1. 먼저, setInterval() 함수를 사용하여 일정한 시간 간격으로 슬라이더 이미지를 변경합니다. 이전 예제와 마찬가지로 currentIndex 값을 1 증가시키고, $(".slider").length로 나눈 나머지 값을 currentIndex로 저장합니다.
2. 그리고, $(".slider__inner").css() 함수를 사용하여 slider__inner 요소의 position 속성을 "relative"로 설정합니다. 그리고, $(".slider__inner").animate() 함수를 사용하여 slider__inner 요소의 top 속성을 -450 * currentIndex로 이동시킵니다. 이동하는데 걸리는 시간은 600밀리초로 설정되었습니다.
3. 즉, $(".slider__inner").css() 함수는 slider__inner 요소의 position 속성을 "relative"로 변경하며, $(".slider__inner").animate() 함수는 slider__inner 요소의 top 속성을 600밀리초 동안 -450 * currentIndex로 이동시킵니다. 이를 반복적으로 실행하여 이미지 슬라이더를 구현합니다.
완성된 페이지와 코드 보기
