슬라이드 이펙트 네번째
HTML
<body class="img05 bg05 font05">
<header id="header">
<h1>Javascript Slider Effect03</h1>
<p>슬라이드 이펙트 기본적인 효과 : 트랜지션 효과</p>
<ul>
<li><a href="sliderEffect01.html">1</a></li>
<li><a href="sliderEffect02.html">2</a></li>
<li><a href="sliderEffect03.html">3</a></li>
<li><a href="sliderEffect04.html">4</a></li>
<li class="active"><a href="sliderEffect05.html">5</a></li>
</ul>
</header>
<!-- header -->
<main id="main">
<div class="slider__wrap">
<div class="slider__img">
<div class="slider__inner">
<div class="slider s1"><img src="./img/Effect_bg01.jpg" alt="이미지1"></div>
<div class="slider s2"><img src="./img/Effect_bg02.jpg" alt="이미지2"></div>
<div class="slider s3"><img src="./img/Effect_bg03.jpg" alt="이미지3"></div>
<div class="slider s4"><img src="./img/Effect_bg04.jpg" alt="이미지4"></div>
<div class="slider s5"><img src="./img/Effect_bg05.jpg" alt="이미지5"></div>
</div>
</div>
</div>
</main>
<!-- main -->
<footer id="footer">
<a href="mailto:kshkmn0929@naver.com">kshkmn0929@naver.com</a>
</footer>
<!-- footer -->
CSS
<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;
height: 450px;
}
.slider { /* 개별적인 이미지 */
position: relative;
width: 800px;
height: 450px;
}
</style>
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 = 2000; // 이미지 변경 간격 시간
let sliderHeight = slider[0].offsetHeight; // 이미지 가로값
let sliderClone = sliderInner.firstElementChild.cloneNode(true); // 첫번째 이미지 복사
// 복사한 첫 번째 이미지 마지막에 붙여넣기
sliderInner.appendChild(sliderClone);
function sliderEffect(){
currentIndex++;
sliderInner.style.transition = "all 0.6s";
sliderInner.style.transform = "translateY(-"+ sliderHeight * currentIndex+"px)"
// 마지막 이미지에 위치 했을 때
if(currentIndex == sliderCount){
setTimeout(() => {
sliderInner.style.transition = "0s";
sliderInner.style.transform = "translate(0px)";
}, 700);
currentIndex = 0;
}
}
</script>JAVASCRIPT설명
currentIndex 변수를 증가시키면서 현재 보이는 이미지의 인덱스를 업데이트합니다.
sliderInner 요소에 대해 transition 속성을 0.6초로 설정하고, translateY() 함수를 사용하여 요소를 수직으로 이동시킵니다. sliderHeight * currentIndex 값은 currentIndex와 sliderHeight 값을 곱한 결과로, 현재 보이는 이미지의 위치를 계산하기 위해 사용됩니다.
currentIndex와 sliderCount 값이 같으면, 마지막 이미지에 도달한 것이므로 setTimeout() 함수를 사용하여 0.7초 후에 sliderInner 요소의 transition 속성을 0으로 설정하고, transform 속성을 초기값인 translate(0px)로 설정합니다.
currentIndex 값을 0으로 다시 설정합니다.
즉, 이 코드는 슬라이더의 이미지를 이동시키는 기능을 구현하는 함수입니다. sliderInner 요소를 사용하여 이미지의 위치를 변경하고, setTimeout() 함수를 사용하여 슬라이더가 마지막 이미지에 도달하면 다시 첫 번째 이미지로 이동하도록 합니다.
GSAP
<!-- GSAP -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script>
<script>
sliderInner.appendChild(sliderClone);
function sliderEffect(){
currentIndex++;
gsap.to(sliderInner, {
duration: 0.6,
x: -sliderWidth * currentIndex,
ease: "elastic.out(1.5, 0.9)"
});
if(currentIndex === sliderCount){
setTimeout(() =>{
gsap.set(sliderInner, {x: 0});
currentIndex = 0;
},700);
}
}
setInterval(sliderEffect, sliderInterval);
</script>GSAP 설명
currentIndex 변수를 증가시키면서 현재 보이는 이미지의 인덱스를 업데이트합니다.
gsap.to() 함수를 사용하여 sliderInner 요소에 대해 애니메이션 효과를 적용합니다. duration 속성을 0.6초로 설정하고, y 속성을 sliderHeight * currentIndex 값으로 설정하여 요소를 수직으로 이동시킵니다.
onComplete 콜백 함수를 사용하여 애니메이션이 완료되면 currentIndex와 sliderCount 값을 비교합니다. 두 값이 같으면, 마지막 이미지에 도달한 것이므로 다시 첫 번째 이미지로 이동하도록 gsap.to() 함수를 사용합니다. duration 속성을 0으로 설정하고, y 속성을 0으로 설정하여 슬라이더를 초기 위치로 이동시킵니다. 또한 onComplete 콜백 함수를 사용하여 currentIndex 값을 0으로 다시 설정합니다.
즉, GSAP 라이브러리를 사용하여 슬라이더를 구현하는 코드입니다. sliderInner 요소를 사용하여 이미지의 위치를 변경하고, 애니메이션 효과를 적용하여 부드러운 이동 효과를 구현하고 있습니다. onComplete 콜백 함수를 사용하여 슬라이더가 마지막 이미지에 도달하면 다시 첫 번째 이미지로 이동하도록 합니다.
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>
// 첫번째 이미지를 마지막에 복사하여 붙여넣기
$(".slider__inner").append(sliderClone);
function sliderEffect() {
currentIndex++;
$(".slider__inner").css({
"transition": "all 0.6s",
"transform": "translateX(-" + sliderWidth * currentIndex + "px)"
});
// 마지막 이미지에 위치 했을 때
if (currentIndex === sliderCount) {
setTimeout(function() {
$(".slider__inner").css({
"transition": "0s",
"transform": "translateX(0px)"
});
}, 700);
currentIndex = 0;
}
}
setInterval(sliderEffect, sliderInterval);
</script>jQuery 설명
currentIndex 변수를 증가시키면서 현재 보이는 이미지의 인덱스를 업데이트합니다.
sliderInner.animate() 함수를 사용하여 sliderInner 요소에 대해 애니메이션 효과를 적용합니다. top 속성을 -sliderHeight * currentIndex 값으로 설정하여 요소를 수직으로 이동시킵니다. 600 값은 애니메이션의 지속 시간을 나타냅니다.
function() 콜백 함수를 사용하여 애니메이션이 완료되면 currentIndex와 sliderCount 값을 비교합니다. 두 값이 같으면, 마지막 이미지에 도달한 것이므로 다시 첫 번째 이미지로 이동하도록 sliderInner.animate() 함수를 사용합니다. top 속성을 0으로 설정하여 슬라이더를 초기 위치로 이동시킵니다. 또한 function() 콜백 함수를 사용하여 currentIndex 값을 0으로 다시 설정합니다.
즉, jQuery 라이브러리를 사용하여 슬라이더를 구현하는 코드입니다. sliderInner 요소를 사용하여 이미지의 위치를 변경하고, 애니메이션 효과를 적용하여 부드러운 이동 효과를 구현하고 있습니다. function() 콜백 함수를 사용하여 슬라이더가 마지막 이미지에 도달하면 다시 첫 번째 이미지로 이동하도록 합니다.