[JAVASCRIPT] 슬라이드 이펙트 (Slider Effect) 1 ~ 3 (페이드 인아웃, 좌측 슬라이드, 상방 슬라이드)

무근본 일반인 2023. 4. 10. 19:39

2023. 4. 10. 19:39

728x90

완성 화면 (Effect01)

코드 보기 / CSS

.slider__wrap {
        width: 100%;
        height: 100vh;
        align-items: center;
        justify-content: center;
        display: flex;
       }
       .slider__img {
        position: relative;
        width: 800px;
        height: 450px;
        overflow: hidden;
       }
       .slider {
        position: absolute;
        left: 0;
        top: 0;
        opacity: 0;
        transition: all 0.5s;
       }
       .slider::before {
        position: absolute;
        left: 5px;
        top: 5px;
        background: rgba(0, 0, 0, 0.5);
        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;}

코드 보기 / HTML

<body class="img01 bg01 font01">
    <header id="header">
        <h1>Javascript Slider Effect 01</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>
            <li><a href="sliderEffect06.html">6</a></li>
        </ul>
    </header> 
    <!-- header -->

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

    <footer id="footer">
        <a href="mailto:goed0522@gmail.com">goed0522@gmail.com</a>
    </footer>
    <!-- footer -->

코드 보기 / JAVASCRIPT - 기본

       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 (()=>{
            let nextIndex = (currentIndex+1) % sliderCount;

            slider[currentIndex].style.opacity = "0";      //가장 위에 있는 이미지 숨김
            slider[nextIndex].style.opacity = "1";      //그 다음 이미지를 나타냄

            currentIndex = nextIndex;
            console.log(currentIndex);
        },sliderInterval);

const sliderWrap = document.querySelector(".slider__wrap");

: HTML에서 .slider__wrap 클래스를 가진 요소를 찾아서 sliderWrap 변수에 할당한다.

const sliderImg = sliderWrap.querySelector(".slider__img");

: sliderWrap 내부에서 .slider__img 클래스를 가진 요소를 찾아서 sliderImg 변수에 할당한다.

const slider = sliderWrap.querySelectorAll(".slider");

: sliderWrap 내부에서 .slider 클래스를 가진 모든 요소를 찾아서 slider 변수에 할당한다.

let currentIndex = 0;

: 슬라이드의 초기값으로 가장 처음 이미지를 보이도록 한다.

let sliderCount = slider.length;

: slider 변수에 저장된 모든 슬라이드의 개수를 구해 sliderCount 변수에 할당한다.

let sliderInterval = 3000;

: 슬라이드가 변경되는 간격을 3초로 설정한다.

setInterval (()=> { ... },sliderInterval);

: setInterval 함수를 사용해 일정한 시간 간격으로 함수를 반복 실행한다.

(currentIndex+1) % sliderCount

: currentIndex에 1을 더한 후, sliderCount로 나눈 나머지 값으로 다음 슬라이드의 인덱스 값을 구한다.

이를 통해 마지막 슬라이드가 보여진 후 첫 번째 슬라이드로 돌아갈 수 있다.

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

: 현재 보여지고 있는 슬라이드의 투명도(opacity) 값을 0으로 변경해 화면에서 숨긴다.

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

: 다음 슬라이드의 투명도 값을 1로 변경해 화면에 나타낸다.

currentIndex = nextIndex;

: nextIndex를 currentIndex에 할당해 다음번 슬라이드 변경 시 이전 슬라이드의 인덱스 값을 알 수 있다.

코드 보기 / JAVASCRIPT - GSAP

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script>
    <script>
        gsap.set(".slider:nth-child(n+2)",{opacity:0});

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

                gsap.to(`.slider:nth-child(${currentIndex+1})`,{
                   opacity: 0,
                    duration : 1,
                    ease: "power2.inOut"
                });

                gsap.to(`.slider:nth-child(${nextIndex+1})`,{
                   opacity: 1,
                    duration : 1,
                    ease: "power2.inOut"
                });

                currentIndex = nextIndex;
        },sliderInterval);
    </script>

:GSAP 라이브러리를 불러온다.

gsap.set(".slider:nth-child(n+2)",{opacity:0});

:슬라이드 쇼 이미지 중 첫 번째 이미지를 제외한 나머지 이미지를 숨긴다.

setInterval (()=> { ... },sliderInterval);

