728x90
이번엔 상하로 움직이는 슬라이드 이펙트를 만들어 보았습니다.
HTML
<!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>03. 슬라이드 이펙트</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: flex;
flex-wrap: wrap;
width: 800px;
height: 2250px;
}
.slider { /*개별적인 이미지*/
position: relative;
width: 800px;
height: 450px;
}
</style>
</head>
<body class="img01 bg01 font01">
<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/sliderEffect06-min.jpg" alt=""></div>
<div class="slider"><img src="./img/sliderEffect07-min.jpg" alt=""></div>
<div class="slider"><img src="./img/sliderEffect08-min.jpg" alt=""></div>
<div class="slider"><img src="./img/sliderEffect09-min.jpg" alt=""></div>
<div class="slider"><img src="./img/sliderEffect10-min.jpg" alt=""></div>
</div>
</div>
</div>
</main>
<!-- //main-->
<footer id="footer">
<a href="1346zany@gmail.com">1346zany@gmail.com</a>
</footer>
<!-- //footer-->
</body>
</html>script
선택자
<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
<!-- javascript -->
<script>
//트렌지션 설정
sliderInner.style.transition = "all 0.6s"
setInterval(() => {
currentIndex = (currentIndex + 1) % sliderCount; //1 2 3 4 0 1 2 3 4 0
console.log(currentIndex);
sliderInner.style.transform = "translateY("+ -450 * currentIndex + "px)";
}, sliderInterval);
</script>저번엔 X축이였는데 이번엔 상하로 움직이므로 Y축으로 설정해주었습니다.
그리고 이번엔 height 값에 맞추어 -450으로 설정해주었습니다.
GSAP
<!-- 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
})
},sliderInterval);
</script>이것도 똑같이 Y축으로 바꿔주고 값을 -450으로 설정했습니다.
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>
setInterval(() => {
currentIndex = (currentIndex + 1) % $(".slider").length;
$(".slider__inner").css("position","relative");
$(".slider__inner").animate({top : -450 * currentIndex}, 600);
}, sliderInterval);
</script>상하로 움직이므로 left에서 top으로 바꿔주고 이것도 값을 -450으로 설정해주었습니다.
이러면 예시와 같은 효과를 세가지 방법으로 표현 할 수 있습니다!