트랜지션 효과
웹 페이지에서 자주 쓰이는 효과입니다 ☺️
reset 부분은 기존에 했던 마우스 효과와 동일합니다. 자, 그럼 두개재~
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.5s;
}
.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()는 해당 슬라이드를 선택하게 합니다.
before는 해당 요소 앞에 가상 요소를 생성하고, 내용을 추가해줍니다.
content 속성을 사용하여 각 슬라이드에 대한 캡션을 지정합니다.
content
CSS 속성 중 하나로 요소의 콘텐츠를 정의하는데 사용 됩니다. 일반적으로 before와 after의 가상 요소에서 사용합니다!
z-index가 의미하는 것은 각 슬라이드에 대한 쌓임 순서입니다. 이 이펙트에서는 이미지를 겹쳐놓는 것이 포인트입니다!
이 값이 높을 수록 슬라이드는 상위에 표시되게 되며 슬라이드가 순서대로 보이도록 조정하는데 사용됩니다.
HTML Main 구조
<main id="main">
<div class="slider__wrap">
<div class="slider__img">
<div class="slider"><img src="./img/sliderEffect01.jpg" alt="이미지1"></div>
<div class="slider"><img src="./img/sliderEffect02.jpg" alt="이미지2"></div>
<div class="slider"><img src="./img/sliderEffect03.jpg" alt="이미지3"></div>
<div class="slider"><img src="./img/sliderEffect04.jpg" alt="이미지4"></div>
<div class="slider"><img src="./img/sliderEffect05.jpg" alt="이미지5"></div>
</div>
</div>
</main>
main 안에 slider__wrap을 생성해주고 슬라이드 이기 때문에 이미지 전체를 묶어줄 slider__img까지 생성했습니다.
Script ⭐️⭐️⭐️
//선택자
const sliderWrap = document.querySelector(".slider__wrap");
const sliderImg = sliderWrap.querySelector(".slider__img");
const slider = sliderWrap.querySelectorAll(".slider");
let currentIndex = 0; //현재 보이는 이미지. 첫번째이기 때문에 0
let sliderCount = slider.length; //이미지 전체 개수. 개수 이기 때문에 length
let sliderInterval = 3000; //이미지 변경 간격 시간, 3000 = 3초
- 선택자
- slider__wrap과 slider__img는 각각 sliderWrap, sliderImg로 변수를 지정해주었습니다.
- slider의 경우 이미지가 총 다섯 개, 즉 다중이기 때문에 querySelectorAll을 사용해 주었습니다.
- 변수
- currentIndex = 0; : 현재 눈에 보이는 이미지로, 이미지를 첫번째부터 사용하기 위해 0을 써줍니다.
- sliderCount = slider.length; : 이미지의 전체 개수를 의미입니다. 갯수이기 때문에 length를 사용합니다.
- sliderinterval = 3000; : 이미지 변경의 간격 시간입니다. 1000은 1초 2000은 2초 ... 입니다.
기본
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"; //첫번째 이미지를 보이게
slider[1].style.opacity = "0";은 slider라는 클래스를 가진 이미지 중 첫번째 이미지의 투명도( opacity )를 0으로 설정해줍니다.
투명도를 0 으로 설정하기 때문에 이 이미지는 화면에서 사라지게 되고 다음 이미지가 화면에 뜨게 됩니다.
다음 슬라이드는 1로 설정해줍니다.
⭐️point
포인트는 마지막입니다. 마지막이 끝나고 다시 1번으로 돌아가야하기 때문에 이미지 첫번째인 0으로 갑니다.
setInterval 사용 코드
setInterval은 자바스크립트에서 제공하는 함수 중 하나로, 일정한 시간 간격마다 반복적으로 코드를 실행하는 데 사용됩다.
setInterval 함수는 첫 번째 인자로 실행할 함수를 받고, 두 번째 인자로 시간 간격을 받습니다. 시간 간격은 밀리초 단위로 설정하며,
인자로 전달된 시간 간격마다 첫 번째 인자로 전달된 함수가 호출됩니다.
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; // 1.커렌트 인덱스 +1 이 넥스트 인덱스에 대입 된다
slider[currentIndex].style.opacity = "0";
slider[nextIndex].style.opacity = "1";
currentIndex = nextIndex // 2. 1에서 대입이 됐기 때문에 넥스트 인덱스 값이 1이라면, 커렌트도 1이된다.
}, sliderInterval);
- currentIndex + 1 % sliderCount
- 이미지의 순서를 하나씩 더해주기 위해 1을 붙이고 sliderCount 이미지 전체 갯수로 나누어 줍니다.
- currentInex = nextIndex
- 위에서 대입이 됐기 때문에 nextindex가 1이 되면 이것을 currentInex에게 대입하게 됩니다.
jQuery
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);
jQuery 객체를 배열 형태로 접근하기 위해선 eq("선택자")의 문법을 사용합니다.
또한 jQuery는 animate()라는 메서드를 통해 요소의 CSS 속성을 애니메이션화하는 데 사용합니다.
여기선 opacity와 뒤의 1000밀리초를 붙여 transition 속성까지 입력하고 있음을 볼 수 있습니다!
다음 포스팅에서는 좌로 움직이는 슬라이드 이펙트로 뵙겠습니당 🥰