슬라이드 이펙트05_아래에서 위로 움직이기(연속으로)

이미지를 여러개 배치하여 움직이게 하며 연속으로 아래에서 로 지나가는 슬라이드 이펙트를 만들어 보도록 합니다.

어제 올린 1,2,3번도 마찬가지지만 gsap과 jqurey를 활용하여 세가지 방법을 사용하였습니다. 

모두 올리니 차이점을 확인해 보시길 바랍니다

---

HTML

<header id="header">
    <h1>Javascript slider Effect05</h1>
    <p>슬라이드 이펙트05 : 아래에서 위로로 움직이기(연속적으로)</p>
    <ul>
        <li><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 class="active"><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 s1"><img src="./img/Effect_bg04-min.jpg" alt="이미지 1"></div>
                <div class="slider s2"><img src="./img/Effect_bg03-min.jpg" alt="이미지 2"></div>
                <div class="slider s3"><img src="./img/Effect_bg05-min.jpg" alt="이미지 3"></div>
                <div class="slider s4"><img src="./img/Effect_bg09-min.jpg" alt="이미지 4"></div>
                <div class="slider s5"><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>

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

메인부분을 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: 4800px;
    height: 450px;
}
.slider{    /* 개별적인 이미지 */
    position: relative;
    width: 800px;
    height: 450px;
}

• .slider__wrap: 슬라이더를 감싸는 부모 컨테이너의 스타일을 정의합니다. 너비는 100%이고, 높이는 현재 뷰포트의 높이(100vh)로 설정되어 있습니다. 내부 요소들을 수직 및 수평 가운데 정렬하기 위해 display: flex와 align-items, justify-content 속성이 사용되었습니다.
• .slider__img: 슬라이더의 이미지가 보이는 영역의 스타일을 정의합니다. 위치 속성이 상대적으로(relative)로 설정되어 있고, 너비와 높이가 각각 800px와 450px로 설정되어 있습니다. 이미지가 넘칠 경우를 대비하여 overflow: hidden이 적용되어 있습니다.
• .slider__inner: 슬라이더의 전체 이미지를 감싸는 부모 컨테이너의 스타일을 정의합니다. 너비는 4800px이고, 높이는 450px로 설정되어 있습니다. 슬라이더의 이미지가 가로로 배열되어 움직이는 효과를 내기 위해 너비를 크게 설정한 것으로 보입니다.
• .slider: 개별적인 이미지의 스타일을 정의합니다. 위치 속성이 상대적으로(relative)로 설정되어 있고, 너비와 높이가 각각 800px와 450px로 설정되어 있습니다. 이 부분이 실제로 슬라이더의 각 이미지들을 구성하는 부분일 것으로 예상됩니다.

---

JAVASCRIPT

<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 sliderHeight = slider[0].offsetHeight;                                //이미지 세로값
    let sliderClone = sliderInner.firstElementChild.cloneNode(true);        //첫번째 이미지 복사
    let sliderInterval = 2000;

</script>

<!-- 자바스크립트 -->
<script>

    //복사한 첫번째 이미지 마지막에 붙여넣기
    sliderInner.appendChild(sliderClone);

    function sliderEffect(){
        currentIndex++;

        sliderInner.style.transition = "all 0.6s"
        sliderInner.style.transform = "translateY(-"+ sliderHeight * currentIndex +"px)";

        //마지막 이미지에 위치 했을 때
        if(currentIndex == sliderCount){
            setTimeout(() =>{
                sliderInner.style.transition = "0s"
                sliderInner.style.transform = "translateY(0px)";
            },700)
            currentIndex = 0;
        }
    }
    setInterval(sliderEffect, sliderInterval)

</script>

• 변수 및 상수 정의:
  
  • sliderWrap: 클래스 이름이 .slider__wrap인 요소를 선택하는 변수
  • sliderImg: sliderWrap 요소 내에서 클래스 이름이 .slider__img인 요소를 선택하는 변수
  • sliderInner: sliderWrap 요소 내에서 클래스 이름이 .slider__inner인 요소를 선택하는 변수
  • slider: sliderWrap 요소 내에서 클래스 이름이 .slider인 모든 요소들을 선택하여 NodeList로 받는 변수
  • currentIndex: 현재 보이는 이미지의 인덱스를 저장하는 변수
  • sliderCount: 슬라이더의 이미지 갯수를 저장하는 변수
  • sliderHeight: 슬라이더의 이미지의 세로값을 저장하는 변수
  • sliderClone: 첫번째 이미지를 복사하여 저장하는 변수
  • sliderInterval: 슬라이더의 자동 슬라이딩 간격을 설정하는 변수
• 첫번째 이미지 복사:
  
  • sliderInner 요소의 첫번째 자식 요소를 복사하여 sliderClone 변수에 저장합니다. 이는 슬라이더의 처음과 끝을 연결하기 위한 복사된 이미지를 생성하는 것입니다.
