Slider Effect 01 - 슬라이드 효과에 대해 알아보자

기본적인 슬라이드 트랜지션 효과에 대해서 알아보겠습니다.

body 의 main

<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 은 보이는 것처럼 간단합니다.

슬라이드에 들어갈 이미지를 slider__wrap 과 slider__img 라는 div 박스에 넣어서 묶었습니다.

style

<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-color: 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>

이미지를 가운데로 옮겨주고, 크기를 800 * 450 으로 정했습니다.

이미지가 바뀔 때 0.3 초가 걸리도록 했습니다. 

::before 가상 요소를 설정해서 이미지마다 '이미지+번호'를 적었습니다.

script - javascript

//선택자
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; //이미지 갯수
let sliderInterval = 3000; //이미지 변경되는 간격 시간

setInterval(() => {
    let nextIndex = (currentIndex + 1) % sliderCount;

        slider[currentIndex].style.opacity = "0";
        slider[nextIndex].style.opacity = "1";

        currentIndex = nextIndex;

}, sliderInterval);

setInterval() 은 Window 및 Worker 인터페이스에서 제공되는 setInterval() 메서드는 각 호출 사이에 고정된 시간 지연으로 함수를 반복적으로 호출하거나 코드 스니펫을 실행합니다.
이 메서드는 간격(interval)을 고유하게 식별할 수 있는 interval ID를 반환하므로 나중에 clearInterval() (en-US) 함수를 호출하여 제거할 수 있습니다.

웹페이지의 특정 부분을 주기적으로 업데이트해줘야 하거나, 어떤 API로 부터 변경된 데이터를 주기적으로 받아와야 하는 경우에 자바스크립트의 setInterval() 함수를 사용할 수 있습니다.
setInterval() 함수는 어떤 코드를 일정한 시간 간격을 두고 반복해서 실행하고 싶을 때 사용합니다. 

 

처음 사진에서 다음 사진으로 넘어가게 하기 위해서 nextIndex 라는 변수를 만들었습니다.

마지막 사진에서 다시 첫 번째 사진으로 순서가 넘어가게 만들어야 하기 때문에 현재 사진을 뜻하는 currentIndex 에 1을 더한 후, 그 수를 전체 갯수로 나눴습니다. 

 

opacity를 사용하면 투명도를 조절할 수 있습니다. 0과 1사이의 값으로 조절하면 됩니다.

0은 요소가 완전히 투명해져서 보이지 않게 되고, 0과 1 사이의 숫자는 요소가 반투명해져서 뒤의 내용을 볼 수가 있게 됩니다.
1은 기본값으로 요소가 불투명하게 보입니다.

 

현재 사진에 다음 사진을 대입하는 식으로 마무리하면 됩니다.

 

이 식을 GSAP 와 jQuery 로 쓸 수 있습니다.

script - GSAP

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></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;

gsap.to(slider[currentIndex], {opacity: 1});

setInterval(() => {
let nextIndex = (currentIndex + 1) % sliderCount;

gsap.to(slider[currentIndex], {opacity: 0, duration: 0.5});
gsap.to(slider[nextIndex], {opacity: 1, duration: 0.5});

currentIndex = nextIndex;
console.log(currentIndex);

}, sliderInterval);

자바스크립트 라이브러리란 쉽게 말해, 자주 사용되지만 일일히 구현하기엔 까다롭거나 불편한 자바스크립트의 코드의 특정 기능을 기성품으로 만들어 묶어놓은 패키지 같은 것을 말합니다.

예를 들자면 가구를 만들때 경첩이나 슬라이드 같은 하드웨어는 만들어진 것을 사서 조립하는 것과 비슷한 개념입니다.
가장 유명한 자바스크립트 라이브러리로는 지금은 사양세에 접어든 제이쿼리(jQuery)가 있습니다.

 

The GreenSock Animation Platform 은 프론트엔드 개발자와 디자이너들이 쉽게 사용할 수 있는 타임라인 기반의 애니메이션 자바스크립트 라이브러리입니다.

CSS와 바닐라 자바스크립트만으로도 동적인 화면을 만들 수 있지만 GSAP은 세밀한 움직임과 동작의 연속성을 훨씬 간편하게 설정할 수 있습니다.
스크롤링 기반 애니메이션이나 요소들이 하나씩 연달아 움직이는 모든 세세한 동작들을 속도, 가속, 감속, 움직이는 경로까지 설정할 수 있기 때문에 GSAP은 많은 프론트엔드 개발자들에게 각광받는 라이브러리라고 할 수 있습니다.

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>

const sliderWrap = $(".slider__wrap");
const sliderImg = sliderWrap.find(".slider__img");
const slider = sliderWrap.find(".slider");

let currentIndex = 0;
let sliderCount = slider.length;
let sliderInterval = 3000;

setInterval(() => {
let nextIndex = (currentIndex + 1) % sliderCount;

$(slider[currentIndex]).animate({opacity: 0}, 500);
$(slider[nextIndex]).animate({opacity: 1}, 500);

currentIndex = nextIndex;
console.log(currentIndex);

}, sliderInterval);

제이쿼리는 웹사이트에 자바스크립트를 쉽게 활용할 수 있도록 도와주는 오픈소스 기반의 자바스크립트 라이브러리입니다. “write less, do more(적게 작성하고, 많은 것을 하자)”라는 모토로 2006년 미국의 SW 개발자 존 레식(John Resig)이 발표하였습니다.

 

제이쿼리는 다음과 같은 특장점을 가지고 있습니다.

• 웹페이지 상에서 엘리먼트(Element)를 쉽게 찾고 조작할 수 있습니다.  
• 거의 모든 웹브라우저에 대응할 정도로 호환성이 매우 뛰어납니다. 
• 네트워크, 애니메이션 등 다양한 기능을 제공합니다. 
• 메소드 체이닝(Method chaining) 등 짧고 유지관리가 용이한 코드 작성을 지원합니다.  
• 관련 플러그인들이 웹상에 공개되어 있으며 플러그인을 직접 구현하거나 확장할 수 있습니다.

공식 웹사이트(www.jquery.com)와 수많은 레퍼런스를 통해 쉽게 접근 가능합니다.