: setInterval 함수를 사용해 일정한 시간 간격으로 함수를 반복 실행한다.

gsap.to(`.slider:nth-child(${currentIndex+1})`,{
        opacity: 0 or 1,
        duration : 1,
        ease: "power2.inOut"
    });

: gsap.to( )를 사용하여 현재 이미지와 다음 이미지를 페이드 인/ 아웃 효과와 함께 보여주고 숨긴다.

ease 속성은 애니메이션의 이징 효과를 설정한다.

power2.inOut은 느리게 시작하고 빠르게 가속하는 이징 효과이다.

currentIndex = nextIndex;

: 현재 이미지를 나타내는 currentIndex 변수를 업데이트 한다.

이렇게 구현된 코드는 기존의 setInterval( ) 함수 대신 gsap.to( ) 메서드를 사용하므로 애니메이션이 더 부드럽게 작동한다.

코드 보기 / JAVASCRIPT - 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) % sliderCount;

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

        currentIndex = nextIndex;
    },sliderInterval);
</script>

setInterval 함수를 이용하여 일정 간격으로 이미지를 변경한다.

currentIndex 변수는 현재 보이는 이미지의 인덱스를, sliderCount 변수는 전체 이미지의 개수를 저장한다.

slider 변수는 이미지들을 나타내는 jQuery 객체이다.

jQuery의 animate 함수를 이용하여 이미지의 opacity 속성을 변경하여 이미지가 서서히 사라지거나 나타나도록 한다.

이 때, 500은 애니메이션의 지속 시간을 나타내며, currentIndex 변수를 nextIndex로 변경하여 다음에 보일 이미지를 지정한다.

완성 화면 (Effect02)

코드 보기 / CSS

