“ 지연되는 프로젝트에 인력을 더 투입하면 오히려 더 늦어진다. ”
- Frederick Philips Brooks
Mythical Man-Month 저자
안녕하세요 ヾ(≧▽≦*)o 오늘은 배경 이미지 위에 이미지를 여러장 덧대어 그 이미지가 좌우로 움직일 수 있도록 효과를 한 번 주도록 하겠습니다.
💛 완성작입니다.
자바스크립트, GSAP, jQurey 세 가지를 이용해 같은 효과를 주도록 하겠습니다.
CSS 스타일
<!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>
/* slide__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>🍔 .slider:nth-child(1) :: before {content: '이미지1'} , .slider:nth-child(1) {z-index: 5;} ?
이 코드는 CSS 선택자를 사용하여 슬라이더 이미지 위에 이미지의 번호를 표시하고, 슬라이더 이미지의 z-index 값을 조정하는 것입니다.
.slider:nth-child(n)::before 선택자는 nth-child() 함수를 사용하여 클래스 이름이 "slider"인 요소 중에서 n번째 요소의 before 가상 요소를 선택합니다. 이를 이용하여 슬라이더 이미지 위에 "이미지1", "이미지2" 등의 텍스트를 출력할 수 있습니다.
.slider:nth-child(n) 선택자는 nth-child() 함수를 사용하여 클래스 이름이 "slider"인 요소 중에서 n번째 요소를 선택합니다. 이를 이용하여 슬라이더 이미지의 z-index 값을 설정할 수 있습니다. 위의 코드에서는 첫 번째 요소의 z-index 값을 5로, 두 번째 요소의 z-index 값을 4로, ... 다섯 번째 요소의 z-index 값을 1로 설정하였습니다.
따라서, 이 코드는 CSS 선택자를 사용하여 슬라이더 이미지 위에 이미지 번호를 표시하고, 슬라이더 이미지의 z-index 값을 조정하여 이미지들이 겹치는 순서를 조절하는 것입니다.
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 currentIndex
//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(currentIndex);
}, 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>우선 선택자를 지정해 줍니다. 그 다음 변수를 선언해 줍니다. 초기값으로 지정해 줘야하기 때문에 현재 보이는 이미지는 0, 전체 이미지 갯수는 slider.length로 지정해 줍니다. 3초간 이미지가 움직여야하므로 3000으로 지정해 줍니다.
다음은 간격을 지정해줘야 합니다.
현재 인덱스는 0 1 2 3 4 0 1 2 3 4 0 으로 4다음엔 맨 초기값의 이미지가 돌아와야 하므로 0으로 설정해 줍니다.
다음 인덱스는 1 2 3 4 0 1 2 3 4 0 1 로 지정해 줍니다.
변수에 선언한 nextIndex에 currentIndex에 +1을 해주고 전체 이미지 갯수와 나눈 값을 지정해 줍니다.
slider[currentIndex].style.opacity = "0";는 현재 이미지의 투명도를 0으로 설정하여 화면에서 사라지게 합니다.
opacity 속성은 0부터 1까지의 값을 가지며, 0은 투명한 상태, 1은 불투명한 상태를 나타냅니다.
// 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>
// 선택자
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; //이미지 변경 간격
</script>
<!-- javascript -->
<!-- <script>
setInterval(() => {
let nextIndex = (currentIndex + 1) % sliderCount;
//전체 개수로 나누고 남은 나머지를 활용해 4(이미지 개수)를 못 넘게 함
slider[currentIndex].style.opacity = "0"
slider[nextIndex].style.opacity = "1";
currentIndex = nextIndex;
//currentIndex가 nextIndex의 값을 할당받음으로써 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(()=>{
let nextIndex = (currentIndex + 1) % $(".slider").length;
$(".slider").eq(currentIndex).animate({opacity:"0"}, 1000);
$(".slider").eq(nextIndex).animate({opacity:"1"}, 1000);
//jQuery의 메서드를 쓰기 위해서는 jQuery 객체를 반환하는 $("선택자").eq(숫자) 문법을 써야 한다.
currentIndex = nextIndex;
}, sliderInterval);
</script> -->
<!-- GSAP -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script>
<script>
setInterval(() => {
let nextIndex = (currentIndex + 1) % sliderCount;
gsap.to(slider[currentIndex], {opacity: 0, duration: 1});
gsap.to(slider[nextIndex], {opacity: 1, duration : 1});
currentIndex = nextIndex;
}, sliderInterval);
</script>
코드보기
https://github.com/leeyouna21/web2023/blob/master/javascript/slide/slideEffect01.html
GitHub - leeyouna21/web2023: 수업시간에 배운 사이트입니다.
수업시간에 배운 사이트입니다. Contribute to leeyouna21/web2023 development by creating an account on GitHub.
github.com
🥰 오늘도 감사합니다.
'javascript' 카테고리의 다른 글
| 슬라이드이펙트 다섯 번째 (12) | 2023.04.12 |
|---|---|
| 슬라이드이펙트 네 번째 (17) | 2023.04.11 |
| 슬라이드이펙트 두 번째 (14) | 2023.04.10 |
| 슬라이드이펙트 세 번째 (14) | 2023.04.10 |
| 자바스크립트 퀴즈 사이트 만들기 7-3 (13) | 2023.04.05 |