슬라이드 이펙트 두번째
HTML
<body class="img02 bg02 font02">
<header id="header">
<h1>JAVASCRIPT</h1>
<p>슬라이드 이펙트 기본적인 효과 : 트랜지션 효과</p>
<ul>
<li><a href="sliderEffect01.html">1</a></li>
<li class="active"><a href="sliderEffect02.html">2</a></li>
<li><a href="sliderEffect03.html">3</a></li>
<li><a href="sliderEffect04.html">4</a></li>
<li><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"><img src="./img/Effect_bg01.jpg" alt="이미지1"></div>
<div class="slider"><img src="./img/Effect_bg02.jpg" alt="이미지2"></div>
<div class="slider"><img src="./img/Effect_bg03.jpg" alt="이미지3"></div>
<div class="slider"><img src="./img/Effect_bg04.jpg" alt="이미지4"></div>
<div class="slider"><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;
width: 4000px;
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 = 3000; // 이미지 간격 시간
</script>
<!-- javascript -->
<script>
// sliderInner.style.transform = translateX("-0px"); //-800 * 0
// sliderInner.style.transform = translateX("-800px"); //-800 * 1
// sliderInner.style.transform = translateX("-1600px"); //-800 * 2
// sliderInner.style.transform = translateX("-2400px"); //-800 * 3
// sliderInner.style.transform = translateX("-3200px"); //-800 * 4
// sliderInner.style.transform = translateX("-0px"); //-800 * 0
// sliderInner.style.transition = "all 0.6s";
// setInterval(() => {
// currentIndex = (currentIndex + 1) % sliderCount; //1 2 3 4 0 1 2 3 4 5
// sliderInner.style.transform = "translateX("+ -800 * currentIndex + "px)";
// }, sliderInterval);
</script>
<!-- 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", {
x : -800 * currentIndex,
duration : 1,
ease: "elastic.out(1, 0.3)"
})
},sliderInterval); //gpu를 이용하기 때문에 빠름(?)
</script> -->
<!-- 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({left : -800 * currentIndex}, 600, "easeOutElastic")
}, sliderInterval)
</script>자바스크립트 설명
이 코드는 자바스크립트를 사용하여 이미지 슬라이더의 동작을 구현하는 코드입니다.
먼저, sliderInner 요소의 transform 속성을 사용하여 이미지를 이동시킵니다. 이미지가 보이는 부분은 sliderInner 요소 내부에서 translateX 함수를 사용하여 -800px 만큼 이동합니다. 이때, currentIndex 변수는 현재 보이는 이미지의 인덱스를 나타냅니다.
이어서, sliderInner 요소의 transition 속성을 사용하여 이미지 전환 효과를 구현합니다. 이 속성은 all 0.6s로 설정되어 있으며, 모든 속성이 0.6초 동안 전환됩니다.
마지막으로, setInterval 함수를 사용하여 일정 시간마다 이미지를 전환하는 함수를 호출합니다. 이 함수에서는 currentIndex 변수를 업데이트하고, sliderInner 요소의 transform 속성을 사용하여 이미지를 이동시킵니다. 이때, translateX 함수 내부에는 -800 * currentIndex 값을 사용합니다. 이렇게 하면 currentIndex 변수의 값에 따라 이미지가 이동하게 됩니다.
이렇게 구현된 코드는 setInterval 함수를 사용하여 일정 시간마다 이미지를 전환하며, transition 속성을 사용하여 전환 효과를 구현합니다.
GSAP 설명
이 코드는 GreenSock Animation Platform (GSAP)을 사용하여 이미지 슬라이더의 동작을 구현하는 코드입니다.
먼저, setInterval 함수를 사용하여 일정 시간마다 이미지를 전환하는 함수를 호출합니다. 이 함수에서는 currentIndex 변수를 업데이트하고, gsap.to 함수를 사용하여 이미지를 이동시킵니다. 이때, ".slider__inner" 요소의 x 속성을 사용하여 이미지를 이동시키며, -800 * currentIndex 값을 사용합니다. duration 속성은 애니메이션의 지속 시간을 설정하며, ease 속성은 애니메이션의 이징을 설정합니다.
GSAP은 GPU 가속을 지원하므로, 자바스크립트로 구현된 애니메이션보다 더 빠른 성능을 보입니다. 따라서, 이 코드는 자연스러운 애니메이션 효과를 구현하면서도 빠른 속도로 이미지를 전환할 수 있습니다.
jQuery 설명
이 코드는 jQuery를 사용하여 이미지 슬라이더를 구현하는 코드입니다.
먼저, setInterval 함수를 사용하여 일정 시간마다 이미지를 전환하는 함수를 호출합니다. 이 함수에서는 currentIndex 변수를 업데이트하고, jQuery의 animate 함수를 사용하여 이미지를 이동시킵니다. 이때, ".slider__inner" 요소의 left 속성을 사용하여 이미지를 이동시키며, -800 * currentIndex 값을 사용합니다. animate 함수의 두 번째 매개변수는 애니메이션의 지속 시간을 설정하며, 세 번째 매개변수는 애니메이션의 이징을 설정합니다.
jQuery는 기본적으로 GPU 가속을 지원하지 않으므로, GSAP과 같은 성능을 보이지는 않습니다. 그러나, 간단한 애니메이션을 구현할 때는 jQuery가 더 쉽게 사용될 수 있습니다. animate 함수는 다양한 옵션을 지원하므로, 다양한 애니메이션 효과를 쉽게 구현할 수 있습니다.