슬라이드 이펙트 다섯번째
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설명
우선 문서 객체 모델(DOM)을 이용하여 HTML에서 슬라이더와 관련된 요소들을 선택하고 변수에 할당합니다.
이미지가 움직이는 영역과 보여지는 영역, 그리고 개별 이미지를 나타내는 요소를 선택합니다.
그리고 현재 보이는 이미지(currentIndex) 변수와 이미지의 갯수(sliderCount)를 설정합니다.
또한 이미지 변경 간격 시간(sliderInterval)과 이미지 가로값(sliderHeight)도 설정합니다.
그리고 첫 번째 이미지를 복사(clone)하여 마지막 이미지 다음에 붙여넣습니다. 이렇게 하면 슬라이더가 무한 반복됩니다.
그리고 sliderEffect() 함수가 정의됩니다. 이 함수는 슬라이더의 이미지를 변경하는 역할을 합니다.
currentIndex를 1 증가시키고, 현재 이미지 위치에 맞게 이미지 움직이는 영역(sliderInner)의 CSS 속성을 변경합니다.
마지막 이미지에 위치한 경우, 0.7초 후에 애니메이션 효과 없이 첫 번째 이미지 위치로 이동합니다.
마지막으로 이 함수를 setInterval() 메서드를 이용하여 일정 시간 간격으로 호출합니다. 이렇게 하면 슬라이더가 자동으로 움직입니다.
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,
y: -sliderHeight * currentIndex,
ease: "elastic.out(1.5, 0.9)"
});
if(currentIndex === sliderCount){
setTimeout(() =>{
gsap.set(sliderInner, {y: 0});
currentIndex = 0;
},700);
}
}
setInterval(sliderEffect, sliderInterval);
</script>GSAP 설명
sliderInner.appendChild(sliderClone) : 첫 번째 이미지를 복제하여 마지막에 추가합니다. 이렇게하면 마지막 이미지에서 첫 번째 이미지로 자연스럽게 전환됩니다.
currentIndex : 현재 보이는 이미지의 인덱스를 저장합니다.
gsap.to(sliderInner, {duration: 0.6, y: -sliderHeight * currentIndex, ease: "elastic.out(1.5, 0.9)"}) : gsap을 사용하여 sliderInner를 0.6초 동안 currentIndex에 따라 sliderHeight의 배수 만큼 이동합니다. ease 속성은 이동 효과를 제어합니다.
if(currentIndex === sliderCount) : 마지막 이미지에 도달하면 setTimeout을 사용하여 0.7초 후에 첫 번째 이미지로 다시 이동합니다.
setInterval(sliderEffect, sliderInterval) : sliderEffect 함수를 sliderInterval 시간 간격으로 계속 호출합니다. 이렇게하면 이미지가 일정 시간 간격으로 자동으로 전환됩니다.
jQuery
<!-- jQrery -->
<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": "translateY(-" + sliderHeight * currentIndex + "px)"
});
// 마지막 이미지에 위치 했을 때
if (currentIndex === sliderCount) {
setTimeout(function() {
$(".slider__inner").css({
"transition": "0s",
"transform": "translateY(0px)"
});
}, 700);
currentIndex = 0;
}
}
setInterval(sliderEffect, sliderInterval);
</script>jQuery 설명
먼저 첫번째 이미지를 마지막에 복사하여 붙여넣는 부분에서는, 제이쿼리의 append() 함수를 사용하여 슬라이더 내부의 .slider__inner 요소에 sliderClone을 추가합니다.
sliderEffect() 함수에서는 currentIndex 값을 증가시키고, sliderHeight와 함께 이를 기반으로 .slider__inner의 transition과 transform 속성을 변경합니다. 이를 통해 슬라이더 이미지가 이동하는 효과를 구현합니다.
마지막으로, currentIndex 값이 sliderCount와 같아질 경우 슬라이더 이미지가 마지막 이미지에 위치했다는 것을 의미하므로, 700ms 후에 .slider__inner의 transition과 transform 속성을 다시 초기화합니다. 그리고 currentIndex 값을 0으로 초기화하여 슬라이더 이미지가 처음 상태로 돌아갈 수 있도록 합니다.
setInterval() 함수를 사용하여 sliderEffect() 함수를 일정한 간격으로 반복 실행하도록 설정합니다.