슬라이드 이펙트 사용해보기 ( 3 ) 상하 슬라이드
슬라이드 이펙트를 이용해 사진이 상하로 슬라이드 하는 사이트를 만들어 보겠습니다.
VSCode
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>슬라이드 이펙트3</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/slider.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: inline; */
width: 800px;
height: 2250px;
}
.slider { /* 개별적인 이미지 */
position: relative;
width: 800px;
height: 450px;
}
</style>
</head>
<body class="img04 bg01 font03">
<header id="header">
<h1>Javascript Slider Effect03</h1>
<p>슬라이드 이펙트3</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/SliderEffect06-min.jpg" alt="이미지1"></div>
<div class="slider"><img src="./img/SliderEffect07-min.jpg" alt="이미지2"></div>
<div class="slider"><img src="./img/SliderEffect08-min.jpg" alt="이미지3"></div>
<div class="slider"><img src="./img/SliderEffect09-min.jpg" alt="이미지4"></div>
<div class="slider"><img src="./img/SliderEffect10-min.jpg" alt="이미지5"></div>
</div>
</div>
</div>
</main>
<!-- //main-->
<footer id="footer">
<a href="mailto:ehcjswo1@gmail.com">ehcjswo1@gmail.com</a>
</footer>
<!-- //footer-->
<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 = 1000; //이미지 변경 간격 시간
</script>
<!-- javascript -->
<script>
// sliderInner.style.transform = translateY("0px");
// sliderInner.style.transform = translateY("-450px");
// sliderInner.style.transform = translateY("-900px");
// sliderInner.style.transform = translateY("-1350px");
// sliderInner.style.transform = translateY("-1800px");
// sliderInner.style.transform = translateY("0px");
sliderInner.style.transition = "all 0.6s";
setInterval(() => {
currentIndex = (currentIndex + 1 ) % sliderCount;
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);
</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> -->
</body>
</html>슬라이드 영역이 상하로 바뀌기 때문에 .slider__inner 클래스의 width값과 height 값이 달라졌습니다.
또 상하로 움직여야 하기 때문에 .slider__inner 클래스에 display를 없앴습니다.
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 = 1000; //이미지 변경 간격 시간
</script>
<!-- javascript -->
<script>
// sliderInner.style.transform = translateY("0px");
// sliderInner.style.transform = translateY("-450px");
// sliderInner.style.transform = translateY("-900px");
// sliderInner.style.transform = translateY("-1350px");
// sliderInner.style.transform = translateY("-1800px");
// sliderInner.style.transform = translateY("0px");
sliderInner.style.transition = "all 0.6s";
setInterval(() => {
currentIndex = (currentIndex + 1 ) % sliderCount;
sliderInner.style.transform = "translateY("+ -450 * currentIndex + "px)";
}, sliderInterval);
</script>setInterval() 함수는 일정한 간격으로 함수를 반복 실행하는 함수입니다. 이 코드에서는 sliderInterval 변수에 저장된 시간 간격으로 currentIndex와 sliderInner 요소를 조작하여 이미지 슬라이더를 구현합니다.
currentIndex 변수는 현재 슬라이드의 인덱스를 저장하고, sliderCount 변수는 총 슬라이드 수를 저장합니다. currentIndex는 sliderCount의 범위 내에서 순환하도록 (currentIndex + 1 ) % sliderCount 로 설정되어 있습니다.
sliderInner는 이미지 슬라이더의 내부 요소를 나타내며, transform 속성을 사용하여 현재 슬라이드의 위치를 변경합니다. 이 코드에서는 translateY() 함수를 사용하여 슬라이더를 좌우로 이동시키며, -450 * currentIndex 만큼 이동합니다.
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( GreenSock Animation Platform) 라이브러리를 로드합니다.
이 라이브러리는 웹 애니메이션을 제작하는 데 사용되며, 매끄러운 애니메이션을 만들기 위해 사용됩니다.
그리고 setInterval() 함수를 사용하여 일정한 간격으로 이미지 슬라이더를 이동시키는 기능을 구현합니다. 이전 코드와 마찬가지로 currentIndex 변수는 현재 슬라이드의 인덱스를 저장하고, sliderCount 변수는 총 슬라이드 수를 저장합니다.
이 부분이 이전 코드와 다른데, gsap.to() 함수를 사용하여 이미지 슬라이더를 이동시킵니다. 이 함수는 첫 번째 인수로 애니메이션 대상 요소(여기서는 ".slider__inner")를, 두 번째 인수로는 애니메이션 속성을 객체 형태로 전달합니다. 이 코드에서는 Y 속성을 이용하여 슬라이더를 상하로 이동시키고 있습니다.
또한, duration 속성을 이용하여 애니메이션의 지속시간을 1초로 설정하고, ease 속성을 이용하여 애니메이션의 이징 효과를 적용하고 있습니다. 이징 효과는 애니메이션을 자연스럽게 보이게 하기 위한 기법으로, elastic.out(1, 0.3)은 GSAP에서 제공하는 이징 함수 중 하나로, 탄성있는 효과를 부여합니다.
따라서 이 코드는 GSAP 라이브러리를 사용하여 매끄러운 애니메이션 효과를 추가한 이미지 슬라이더를 구현합니다.
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>코드 상단에서 jQuery와 jQuery UI 라이브러리를 로드합니다.
이 라이브러리는 각각 DOM 조작과 UI 구성 요소를 쉽게 만들 수 있는 기능을 제공합니다.
그리고 setInterval() 함수를 사용하여 일정한 간격으로 이미지 슬라이더를 이동시키는 기능을 구현합니다. 이전 코드와 마찬가지로 currentIndex 변수는 현재 슬라이드의 인덱스를 저장하고, sliderCount 변수는 총 슬라이드 수를 저장합니다.
이 부분이 이전 코드와 다른데, jQuery를 사용하여 슬라이더를 이동시키고 있습니다. 먼저, $(".slider__inner")로 해당 슬라이더 요소를 선택하고, css() 함수를 사용하여 position 속성을 "relative"로 변경합니다. 이는 슬라이더 요소를 상대적인 위치로 설정하여 애니메이션 이동을 쉽게 하기 위함입니다.
그리고, animate() 함수를 사용하여 슬라이더 요소를 이동시킵니다. 이 함수는 첫 번째 인수로 애니메이션 대상 요소(여기서는 ".slider__inner")를, 두 번째 인수로는 애니메이션 속성을 객체 형태로 전달합니다. 이 코드에서는 top 속성을 이용하여 슬라이더를 상하로 이동시키고 있습니다.
또한, 애니메이션의 지속시간을 600밀리초로 설정하고, 이징 효과로 easeOutElastic을 사용하고 있습니다. 이는 jQuery UI 라이브러리에서 제공하는 이징 효과 중 하나로, 탄성있는 효과를 부여합니다.
따라서 이 코드는 jQuery와 jQuery UI 라이브러리를 사용하여 이미지 슬라이더를 구현하고 있습니다.