슬라이드 이펙트
HTML
<body class="img01 bg01 Eulyoo">
<header id="header">
<h1>Javascript Slider Effect02</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/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>
</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 {
position: absolute;
left: 0;
top: 0;
transition: all 0.3s;
}
.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>
JAVASCRIPT
<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 = nextIndext;
}, 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>자바스크립트 설명
이 코드는 자바스크립트를 사용하여 이미지 슬라이더의 동작을 구현하는 코드입니다.
우선, 코드의 첫 부분에서는 슬라이더 요소들을 DOM으로부터 가져오고, 현재 보이는 이미지의 인덱스, 전체 이미지 갯수, 이미지 간격 시간을 변수로 설정합니다.
이어서 setInterval 함수를 사용하여 일정 시간마다 이미지를 전환하는 함수를 호출합니다. 이 함수에서는 다음 이미지의 인덱스를 계산한 후, 현재 보이는 이미지와 다음 이미지의 투명도를 조절하여 전환 효과를 구현합니다.
이때, 다음 이미지의 인덱스를 계산할 때는 현재 보이는 이미지의 인덱스에 1을 더하고, 전체 이미지 갯수로 나눈 나머지를 구합니다. 이렇게 하면 이미지 갯수를 벗어나는 인덱스 값이 계산되는 것을 방지할 수 있습니다.
마지막으로, 현재 보이는 이미지의 인덱스를 다음 이미지의 인덱스로 업데이트합니다. 이렇게 하면 다음 이미지가 다시 전환될 때, 다시 위의 과정이 반복됩니다.
GSAP
<script>
setInterval(()=>{
let nextIndex = (currentIndex +1) % sliderCount;
gsap.to(slider[currentIndex], { opacity: 0 })
gsap.to(slider[nextIndex], { opacity: 1 });
currentIndex = nextIndex;
},sliderInterval)
</script>GSAP 설명
이 코드는 GSAP (GreenSock Animation Platform) 라이브러리를 사용하여 자동 슬라이더 기능을 구현하는 JavaScript 코드입니다.
이 코드는 "setInterval" 함수를 사용하여 지정된 간격 (sliderInterval)마다 슬라이더의 이미지를 변경합니다. 슬라이더의 이미지는 "opacity" 속성을 사용하여 현재 이미지를 페이드 아웃하고 다음 이미지를 페이드 인합니다.
이 코드에서 "currentIndex" 변수는 현재 표시되는 슬라이더 이미지의 인덱스를 나타내며, "nextIndex" 변수는 다음 표시될 슬라이더 이미지의 인덱스를 계산합니다. "sliderCount" 변수는 슬라이더 이미지의 총 개수를 저장합니다.
그러므로, 코드가 실행될 때마다 "nextIndex" 값을 계산하고, "currentIndex" 변수를 갱신하여 다음 슬라이더 이미지를 표시합니다. 이를 반복함으로써 자동 슬라이더를 구현합니다.
jQuery
<script>
setInterval(()=>{
let nextIndex = (currentIndex +1) % sliderCount;
$(".slider").eq(currentIndex).animate({ opacity: 0 },);
$(".slider").eq(nextIndex).animate({ opacity: 1 },);
currentIndex = nextIndex;
},sliderInterval)
</script>jQuery 설명
이 코드는 제이쿼리(jQuery)를 사용하여 자동 슬라이더 기능을 구현하는 JavaScript 코드입니다.
"setInterval" 함수를 사용하여 지정된 간격 (sliderInterval)마다 슬라이더의 이미지를 변경합니다. 슬라이더의 이미지는 "animate" 함수를 사용하여 현재 이미지를 페이드 아웃하고 다음 이미지를 페이드 인합니다.
"currentIndex" 변수는 현재 표시되는 슬라이더 이미지의 인덱스를 나타내며, "nextIndex" 변수는 다음 표시될 슬라이더 이미지의 인덱스를 계산합니다. "sliderCount" 변수는 슬라이더 이미지의 총 개수를 저장합니다.
이 코드에서 "$('.slider')"는 HTML에서 클래스 이름이 "slider"인 요소를 선택하는 제이쿼리 코드입니다. ".eq()"는 인덱스로 요소를 선택하는 제이쿼리 메서드이며, "animate" 함수를 사용하여 슬라이더 이미지를 페이드 인/아웃합니다.
그러므로, 코드가 실행될 때마다 "nextIndex" 값을 계산하고, "currentIndex" 변수를 갱신하여 다음 슬라이더 이미지를 표시합니다. 이를 반복함으로써 자동 슬라이더를 구현합니다.