슬라이드이펙트 네 번째

안녕하세요 ヾ(≧▽≦*)o 오늘은 배경 이미지 위에 이미지를 여러장 덧대어 그 이미지가 좌우로 움직일 수 있도록 효과를 한 번 주도록 하겠습니다.

 

💛 완성작입니다.

 

 

이미지가 부드럽게 좌우로 움직이게 해주도록 하겠습니다.

 

자바스크립트, GSAP, jQurey 세 가지를 이용해 같은 효과를 주도록 하겠습니다.

 

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__inner { /*이미지 움직이는 영역 */
            height: 450px;
            width: 4800px;  /*총 이미지가 4800*/
            display: flex;
            flex-wrap: wrap;
        }
        .slider {  /*개별적인 이미지*/
            position: relative;
            width: 800px;
            height: 450px;
        }
    </style>

 총 이미지의 크기가 4800이기 때문에 이미지가 움직이는 영역에  width값을 4800로 지정해 줍니다.

또한 움직이는 개별적인 이미지의 크기는 800이기 때문에 800으로 설정해 줍니다.

 

HTML

<main id="main">
        <div class="slider__wrap">
            <div class="slider__img">
                <div class="slider__inner">
                    <div class="slider s1"><img src="../slide/img/slideEffect06.jpg" alt="이미지1"></div>
                    <div class="slider s2"><img src="../slide/img/slideEffect07-1.jpg" alt="이미지1"></div>
                    <div class="slider s3"><img src="../slide/img/slideEffect08-1.jpg" alt="이미지1"></div>
                    <div class="slider s4"><img src="../slide/img/slideEffect09-1.jpg" alt="이미지1"></div>
                    <div class="slider s5"><img src="../slide/img/slideEffect10-1.jpg" alt="이미지1"></div>
                </div>
            </div>
        </div>
    </main>
    <!--main-->

순서대로 변화할 이미지 5개를 지정해 줍니다. 그 다음 s1이었다가 s5이 다시 되고 그 다음 또 다시 s1이 되기 위함을 확인하기 위해 class slider s1이라는 이름을 지정해 줍니다.

 

변수설정

    <script>
        // 선택자 
        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 sliderWidth = slider[0].offsetWidth;    //이미지 가로 값
        let sliderClone = sliderInner.firstElementChild.cloneNode(true); //첫 번째 이미지 복사 cloneNode(true)를 하먄 1번이 맨 뒤로 들어감

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

선택자에 이미지가 보여지는 영역과 움직이는 영역을 설정해준 뒤 개별이미지도 하나씩 옮겨져야 하기 때문에 선택자로 지정해 줍니다.

 

현재 보이는 이미지의 갯수는 초기값인 0으로 설정해 준 다음 전체 이미지의 갯수는 슬라이더의 갯수만큼 지정해 줍니다.

다음은 이미지 가로값 입니다. 🐣 (이미지의 가로값을 구하는 속성은 맨 밑에 나와있습니다.)

이미지의 가로값을 선택할 때 배열로 나온 이유는 위 선택자에 지정해준

const slider= sliderWrap.querySelectorAll(."slider");에서  querySelectorAll 때문입니다.

 

다음으로 첫 번째 이미지가 복사 돼 다시 처음으로 돌아오기 위해 

firstElementChild.cloneNode(true); 작업을 해주면 돌아가게 됩니다.

 

마지막으로 복사한 첫번째 이미지를 마지막에 붙여주기 위해 sliderInner.appendChild(sliderClone); 작업을 해줍니다.

 

JAVASCRIPT

