728x90
반응형
슬라이드 이펙트3 세로유형
전체소스 보러가기
<style>
/* slider__wrap */
.slider__wrap {
width: 100%;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.slider__img { /* 이미지가 보이는 영역 */
position: relative;
width: 800px;
height: 450px;
overflow: hidden;
}
.slider__inner { /* 이미지 움직이는 영역 */
/* display: flex; */
/* flex-wrap: wrap; */
/* width: 4000px; */
}
.slider { /* 개별적인 이미지 */
position: relative;
width: 800px;
height: 450px;
}
</style>슬라이드 이펙트 가로 유형에서 가져와서 /* display: flex; */ /* flex-wrap: wrap; */ /* width: 4000px; */을 주석 처리 해주어서 가로에서 세로로 변경 하였습니다.
※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; //이미지 변경 간격 시간
</script>
<!-- javascript -->
<script>
sliderInner.style.transform = translateX("0px");
sliderInner.style.transform = translateX("-800px");
sliderInner.style.transform = translateX("-1600px");
sliderInner.style.transform = translateX("-2400px");
sliderInner.style.transform = translateX("-3200px");
sliderInner.style.transform = translateX("0px");
//트랜지션 설정
sliderInner.style.transition = "all 0.6s";
setInterval(() => {
currentIndex = (currentIndex + 1) % sliderCount; // 1 2 3 4 0 1 2 3 4 0
sliderInner.style.transform = "translateY("+ -450 * currentIndex + "px)";
},sliderInterval);
</script>가로유형에서 처럼 똑같이 setInterval함수를 쓰고 sliderInterval의 주기만큼 반복 하도록 하게 하였습니다.
그후 transfrom을 이용하여 이미지의 높이만큼 translateY의 값을 이동시켜 세로로 움직이게 해줍니다. 그럼 이동한 후에 있는 이미지가 보이게 됩니다.
| translateY | CSS에서 사용되는 속성 중 하나로, 해당 요소의 수직 방향으로 이동하는 값을 지정합니다. |
※ GSAP이용하기
<!-- 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: "elastic.out(1, 0.3)"
});
},sliderInterval)
</script>GSAP를 사용하기위해 라이브러리를 가져온후 정해준 시간주기로 반복하고 변수를 변경하는 거까지는 동일합니다.
GSAP를 사용하기위해 to 함수를 사용하고 .slider__inner 클래스를 가진 요소의 y의 속성값을 -450 * currentIndex 만큼 움직이고 그곳에 있는 이미지를 보여줍니다.
| duration | 애니메이션의 실행 시간을 설정하는데 사용되는 옵션입니다. 해당 속성의 값은 초 단위로 설정됩니다. |
| ease | 애니메이션 등에서 사용되어 움직임을 자연스럽게 만들기 위해 시간에 따라 값을 변화시키는 함수입니다. |
| elastic.out(1, 0.3) | 탄성을 모방하여 움직임을 부드럽게 만드는데 사용됩니다. "elastic.out"은 탄성의 반동을 나타내고, 괄호 안에 있는 매개변수는 다음과 같습니다: 첫 번째 매개변수 (1)는 애니메이션이 끝나는 시간입니다. 이 값은 1로 설정되어 있으므로, 애니메이션이 1초 동안 진행됩니다. 두 번째 매개변수 (0.3)는 반동이 얼마나 강한지를 나타냅니다. 이 값이 작을수록 반동이 약해지고, 값이 클수록 반동이 강해집니다 |
※ jQuery이용하기
<!-- 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>jQuery를 사용하기위해 라이브러리를 가져온후 정해준 시간주기로 반복하고 변수를 변경하는거 까지는 동일 합니다. jQuery를 사용할때는 $를 사용합니다.
그후 slider__inner의 position을 relative로 하여 해당 요소를 애니메이션 효과로 이동시켜주게 합니다.
animate()를 이용해 .slider__inner에 애니메이션효과를 600의 주기마다 top으로 -450만큼 이동하게 만들어줍니다. 이동한 곳에는 다른 사진이 보이게 됩니다.
| animate | jQuery의 메서드 중 하나로, HTML 요소를 애니메이션화하는 데 사용됩니다. 이 메서드는 CSS 속성 값들을 변경하여 요소를 움직이는 애니메이션을 만들어 줍니다. |