슬라이드 이펙트03_아래에서 위로 움직이기

이미지를 여러개 배치하여 움직이게 하는 슬라이드 이펙트를 만들어 보도록 합니다.

---

HTML

<header id="header">
    <h1>Javascript slider Effect02</h1>
    <p>슬라이드 이펙트02 : 좌로 움직이기</p>
    <ul>
        <li><a href="sliderEffect01.html">1</a></li>
        <li class="active"><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__inner">
                <div class="slider"><img src="./img/Effect_bg03-min.jpg" alt="이미지 1"></div>
                <div class="slider"><img src="./img/Effect_bg04-min.jpg" alt="이미지 2"></div>
                <div class="slider"><img src="./img/Effect_bg05-min.jpg" alt="이미지 3"></div>
                <div class="slider"><img src="./img/Effect_bg09-min.jpg" alt="이미지 4"></div>
                <div class="slider"><img src="./img/Effect_bg10-min.jpg" alt="이미지 5"></div>
            </div>
        </div>
    </div>
</main>
<!-- //main -->

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

헤더와 풋터는 기존 마우스 이펙트와 동일하게 하며

메인부분을 slider__wrap으로 슬라이드를 감싸고

slider__img로 이미지를 한번에 감쌉니다.

그리고 slide__inner로 감싸 움직이도록합니다.

---

CSS

/* 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__inner {    /* 전체 이미지를 감싸고 있는 부모 : 움직이는영역 */
    /* display: flex;
    flex-wrap: wrap; */
    width: 4000px;
    height: 450px;
}
.slider{    /* 개별적인 이미지 */
    position: relative;
    width: 800px;
    height: 450px;
}

• .slider__wrap: 슬라이더를 감싸는 부모 컨테이너의 스타일을 정의합니다. 너비는 100%이고, 높이는 현재 뷰포트 높이(100vh)로 설정되어 있습니다. display: flex 속성을 통해 자식 요소들을 가로로 정렬하고, align-items: center와 justify-content: center 속성을 통해 가로와 세로 중앙 정렬을 설정합니다.
• .slider__img: 이미지가 보이는 영역의 스타일을 정의합니다. position: relative 속성을 사용하여 상대적인 위치로 설정되어 있고, 너비와 높이가 각각 800px와 450px로 설정되어 있습니다. overflow: hidden 속성을 사용하여 내부 내용이 넘치는 경우 가리고 숨기도록 설정되어 있습니다.
• .slider__inner: 전체 이미지를 감싸고 있는 부모 요소의 스타일을 정의합니다. 너비가 4000px이고, 높이가 450px로 설정되어 있습니다. 이 요소는 .slider 요소들을 감싸고 있으며, 이를 통해 이미지가 움직이는 영역을 구성합니다.
• .slider: 개별 이미지의 스타일을 정의합니다. position: relative 속성을 사용하여 상대적인 위치로 설정되어 있고, 너비와 높이가 각각 800px와 450px로 설정되어 있습니다.

---

SCRIPT

<script>
        const sliderWrap = document.querySelector(".slider__wrap");         
        const sliderImg = sliderWrap.querySelector(".slider__img");           //
        const sliderInner = sliderWrap.querySelector(".slider__inner");
        const slider = sliderWrap.querySelectorAll(".slider");      // slider를 배열로 받으므로 하나하나 선택할경우 배열로 선택 가능하다.

        let currentIndex = 0;               // 현재 보이는 이미지
        let sliderCount = slider.length;    //이미지 갯수
        let sliderInterval = 3000;

    </script>
    <!-- 자바스크립트 -->
    <script>    
        // // sliderInner.style.transform = traslateX("-0px");
        // // sliderInner.style.transform = traslateX("-800px");
        // // sliderInner.style.transform = traslateX("-1600px");
        // // sliderInner.style.transform = traslateX("-2400px");
        // // sliderInner.style.transform = traslateX("-3200px");
        // // sliderInner.style.transform = traslateX("-0px");

        sliderInner.style.transition = "all 0.6s";

        setInterval(() => {
            currentIndex = (currentIndex + 1) % sliderCount;    // 1 2 3 4 0 1 2 3 4 0

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


        }, sliderInterval)
    </script>

