JS로 슬라이드 이펙트 적용해보기! - 1. 트랜지션

트랜지션 효과

웹 페이지에서 자주 쓰이는 효과입니다 ☺️

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 속성까지 입력하고 있음을 볼 수 있습니다!

---

다음 포스팅에서는 좌로 움직이는 슬라이드 이펙트로 뵙겠습니당 🥰