슬라이드 이펙트 사용해보기 ( 1 )
슬라이드 이펙트를 이용해 사진이 바뀌는 사이트를 만들어 보겠습니다.
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>슬라이드 이펙트</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 {
transition: all 0.3s;
position: absolute;
left: 0;
top: 0;
}
.slider::before {
position: absolute;
left: 5px;
top: 5px;
background: rgba(0,0,0,0.4);
color: #fff;
padding: 5px 10px;
}
.slider:nth-child(1)::before {content: '이미지1';}
.slider:nth-child(2)::before {content: '이미지2';}
.slider:nth-child(3)::before {content: '이미지3';}
.slider:nth-child(4)::before {content: '이미지4';}
.slider:nth-child(5)::before {content: '이미지5';}
.slider:nth-child(1) {z-index: 5;}
.slider:nth-child(2) {z-index: 4;}
.slider:nth-child(3) {z-index: 3;}
.slider:nth-child(4) {z-index: 2;}
.slider:nth-child(5) {z-index: 1;}
</style>
</head>
<body class="img01 bg02 font01">
<header id="header">
<h1>Javascript Slider Effect01</h1>
<p>슬라이드 이펙트</p>
<ul>
<li class="active"><a href="sliderEffect01.html">1</a></li>
<li><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"><img src="./img/SliderEffect01-min.jpg" alt="이미지1"></div>
<div class="slider"><img src="./img/SliderEffect02-min.jpg" alt="이미지2"></div>
<div class="slider"><img src="./img/SliderEffect03-min.jpg" alt="이미지3"></div>
<div class="slider"><img src="./img/SliderEffect04-min.jpg" alt="이미지4"></div>
<div class="slider"><img src="./img/SliderEffect05-min.jpg" alt="이미지5"></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 slider = sliderWrap.querySelectorAll(".slider");
let currentIndex = 0; //현재 보이는 이미지
let sliderCount = slider.length; //이미지 갯수
let sliderInterval = 3000; //이미지 변경 간격 시간
setInterval(() => {
// 0 1 2 3 4 0 1 2 3 4 0 1 2 3 4 0 //currentIndex
// 1 2 3 4 0 1 2 3 4 0 1 2 3 4 0 1 //nextindex
let nextindex = (currentIndex + 1) % sliderCount;
slider[currentIndex].style.opacity = "0";
slider[nextindex].style.opacity = "1";
currentIndex = nextindex;
console.log(nextindex);
}, sliderInterval);
// slider[0].style.opacity = "0"; //첫번째 이미지를 안보이게
// slider[1].style.opacity = "1"; //두번째 이미지를 보이게
// slider[1].style.opacity = "0"; //두번째 이미지를 안보이게
// slider[2].style.opacity = "1"; //세번째 이미지를 보이게
// slider[2].style.opacity = "0"; //세번째 이미지를 안보이게
// slider[3].style.opacity = "1"; //네번째 이미지를 보이게
// slider[3].style.opacity = "0"; //네번째 이미지를 안보이게
// slider[4].style.opacity = "1"; //다섯번째 이미지를 보이게
// slider[4].style.opacity = "0"; //다섯번째 이미지를 안보이게
// slider[0].style.opacity = "1"; //첫번째 이미지를 보이게
</script>
<!-- GSAP -->
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script>
<script>
setInterval(() => {
nextindex = (currentIndex +1) % sliderCount;
gsap.to(slider[currentIndex], {
opacity : "0",
duration : "1",
ease: "power2.inOut"
});
gsap.to(slider[nextindex], {
opacity: "1",
duration: "1",
ease: "power2.inOut"
});
currentIndex = nextindex;
}, 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(()=>{
nextindex = (currentIndex + 1) % $(".slider").length;
$(slider[currentIndex]).css({opacity : 0}), 1000;
$(slider[nextindex]).css({opacity : 1}), 1000;
currentIndex = nextindex;
}, sliderInterval);
</script> -->
</script>
</body>
</html>이 코드는 겹쳐진 여러 사진을 순서대로 보여주는 코드입니다.
setInterval 함수를 이용하여 처음 사진을 보여주고 시간이 지나면 처음사진을 opacity = "0"; 을 해주어 투명하게 만들어 안보이게 만든뒤, 그 다음 보여질 사진을 opacity = "1"; 처리 해줘서 다음 사진이 보이게 만들어 줍니다.
.slider:nth-child(1) {z-index: 5;}
.slider:nth-child(2) {z-index: 4;}
.slider:nth-child(3) {z-index: 3;}
.slider:nth-child(4) {z-index: 2;}
.slider:nth-child(5) {z-index: 1;}
겹쳐진 이미지들을 순서대로 보여주기 위하여 z-index 값을 줬습니다.
javascript
사진이 여러장 이기 때문에 querySelectorAll 을 사용했고 반복적으로 다음 사진을 보여줘야 하기 때문에
slider[0].style.opacity = "0"; //첫번째 이미지를 안보이게
slider[1].style.opacity = "1"; //두번째 이미지를 보이게slider[0]~slider[4] (총 5장) 에 배열 인덱스 값만 바꿔주면 사진들을 바꿔서 보여 줄 수 있습니다.
배열 인덱스에 쓸 값들을 변수선언해 준 다음,
let nextindex = (currentIndex + 1) % sliderCount;currentIndex 는 현재 보이는 이미지 인덱스값
sliderCount 는 slider.length값(이미지 갯수)
즉 nextindex는 5의 나머지값인 0~4 를 계속 굴려주는 겁니다.
다만 코드를 저렇게만 쓰면 1에서 멈추니
currentIndex = nextindex;currentIndex에 값을 계속 대입해줘서 0~4로 계속 굴러가게 만들어 줍니다.
그렇게 되면 3초마다 사진이 바뀌는 사이트가 완성입니다!
GSAP
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script>
<script>
setInterval(() => {
nextindex = (currentIndex +1) % sliderCount;
gsap.to(slider[currentIndex], {
opacity : "0",
duration : "1",
ease: "power2.inOut"
});
gsap.to(slider[nextindex], {
opacity: "1",
duration: "1",
ease: "power2.inOut"
});
currentIndex = nextindex;
}, sliderInterval);
GSAP 라이브러리를 사용하여 이미지 슬라이드 쇼를 구현하는 코드입니다.
setInterval() 메서드를 사용하여 일정 시간마다 이미지를 전환하도록 설정하였습니다. currentIndex 변수는 현재 보이는 이미지의 인덱스를 나타내며, sliderCount 변수는 이미지의 총 갯수를 나타냅니다. sliderInterval 변수는 이미지 변경 간격 시간을 나타냅니다.
nextindex 변수는 다음 이미지의 인덱스를 계산하는데 사용됩니다. nextindex는 (currentIndex +1) % sliderCount로 계산됩니다. 이를 통해 이미지 갯수를 벗어나는 경우 인덱스를 0으로 초기화합니다.
그리고 gsap.to() 메서드를 사용하여 현재 이미지와 다음 이미지의 투명도(opacity)를 조정합니다. duration 속성을 사용하여 트랜지션의 지속 시간을 설정하며, ease 속성을 사용하여 트랜지션의 이징(easing)을 설정합니다.
마지막으로 currentIndex를 nextindex로 업데이트합니다. 이렇게 함으로써 이미지 슬라이드 쇼를 구현합니다.
<!-- 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(()=>{
nextindex = (currentIndex + 1) % $(".slider").length;
$(slider[currentIndex]).css({opacity : 0}), 1000;
$(slider[nextindex]).css({opacity : 1}), 1000;
currentIndex = nextindex;
}, sliderInterval);
</script>jQuery를 사용하여 구현되었습니다.
이 코드에서 setInterval() 함수는 일정한 시간 간격으로 함수를 실행합니다. 함수 내부에서 currentIndex 변수는 현재 보이는 이미지를 나타냅니다. sliderCount 변수는 이미지의 총 갯수를 나타냅니다. sliderInterval 변수는 이미지 변경 간격 시간을 나타냅니다.
다음으로, nextindex 변수는 다음 이미지를 나타냅니다. % 연산자를 사용하여 이미지를 무한 루프하도록 구현합니다.
그 다음, $(slider[currentIndex]).css({opacity : 0}), 1000 코드는 현재 이미지를 서서히 투명하게 만듭니다. $(slider[nextindex]).css({opacity : 1}), 1000 코드는 다음 이미지를 서서히 불투명하게 만듭니다.
마지막으로, currentIndex를 nextindex로 업데이트합니다. 이렇게 함으로써 이미지 슬라이드 쇼를 구현합니다.