<script>
        let sliderInterval = 3000;
        
        function sliderEffect(){
            currentIndex++;

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

시간 간격을 3초로 설정해 줍니다.

 

함수를 이용해 현재 인덱스를 다음으로 넘어가게 해주기 위해 ++ 작업을 해줍니다.

 

이 코드에서는 슬라이더 내부 요소의 transition과 transform 속성을 변경하고 있습니다.

sliderInner.style.transition = "all 0.6s";는 슬라이더 내부 요소에 대한 모든 CSS 속성의 변경이 0.6초 동안 부드럽게 적용되도록 설정하는 코드입니다.

 

sliderInner.style.transform = "translateX(-"+ sliderWidth * currentIndex + "px)";는 슬라이더 내부 요소를 가로축으로 이동시키는 코드입니다. translateX() 함수는 x축 방향으로 이동시키는 함수로, 현재 슬라이더의 너비(sliderWidth)와 현재 인덱스(currentIndex)를 곱한 값을 이용하여 이동 거리를 계산합니다. 이렇게 계산된 값을 통해 요소를 이동시켜 슬라이더를 제어합니다.

---

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

        setInterval(sliderEffect, sliderInterval);
    </script>

설정 된 이미지의 갯수가 마지막에 위치했을 때를 작업해주도록 하겠습니다.

if 문을 이용해 만약 현재 인덱스와 이미지 갯수가 맞다면 시간을 0.7초로 지정해 다시 앞으로 빠르게 돌려놓도록 설정해 줍니다. 시간을 700으로 설정해 놓으면 0.7초이고, 사람이 눈치채기 어려운 속도로 지나가기 때문에 700으로 지정해 줍니다.

그 다음 현재 인덱스에는 0으로 지정해 둡니다.

 

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" , {
                    x : - 800 * currentIndex,
                    duration : 1,
                })
            }, sliderInterval);
        </script>

 

 

다음은 자바스크립트가 아닌, GSAP를 이용해 위아래로 이미지가 움직이는 동일한 코드를 짜보았습니다.

우선 gsap를 이용하기 위해선 gsap 사이트에서 속성을 긁어와야 합니다.

 

그 다음 스크립트를 구성해 현재의 인덱스에서 + 1이 되는 값과 슬라이더 카운터의 값을 나눠준 뒤 좌우로 움직이기 때문에 x의 값을 -800으로 지정해 준 뒤 전환 간격을 1초로 설정해 주면 gsap는 끝이납니다.

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

jquery도 마찬가지로 jquery를 사용하기 위해선 jquery 사이트에서 소스를 두 개 긁어와야 사용할 수 있습니다.

그 다음 스크립트를 구성해 현재의 인덱스에 현재의 인덱스에서 + 1 된 값과, slider의 갯수값을 나눠줍니다.

다음으로 $ 표시를 이용해 css 는 position relative로 설정해 놓은 뒤 애니메이션은 왼쪽으로 움직여야 하기 때문에 left로 설정해 준 뒤 폭의 간격은 800이니 800으로 지정해 주고 

애니메이션 효과는 600밀리초(0.6초) 동안 상단 위치를 "-450 * currentIndex"로 이동시키는 것으로 설정해 줍니다.

 

이미지의 값을 구하는 속성

요소 속성 : 크기 및 위치 : element.clientWidth : 요소의 가로값(마진/보더 미포함)
요소 속성 : 크기 및 위치 : element.clientHeight : 요소의 가로값(마진/보더 미포함)
요소 속성 : 크기 및 위치 : element.clientTop : 요소의 Y축값(위치 값을 부모 기준으로 가져옴)
요소 속성 : 크기 및 위치 : element.clientLeft : 요소의 X축값(위치 값을 부모 기준으로 가져옴)

요소 속성 : 크기 및 위치 : element.offsetHeight : 요소의 세로값(보더/패딩이 포함 돼 있음)
요소 속성 : 크기 및 위치 : element.offsetWidth : 요소의 가로값(보더/패딩이 포함 돼 있음)
요소 속성 : 크기 및 위치 : element.offsetTop : 요소의 Y축값(문서 기준)
요소 속성 : 크기 및 위치 : element.offsetleft : 요소의 Y축값(문서 기준)
요소 메서드 : 크기 및 위치 : element.getBoundingClientRect : 요소의 크기 및 위치값을 설정

 

코드보기

https://github.com/leeyouna21/web2023/blob/master/javascript/slide/slideEffect04.html

GitHub - leeyouna21/web2023: 수업시간에 배운 사이트입니다.

 

 

🥰 오늘도 감사합니다.