Blinking Hello Kitty Angel

javascript

슬라이드이펙트 다섯 번째

xoouxa 2023. 4. 12. 22:42

“ 지연되는 프로젝트에 인력을 더 투입하면 오히려 더 늦어진다. ”

- Frederick Philips Brooks
Mythical Man-Month 저자
728x90

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

 

 

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

 

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

 

CSS 스타일

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title>04. 슬라이드 이펙트</title>

    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/slider.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*/
        }
        .slider {  /*개별적인 이미지*/
            position: relative;
            width: 800px;
            height: 450px;
        }
    </style>

 

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이라는 이름을 지정해 줍니다.

 

변수 설정

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

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

기존에 했던 1,2,3,4 번째의 순서와는 동일하나, 좌 우가 아닌 위아래로 지정해 주기 위해서 offsetHeight로 지정해 줍니다.

그래야만 높이값을 잡아 위아래로 사진을 움직이게 할 수 있습니다.

 

마지막으로 처음 이미지가 다시 처음으로 돌아오게 하기 위해 appendchild를 이용해 변수를 선언해줍니다.

 

코드

<script>
        let sliderInterval = 3000;
        
        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>

이미지가 3초 간격으로 움직이게 하기 위해서 초의 초기값을 3000으로 설정해 줍니다.

그 다음 함수를 이용해 현재의 인덱스가 하나씩 증가하게 설정하기 위해 ++ 작업을 해줍니다.

슬라이드 이너의 Y값이 sliderHeight과 currentIndex의 값이 곱해질 수 있도록 설정해 줍니다.

 

첫 번째 사진이 마지막 이미지에 위치했을 때 다시 맨 앞으로 돌려주기 위한 설정을 해줍니다.

만약, 현재의 인덱스와 슬라이더 카운터의 순서가 일치한다면, 시간 설정을 0.7초로 해줘 이용자가 눈치채지 못하도록 사진을 빠르게 전환시켜 주도록 설정해 주면 됩니다.

 

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

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

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

 

그 다음 스크립트를 구성해 현재의 인덱스에서 + 1이 되는 값과 슬라이더 카운터의 값을 나눠준 뒤 위아래로 움직이기 때문에 y의 값을 -450으로 지정해 준 뒤 전환 간격을 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({top : -450 * currentIndex}, 600);
        }, sliderInterval);
    </script>

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

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

다음으로 $ 표시를 이용해 css 는 position relative로 설정해 놓은 뒤 애니메이션은 위로 450을 지정해 주고 

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

 

이미지 값을 구하는 속성

이번 작업은 위 아래로 동작시켜주기 위해 offsetHeight를 사용하였습니다.

ㅇ

요소 속성 : 크기 및 위치 : 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/slideEffect05.html

 

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

수업시간에 배운 사이트입니다. Contribute to leeyouna21/web2023 development by creating an account on GitHub.

github.com

 

🥰 오늘도 감사합니다.

'javascript' 카테고리의 다른 글

슬라이드이펙트 일곱 번째  (11) 2023.04.16
슬라이드이펙트 여섯 번째  (11) 2023.04.14
슬라이드이펙트 네 번째  (17) 2023.04.11
슬라이드이펙트 첫 번째  (14) 2023.04.10
슬라이드이펙트 두 번째  (14) 2023.04.10

'javascript'의 다른글

  • 현재글슬라이드이펙트 다섯 번째

관련글

댓글

티스토리툴바