JAVASCRIPT

슬라이드 이펙트2 가로유형을 알아 봅시다.

이미사용 2023. 4. 10. 20:03
명언
-
728x90
반응형

슬라이드 이펙트1 기본유형보러가기

슬라이드 이펙트3 세로유형 보러가기

슬라이드 이펙트4 가로유형 (연속)보러가기

슬라이드 이펙트5 세로유형 (연속) 보러가기

슬라이드 이펙트6 버튼,닷메뉴 보러가기

슬라이드 이펙트7 버튼,썸네일 보러가기

슬라이드 이펙트2 가로유형

 

 

전체 소스 보러가기

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

</head>
<body class="img01 bg04 font02">
    <header id="header">
        <h1>Javascript Slider Effect02</h1>
        <p>슬라이드 이펙트 : 좌로 움직이기</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/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>
    </main>
    <!-- main -->

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

우선 사진을 가로로 정렬 해주어야 하기 때문에 display: flex;를 사용해 이미지를 가로로 해줍니다.

그리고 overflow: hidden;을 이용해 잘리는 이미지는 안보이게 해줍니다.

 

 

※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");          // 개별 이미지
        
        let currentIndex = 0;               //현재 보이는 이미지
        let sliderCount = slider.length;    //이미지 갯수
        let sliderInterval = 3000;          //이미지 변경 간격 시간
    </script>

    <!-- javascript -->
    <script>
        // sliderInner.style.transform = translateX("0px");
        // sliderInner.style.transform = translateX("-800px");
        // sliderInner.style.transform = translateX("-1600px");
        // sliderInner.style.transform = translateX("-2400px");
        // sliderInner.style.transform = translateX("-3200px");
        // sliderInner.style.transform = translateX("0px");

        // // 트랜지션 설정 
        // sliderInner.style.transition = "all 0.6s";

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

        //     sliderInner.style.transform = "translateX("+ -800 * currentIndex + "px)";

        // },sliderInterval);

기본 유형에서 사용한 것과 같이 setInterval함수를 쓰고 sliderInterval의 주기만큼 반복 하도록 하게 하였습니다.

이제것을 이용해 가로로 되어있지만 overflow: hidden로 인해 보이지 않는 이미지를 보이게 하기위해 transform을 이용하여 "translateX("+ -800 * currentIndex + "px)" 값만큼 가로로 움직이게 해줍니다. 그 움직인 가로의 값에 있는 이미지를  보여줍니다.

transform 요소의 위치, 크기, 회전 등을 변경하는 데 사용되는 CSS 속성입니다.
translateX transform 속성 중 하나로, X축 방향으로 요소를 이동시키는 함수입니다.

 

 

※ 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,
                ease: "elastic.out(1, 0.3)"
            });
        },sliderInterval)
    </script>

GSAP를 사용하기위해 라이브러리를 가져오고

정해준 시간주기로 반복하고 변수를 변경하는 거까지는 같습니다.

GSAP를 사용하기위해 to 함수를 사용하고 .slider__inner 클래스를 가진 요소의   x의 속성값을 -800 * currentIndex 만큼 움직이고 그곳에 있는 이미지를 보여줍니다.

 

duration 애니메이션의 실행 시간을 설정하는데 사용되는 옵션입니다. 해당 속성의 값은 초 단위로 설정됩니다.
ease  애니메이션 등에서 사용되어 움직임을 자연스럽게 만들기 위해 시간에 따라 값을 변화시키는 함수입니다.
elastic.out(1, 0.3) 탄성을 모방하여 움직임을 부드럽게 만드는데 사용됩니다. "elastic.out"은 탄성의 반동을 나타내고, 괄호 안에 있는 매개변수는 다음과 같습니다:

첫 번째 매개변수 (1)는 애니메이션이 끝나는 시간입니다. 이 값은 1로 설정되어 있으므로, 애니메이션이 1초 동안 진행됩니다.
두 번째 매개변수 (0.3)는 반동이 얼마나 강한지를 나타냅니다. 이 값이 작을수록 반동이 약해지고, 값이 클수록 반동이 강해집니다

 

 

※ 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, "easeOutElastic");

        },sliderInterval);
    </script>

jQuery를 사용하기위해 라이브러리를 가져오고

정해준 시간주기로 반복하고 변수를 변경하는거 까지는 같습니다. jQuery를 사용할때는 $를 사용합니다.

그후 slider__inner의 position을 relative로 하여 해당 요소를 애니메이션 효과로 이동시켜주게 합니다.

animate()를 이용해 .slider__inner에 애니메이션효과를  600의 주기마다  left로 -800만큼 이동하게 만들어줍니다. 이동한 곳에는 다른 사진이 보이게 됩니다.

animate  jQuery의 메서드 중 하나로, HTML 요소를 애니메이션화하는 데 사용됩니다. 이 메서드는 CSS 속성 값들을 변경하여 요소를 움직이는 애니메이션을 만들어 줍니다.
easeOutElastic 애니메이션에서 사용되는 Easing Function 중 하나입니다. 이 함수는 탄성을 모방하여 움직임을 부드럽게 만드는데 사용됩니다.
움직이거나, 변화하는 CSS 속성을 설정하고, 애니메이션 지속 시간과 easing 함수를 지정하여 요소를 애니메이션화합니다.