• const sliderWrap = document.querySelector(".slider__wrap");: 슬라이더를 감싸는 부모 요소인 .slider__wrap을 JavaScript에서 사용하기 위해 선택합니다.
• const sliderImg = sliderWrap.querySelector(".slider__img");: 슬라이더 이미지가 보여지는 영역을 나타내는 .slider__img 요소를 .slider__wrap 내부에서 선택합니다.
• const sliderInner = sliderWrap.querySelector(".slider__inner");: 슬라이더의 전체 이미지를 감싸는 부모 요소인 .slider__inner 요소를 .slider__wrap 내부에서 선택합니다.
• const slider = sliderWrap.querySelectorAll(".slider");: 개별 이미지를 나타내는 .slider 클래스를 가진 모든 요소들을 .slider__wrap 내부에서 선택하고, NodeList 형태로 slider 변수에 저장합니다.
• let currentIndex = 0;: 현재 보여지는 이미지의 인덱스를 나타내는 변수를 초기화합니다. 기본값은 0으로 설정됩니다.
• let sliderCount = slider.length;: 이미지의 총 개수를 나타내는 변수를 slider NodeList의 길이로 설정합니다.
• let sliderInterval = 3000;: 슬라이더가 자동으로 전환되는 간격을 나타내는 변수를 3000ms(3초)로 설정합니다.
• sliderInner.style.transition = "all 0.6s";: 슬라이더 이미지 전환 시에 사용될 CSS transition 속성을 설정하여 이미지 전환이 부드럽게 일어나도록 합니다. transition 속성은 0.6초 동안 모든 속성에 적용됩니다.
• setInterval(() => {...}, sliderInterval): setInterval 함수를 사용하여 일정 시간 간격으로 슬라이더 이미지를 자동으로 전환하는 코드를 작성합니다. 인터벌은 sliderInterval 변수에 저장된 값인 3초(3000ms) 간격으로 실행됩니다.
• currentIndex = (currentIndex + 1) % sliderCount;: 현재 이미지의 인덱스를 1씩 증가시키고, 이미지의 총 개수인 sliderCount로 나누어 나머지를 구합니다. 이를 통해 인덱스가 0부터 시작하여 마지막 이미지를 보여준 후에는 다시 0으로 돌아가도록 설정합니다.
• sliderInner.style.transform = "translateY("+ -450 * currentIndex + "px)";: 슬라이더 이미지의 위치를 변경하여 다음 이미지를 보여주는 코드입니다. currentIndex 변수에 현재 이미지의 인덱스가 저장되어 있으며, translateY() 함수를 사용하여 이미지를 세로 방향으로 이동시킵니다. -450 * currentIndex를 통해 현재 이미지의 인덱스에 따라 이미지가 이동하는 거리를 계산하고, px 단위를 추가하여 슬라이더의 위치를 변경합니다.
• }, sliderInterval): 이전에 설정한 sliderInterval 변수에 저장된 값인 3초(3000ms) 간격으로 코드 블록이 실행됩니다. 이를 통해 일정한 간격으로 슬라이더 이미지가 자동으로 전환됩니다.

---

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",{    //sliderInner 그냥 사용해도 가능
            y : -450 * currentIndex,
            duration : 1,
            ease : "elastic.out(1, 0.5)"
        })  
    },sliderInterval)
</script>

• GSAP 라이브러리를 로드하기 위한 스크립트 태그: https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js 경로에서 GSAP 라이브러리를 로드합니다.
• setInterval(() => {...}, sliderInterval): 이전에 설정한 sliderInterval 변수에 저장된 값인 3초(3000ms) 간격으로 코드 블록이 실행됩니다. 이를 통해 일정한 간격으로 슬라이더 이미지가 자동으로 전환됩니다.
• currentIndex = (currentIndex + 1) % sliderCount;: 현재 이미지의 인덱스를 관리하는 currentIndex 변수를 1씩 증가시킵니다. 이때, sliderCount 변수를 나누어 나머지를 구함으로써 인덱스를 0부터 다시 시작하도록 처리합니다. 이를 통해 이미지 전환이 무한히 반복되도록 설정됩니다.
• gsap.to(".slider__inner", {...}): GSAP의 to() 메서드를 사용하여 .slider__inner 요소에 애니메이션 효과를 적용합니다. y 속성을 이용하여 세로 방향으로 -450 * currentIndex만큼의 이동 거리를 지정하고, duration 속성을 통해 애니메이션의 지속 시간을 1초로 설정합니다. ease 속성을 통해 애니메이션의 이징 효과를 설정하며, "elastic.out(1, 0.5)" 값은 탄성 있는 효과를 주는 이징 함수를 지정한 것입니다.

---

jQrery

<!-- jQrery -->
<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},600,"easeOutElastic");
    },sliderInterval);
</script>

• jQuery와 jQuery UI 라이브러리를 로드하기 위한 스크립트 태그: https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js와 https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js 경로에서 각각 jQuery와 jQuery UI 라이브러리를 로드합니다.
• setInterval(() => {...}, sliderInterval): 이전에 설정한 sliderInterval 변수에 저장된 값인 3초(3000ms) 간격으로 코드 블록이 실행됩니다. 이를 통해 일정한 간격으로 슬라이더 이미지가 자동으로 전환됩니다.
• currentIndex = (currentIndex + 1) % $(".slider").length;: 현재 이미지의 인덱스를 관리하는 currentIndex 변수를 1씩 증가시킵니다. 이때, $(".slider").length를 사용하여 슬라이더 이미지의 개수를 구하고, 이를 나머지 연산자를 이용하여 인덱스를 0부터 다시 시작하도록 처리합니다. 이를 통해 이미지 전환이 무한히 반복되도록 설정됩니다.
• $(".slider__inner").css("position","relative");: .slider__inner 요소의 CSS 속성 중 position을 "relative"로 설정합니다. 이를 통해 애니메이션의 기준점을 설정합니다.
• $(".slider__inner").animate({top : -450 * currentIndex}, 600, "easeOutElastic");: jQuery의 animate() 메서드를 사용하여 .slider__inner 요소에 애니메이션 효과를 적용합니다. top 속성을 이용하여 세로 방향으로 -450 * currentIndex만큼의 이동 거리를 지정하고, duration 속성을 통해 애니메이션의 지속 시간을 600ms(0.6초)로 설정합니다. easing 속성을 통해 애니메이션의 이징 효과를 설정하며, "easeOutElastic" 값은 탄성 있는 효과를 주는 이징 함수를 지정한 것입니다.

---