슬라이드 이펙트 세번째
HTML
<body class="img02 bg02 font02">
<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 class="active"><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;
height: 450px;
}
.slider { /* 개별적인 이미지 */
position: relative;
width: 800px;
height: 450px;
}
</style>CSS 설명
기존에 .slider__inner에 들어가 있던 width : 4000px;을 빼서 flex속성의 이미지들을 가로 정렬에서 세로 정렬로 바꿨다.
JAVASCRIPT
<!-- 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 = "translateY("+ -450 * 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", {
y : -450 * 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({top : -450 * currentIndex}, 600, "easeOutElastic")
}, sliderInterval)
</script> -->자바스크립트 설명
sliderInner.style.transition = "all 0.6s"; 이 부분은 슬라이더가 이동할 때 애니메이션 효과를 주기 위해 스타일 속성에 트랜지션을 추가하는 것입니다. 이 경우 "all 0.6s"는 모든 스타일 속성이 0.6초 동안 변화하도록 설정합니다.
setInterval(() => {...}, sliderInterval); 이 부분은 일정한 시간 간격으로 슬라이더를 이동시키는 것을 구현합니다. setInterval 함수는 첫 번째 인자로 전달된 함수를 두 번째 인자로 전달된 시간 간격마다 반복해서 실행합니다. 이 경우, 슬라이더를 이동시키는 함수가 전달됩니다.
currentIndex = (currentIndex + 1) % sliderCount; 이 부분은 현재 보여지는 이미지의 인덱스를 계산하는 것입니다. currentIndex 변수는 현재 보여지는 이미지의 인덱스를 저장하고, sliderCount 변수는 전체 이미지의 개수를 나타냅니다. 이 코드는 현재 이미지의 인덱스에 1을 더하고, sliderCount로 나눈 나머지를 currentIndex에 저장합니다. 이렇게 하면 currentIndex는 0부터 sliderCount-1까지의 값을 가지게 됩니다. 만약 currentIndex가 sliderCount와 같아지면, 다시 0으로 초기화됩니다. 이를 통해 이미지 슬라이더가 순환하도록 구현됩니다.
sliderInner.style.transform = "translateY("+ -450 * currentIndex + "px)"; 이 부분은 현재 보여지는 이미지를 화면에 보여주기 위해 슬라이더의 위치를 이동시키는 것입니다. sliderInner은 이미지를 포함하는 컨테이너 역할을 합니다. transform 스타일 속성은 요소의 위치를 이동시키는 데 사용됩니다. 이 코드에서는 translateY 함수를 사용하여 요소를 수직 방향으로 이동시킵니다. -450 * currentIndex는 현재 이미지의 인덱스에 따라 이동할 거리를 계산한 것이며, px는 픽셀 단위를 나타내는 단위입니다. 따라서 각 이미지의 높이가 450픽셀이라면, 이 코드는 현재 이미지의 인덱스에 따라 슬라이더를 이동시켜 보여지는 이미지가 변경되도록 합니다.
GASP 설명
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script> 이 부분은 GSAP 라이브러리를 불러오는 코드입니다.
setInterval(() => {...},sliderInterval) 이 부분은 일정한 시간 간격으로 슬라이더를 이동시키는 코드입니다. 이전의 자바스크립트 코드와 동일합니다.
currentIndex = (currentIndex + 1) % sliderCount; 이 부분도 이전과 같습니다.
gsap.to(".slider__inner", {...}) 이 부분은 GSAP 라이브러리의 to 메서드를 사용하여 슬라이더를 이동시키는 코드입니다. 첫 번째 인자로 이동시킬 대상의 선택자를 지정하고, 두 번째 인자로 애니메이션 효과를 설정합니다.
y : -450 * currentIndex 이 부분은 to 메서드의 옵션 중 하나인 y 속성을 사용하여 대상 요소를 수직 방향으로 이동시키는 것입니다. 이전의 자바스크립트 코드와 동일하게 현재 이미지의 인덱스에 따라 이동할 거리를 계산하여 -450 * currentIndex 값을 설정합니다.
duration : 1 이 부분은 애니메이션의 지속 시간을 설정하는 것입니다. 이 경우 1초로 설정됩니다.
ease: "elastic.out(1, 0.3)" 이 부분은 애니메이션의 이징 효과를 설정하는 것입니다. 이 경우 "elastic.out" 이징 함수를 사용하여, 시작점에서 약간 뒤로 물러나다가 탄력적으로 원래 위치로 돌아오는 효과를 줍니다.
이 코드는 자바스크립트로 구현한 이전의 코드보다 GSAP 라이브러리를 사용하기 때문에 GPU 가속을 이용하여 더 빠르게 슬라이더를 이동시킬 수 있다는 장점이 있습니다. 또한, GSAP 라이브러리는 다양한 이징 함수와 애니메이션 옵션을 제공하기 때문에 보다 다양한 애니메이션 효과를 구현할 수 있습니다.
jQuery 설명
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> 이 부분은 jQuery 라이브러리를 불러오는 코드입니다.
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js"></script> 이 부분은 jQuery UI 라이브러리를 불러오는 코드입니다.
setInterval(() => {...},sliderInterval) 이 부분은 일정한 시간 간격으로 슬라이더를 이동시키는 코드입니다. 이전의 자바스크립트 코드와 동일합니다.
currentIndex = (currentIndex + 1) % $(".slider").length; 이 부분은 이전의 자바스크립트 코드와 동일합니다.
$(".slider__inner").css("position", "relative") 이 부분은 .slider__inner 요소의 position 속성을 상대 위치로 변경하는 것입니다.
$(".slider__inner").animate({top : -450 * currentIndex}, 600, "easeOutElastic") 이 부분은 .slider__inner 요소를 수직 방향으로 이동시키는 것입니다. animate 메서드를 사용하여 이동 거리와 애니메이션 효과 등을 설정합니다. 첫 번째 인자로 이동 거리를 설정하고, 두 번째 인자로 애니메이션의 지속 시간을 설정합니다. 세 번째 인자로 이징 효과를 설정합니다. 이 경우 "easeOutElastic" 이징 함수를 사용하여, 시작점에서 약간 뒤로 물러나다가 탄력적으로 원래 위치로 돌아오는 효과를 줍니다.
이 코드는 jQuery 라이브러리를 사용하여 간단하게 구현할 수 있다는 장점이 있습니다. 하지만, jQuery의 animate 메서드는 기본적으로 JavaScript의 setInterval과는 달리, 브라우저가 수행하는 다른 작업을 방해하면서 작동할 수 있으므로 성능상의 문제가 발생할 수 있습니다. 또한, jQuery는 DOM 조작을 위한 메서드를 많이 가지고 있어, 파일의 크기가 크고 느린 페이지 로딩 속도를 유발할 수 있습니다.