.slider__wrap {
        width: 100%;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .slider__img {                /*이미지가 나타나는(보이는) 영역*/
        position: relative;
        width: 800px;
        height: 450px;
        overflow: hidden;
      }
      .slider__inner {              /*이미지가 슬라이드 되는(움직이는) 영역*/
        display: flex;
        flex-wrap: wrap;
        width: 4000px;
        height: 450px;
      }
      .slider {
        position: relative;
        width: 800px;
        height: 450px;
      }

코드 보기 / HTML

<div class="slider__wrap">
            <div class="slider__img">
                <div class="slider__inner">
                    <div class="slider"><img src="./img/sliderEffect06-min.jpg" alt="이미지1"></div>
                    <div class="slider"><img src="./img/sliderEffect07-min.jpg" alt="이미지2"></div>
                    <div class="slider"><img src="./img/sliderEffect08-min.jpg" alt="이미지3"></div>
                    <div class="slider"><img src="./img/sliderEffect09-min.jpg" alt="이미지4"></div>
                    <div class="slider"><img src="./img/sliderEffect10-min.jpg" alt="이미지5"></div>
                </div>
            </div>
        </div>

코드 보기 / JAVASCRIPT - 기본

      const sliderWrap = document.querySelector(".slider__wrap");
        const sliderImg = sliderWrap.querySelector(".slider__img");
        const sliderInner = sliderWrap.querySelector(".slider__inner");
        const slider = sliderWrap.querySelectorAll(".slider");

        let currentIndex = 0;                   //현재 보이는 (가장 위에 있는) 이미지
        let sliderCount = slider.length;        //전체 이미지의 총 수
        let sliderInterval = 3000;              //다음 이미지로 넘어가는 간격의 시간

        sliderInner.style.transition = "all 0.8s";
        setInterval(()=>{
            currentIndex = (currentIndex+1) % sliderCount;
        
            sliderInner.style.transform = "translateX("+ -800 * currentIndex + "px)";
        },sliderInterval);

slider__wrap 클래스를 가진 요소 안에 여러 개의 이미지(slider 클래스)가 존재하며, slider__inner 클래스를 가진 요소를 사용해 이미지를 좌우로 이동시키는 방식으로 슬라이더를 구현한다.

currentIndex 변수는 현재 보이는(가장 위에 있는) 이미지의 인덱스를 저장한다.

sliderCount 변수는 전체 이미지의 총 개수를 나타내며, sliderInterval 변수는 다음 이미지로 넘어가는 간격의 시간을 나타낸다.

sliderInner.style.transition 속성은 슬라이드 이동 시 애니메이션 효과를 부드럽게 하기 위해 추가된 코드이다.

setInterval() 함수를 사용하여 일정 시간마다 다음 이미지로 넘어가도록 구현되어 있으며, translateX() 함수를 사용하여 현재 이미지의 위치를 이동시키고, currentIndex 변수를 이용하여 다음 이미지로 인덱스를 변경한다.

코드 보기 / JAVASCRIPT - GSAP

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script>
    <script>
        setInterval(()=>{
            currentIndex = (currentIndex + 1) % sliderCount;

            gsap.to(".slider__inner",{
                x : -800 * currentIndex,
                duration : 1,
                ease: "elastic.out(1, 0.5)"
            })
        },sliderInterval);
    </script>

GSAP의 gsap.to() 메소드를 사용하여 이미지들의 opacity 속성을 변경해 슬라이드 애니메이션을 구현한다.

초기에는 첫 번째 슬라이드만 보이도록 gsap.set() 메소드를 사용하여 나머지 슬라이드들의 opacity 속성을 0으로 설정합니다. 그리고 setInterval() 함수를 사용하여 일정한 시간 간격으로 gsap.to() 메소드를 실행한다.

gsap.to() 메소드는 첫 번째 매개변수로 애니메이션을 적용할 요소를 선택하고, 두 번째 매개변수로 애니메이션을 적용할 속성을 객체 형태로 전달한다.

이 코드에서는 슬라이드의 opacity 속성을 변경하도록 지정했습니다. 세 번째 매개변수로는 애니메이션 실행 시간(duration)을 전달하고, 네 번째 매개변수로는 애니메이션의 이징(ease)을 전달한다.

이 코드에서는 GSAP의 ease 중 하나인 power2.inOut를 사용하여 슬라이드 애니메이션을 부드럽게 만들었다.

이 외에도 여러 가지 이징 중에서 선택할 수 있다.

코드 보기 / JAVASCRIPT - Jquery

<!-- 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(()=>{
            currentIndex = (currentIndex+1) % $(".slider").length;

            $(".slider__inner").css("position", "relative");
            $(".slider__inner").animate({left : -800 * currentIndex},700,"easeOutElastic");

            
        },sliderInterval);
    </script>

setInterval() 함수는 일정한 시간 간격으로 이미지 슬라이더를 동작시키는 함수입니다.

슬라이더의 현재 이미지를 나타내는 변수 currentIndex와 슬라이더 이미지의 총 개수를 나타내는 변수 sliderCount는 이미 이전 코드에서 정의되어 있다.

$(".slider__inner")은 클래스가 slider__inner인 HTML 요소를 선택한다.

이 요소는 전체 이미지가 담겨 있는 부모 요소이다.

.css() 함수는 해당 요소의 CSS 스타일 속성을 설정합니다. 이 코드에서는 .slider__inner 요소의 position 속성을 relative로 설정합니다.

.animate() 함수는 해당 요소를 애니메이션으로 움직이게 한다.

이 코드에서는 .slider__inner 요소의 left 속성을 -800(이미지의 width값) * currentIndex로 설정한다.

이렇게 함으로써, .slider__inner 요소가 좌우로 슬라이딩되며, 보여지는 이미지가 바뀌게 된다.

애니메이션의 지속시간은 700ms로 설정되어 있으며, easeOutElastic 이라는 이징 함수를 사용하여 자연스러운 슬라이딩 효과를 적용하고 있다.

완성 화면 (Effect03)

CSS는 가로와 세로만 차이가 있기 때문에 생략.

(좌측으로 슬라이드 할 때는 width값 800 * 이미지 5장 = 4000이었지만 상측으로 슬라이드 시에는 height값 450 * 이미지 5장 이므로 = 2250이 된다.)

HTML 역시 구조가 완전히 같기 때문에 생략.

코드 보기 / JAVASCRIPT - 기본

const sliderWrap = document.querySelector(".slider__wrap");
        const sliderImg = sliderWrap.querySelector(".slider__img");
        const sliderInner = sliderWrap.querySelector(".slider__inner");
        const slider = sliderWrap.querySelectorAll(".slider");

        let currentIndex = 0;                   //현재 보이는 (가장 위에 있는) 이미지
        let sliderCount = slider.length;        //전체 이미지의 총 수
        let sliderInterval = 3000;              //다음 이미지로 넘어가는 간격의 시간

        sliderInner.style.transition = "all 0.8s";
        setInterval(()=>{
            currentIndex = (currentIndex+1) % sliderCount;
        
            sliderInner.style.transform = "translateY("+ -450 * currentIndex + "px)";
        },sliderInterval);

sliderWrap

: 슬라이더를 감싸는 div 엘리먼트를 참조한다.

sliderInner

: 슬라이더 이미지들을 감싸는 div 엘리먼트를 참조한다.

slider

: 슬라이더 이미지들을 참조한다.

currentIndex

: 현재 보이는 (가장 위에 있는) 이미지의 인덱스를 저장한다.

sliderCount

: 전체 이미지의 총 개수를 저장한다.

sliderInterval

: 다음 이미지로 넘어가는 간격의 시간을 저장한다.

sliderInner.style.transition

: 슬라이더 이동에 대한 CSS transition 속성을 설정한다.

setInterval()

: 일정 시간 간격마다 실행되는 함수입니다. 슬라이더의 이미지를 변경하고 애니메이션을 적용한다.

currentIndex = (currentIndex+1) % sliderCount

: 현재 인덱스에서 1을 더하고, 전체 이미지의 개수로 나누어 나머지를 구함으로써, 이미지 인덱스가 계속해서 순환하도록 한다.

sliderInner.style.transform = "translateY("+ -450 * currentIndex + "px)"

: 현재 이미지 인덱스에 따라 sliderInner의 CSS transform 속성을 변경하여 슬라이더 이미지를 움직인다.

여기서 -450은 이미지가 움직이는 거리이다.

즉, currentIndex가 1 증가할 때마다 이미지가 450px(이미지의 height값)만큼 위로 이동한다.

코드 보기 / JAVASCRIPT - GSAP

 <!--GSAP-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script>
    <script>
        setInterval(()=>{
            currentIndex = (currentIndex + 1) % sliderCount;

            gsap.to(".slider__inner",{
                y : -450 * currentIndex,
                duration : 1,
                ease: "elastic.out(1, 0.5)"
            })
        },sliderInterval);
    </script>

슬라이더 이미지를 세로 방향으로 이동시키기 위해 translateY를 사용하였다.

이 부분을 GSAP에서 제공하는 y 속성으로 변경하여, GSAP의 애니메이션 기능을 이용하여 세로 방향으로 이동하도록 만들었다.

애니메이션 기능을 사용하기 위해서는 먼저 GSAP 라이브러리를 불러와야 하며, 이후 gsap.to() 메소드를 이용하여 원하는 요소를 선택하여 애니메이션을 적용할 수 있다.

duration 속성을 이용하여 애니메이션이 진행되는 시간을 조절할 수 있으며, ease 속성을 이용하여 애니메이션의 가속도와 감속도를 조절할 수 있다.

위 코드에서는 elastic.out(1, 0.5) 값을 ease 속성으로 설정하여, 애니메이션의 마지막 부분에서 탄력적인 효과가 발생하도록 만들었다.

코드 보기 / JAVASCRIPT - Jquery

<!-- 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(()=>{
            currentIndex = (currentIndex+1) % $(".slider").length;

            $(".slider__inner").css("position", "relative");
            $(".slider__inner").animate({top : -450 * currentIndex},700,"easeOutElastic");

        },sliderInterval);

querySelector와 querySelectorAll 함수를 사용하여 HTML 문서에서 각각 .slider__wrap, .slider__img, .slider__inner, .slider 클래스를 가진 요소들을 선택한다.

이들은 모두 슬라이드 컨테이너와 이미지, 이미지가 포함된 내부 컨테이너, 그리고 각 이미지를 나타내는 요소들이다.

그리고 나서 currentIndex를 0으로 초기화하고, sliderCount는 .slider 클래스를 가진 요소들의 수로 설정한다.

sliderInterval은 3000ms로 설정되어 있다.
그 다음 sliderInner의 transition 속성을 "all 0.8s"로 설정하여, 슬라이드 전환시 0.8초 동안 애니메이션이 일어나도록 한다.

마지막으로 setInterval 함수를 사용하여 sliderInterval 간격으로 슬라이드가 전환되도록 한다.

이때 currentIndex를 업데이트하여 다음에 보여질 이미지의 인덱스를 결정하고, sliderInner 요소의 transform 속성을 사용하여 슬라이드를 이동시킨다.

이 코드에서는 translateX 또는 translateY 함수를 사용하여 각각 가로 방향 또는 세로 방향으로 이동시키도록 한다.

Fiat Lux