• 슬라이더 동작 구현:
  • sliderEffect() 함수가 슬라이더의 동작을 구현합니다.
  • currentIndex를 증가시켜 다음 이미지로 이동합니다.
  • sliderInner 요소에 CSS transition 속성을 적용하여 슬라이딩 효과를 부여하고, currentIndex를 이용하여 해당 이미지의 위치를 계산하여 sliderInner의 transform 속성을 변경하여 이미지를 위 또는 아래로 이동시킵니다.
  • 만약 currentIndex가 sliderCount(이미지 갯수)와 동일하다면, 마지막 이미지에 도달한 것이므로, setTimeout() 함수를 사용하여 슬라이더의 위치를 초기화합니다.
  • sliderInterval에 설정된 간격(ms)마다 sliderEffect() 함수가 호출되어 자동으로 슬라이더가 이동하도록 setInterval() 함수가 사용됩니다.

---

GSAP

<!-- GSAP -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script>
<script>
    sliderInner.appendChild(sliderClone);

    function sliderEffect(){
        currentIndex++;

        gsap.to(sliderInner, {
            duration: 0.6,
            y: -sliderHeight * currentIndex,
            ease: "elastic.out(1.5, 0.9)"
        });

        if(currentIndex === sliderCount){
            setTimeout(() =>{
                gsap.set(sliderInner, {y: 0});
                currentIndex = 0;
            },700);
        }
    }

    setInterval(sliderEffect, sliderInterval);
</script>

• sliderInner 변수는 .slider__inner 클래스를 가진 HTML 요소를 선택하여 저장합니다. 이는 이미지 슬라이더의 내부 컨테이너를 나타냅니다.
• sliderClone 변수는 sliderInner의 첫 번째 자식 요소를 복사하여 생성한 노드를 저장합니다. 이는 첫 번째 이미지를 슬라이더의 마지막에 복사하여 무한 루프를 구현하기 위한 것입니다.
• sliderEffect() 함수는 이미지 슬라이더의 슬라이딩 효과를 구현하는 함수입니다. currentIndex 변수를 증가시켜 다음 이미지로 이동하고, GSAP의 to() 메서드를 사용하여 sliderInner 요소의 y (translateY) 값을 변경하여 슬라이딩 효과를 구현합니다. duration 속성은 애니메이션의 지속 시간을, y 속성은 슬라이딩할 거리를, ease 속성은 애니메이션의 가속도를 설정합니다.
• currentIndex가 sliderCount와 같아지면, 마지막 이미지에 도달한 것이므로 setTimeout() 함수를 사용하여 0.7초 후에 sliderInner의 스타일을 초기화하여 처음으로 되돌립니다.
• setInterval() 함수를 사용하여 sliderEffect() 함수를 일정 시간 간격으로 반복 실행하여 자동으로 이미지 슬라이더가 동작하도록 합니다. sliderInterval 변수에 설정된 시간 간격에 따라 이미지가 자동으로 슬라이딩됩니다.

---

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>
    // 첫번째 이미지를 마지막에 복사하여 붙여넣기

    $(".slider__inner").append(sliderClone);

    function sliderEffect() {
        currentIndex++;

        $(".slider__inner").css({
            "transition": "all 0.6s",
            "transform": "translateY(-" + sliderHeight * currentIndex + "px)"
        });

        // 마지막 이미지에 위치 했을 때
        if (currentIndex === sliderCount) {
            setTimeout(function() {
                $(".slider__inner").css({
                    "transition": "0s",
                    "transform": "translateY(0px)"
                });
            }, 700);
            currentIndex = 0;
        }
    }
    setInterval(sliderEffect, sliderInterval);
</script>

• .slider__inner 클래스를 가진 HTML 요소에 sliderClone을 추가하는 코드입니다. 이는 이미지 슬라이더의 내부 컨테이너에 첫 번째 이미지를 마지막에 복사하여 무한 루프를 구현하기 위한 것입니다. jQuery의 append() 메서드를 사용하여 해당 요소에 자식 요소를 추가합니다.
• sliderEffect() 함수는 이미지 슬라이더의 슬라이딩 효과를 구현하는 함수입니다. currentIndex 변수를 증가시켜 다음 이미지로 이동하고, jQuery의 css() 메서드를 사용하여 slider__inner 요소의 transition과 transform 스타일을 변경하여 슬라이딩 효과를 구현합니다. transition 속성은 애니메이션의 지속 시간을, transform 속성은 슬라이딩할 거리를 설정합니다.
• currentIndex가 sliderCount와 같아지면, 마지막 이미지에 도달한 것이므로 setTimeout() 함수를 사용하여 0.7초 후에 slider__inner의 스타일을 초기화하여 처음으로 되돌립니다. jQuery의 css() 메서드를 사용하여 transition 속성을 "0s"로, transform 속성을 "translateY(0px)"로 변경하여 슬라이더를 처음으로 되돌립니다.
• setInterval() 함수를 사용하여 sliderEffect() 함수를 일정 시간 간격으로 반복 실행하여 자동으로 이미지 슬라이더가 동작하도록 합니다. sliderInterval 변수에 설정된 시간 간격에 따라 이미지가 자동으로 슬라이딩됩니다.

---