다른 명언
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>01. 슬라이드 이펙트</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: 4000px;
height: 450px;
}
.slider { /* 개별적인 이미지 */
position: relative;
width: 800px;
height: 450px;
}
</style>
</head>
<body class="img01 bg01 font01">
<header id="header">
<h1>Javascript Slider Effect01</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>
<li><a href="sliderEffect06.html">6</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:ebmdols@naver.com">ebmdols@naver.com</a>
</footer>
<!-- //footer -->
</body>
</html>구성은 저번시간과 같습니다.
<script>
//선택자
const sliderWrap = document.querySelector(".slider__wrap");
const sliderImg = document.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");
// sliderInner.style.transform = translateX("-800px");
// sliderInner.style.transform = translateX("-1600px");
// sliderInner.style.transform = translateX("-2400px");
// sliderInner.style.transform = translateX("-3200px");
// sliderInner.style.transform = translateX("-0px");
// 트랜지션 설정
// 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.4)"
})
}, 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>이미지 슬라이더에 필요한 요소들을 선택합니다. (sliderWrap, sliderImg, sliderInner, slider)
현재 보여지는 이미지의 인덱스와 전체 이미지 갯수, 이미지 변경되는 시간&간격을 변수로 지정합니다.
setInterval() 함수를 사용하여 일정 시간마다 이미지가 변경되도록 합니다.
jQuery를 사용하여 슬라이더가 일정한 속도로 움직이도록 합니다. animate() 메서드를 사용하여 슬라이더가 부드럽게 움직이도록 합니다.
이 코드에서 사용된 GSAP (GreenSock Animation Platform) 라이브러리는 자바스크립트 기반의 애니메이션 라이브러리로, 애니메이션 효과를 더 부드럽고 다양하게 구현할 수 있도록 도와줍니다. 주석 처리된 GSAP 코드를 사용하면, jQuery로 구현한 슬라이더와는 다른 애니메이션 효과를 구현할 수 있습니다.
슬라이더 화면이 위쪽으로 올라가는 방식으로 트렌지션, GSAP, jQuery 의 가로 방향으로 적용되는 구간을 세로 방향으로 적용되는 속성으로 변경 후 그 값을 이미지에 정해진 height 값을 주어 이미지가 위로 움직이도록 설정하였습니다.
728x90