슬라이드이펙트 두 번째

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

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

우선 전체 이미지를 100%로 설정해 줍니다.

그 다음 이미지를 덧대어 주는 부분을 설정해 주기 위해 위드값 800, 하이트값을 450으로 지정해 줍니다.

다음은 이미지가 위아래로 움직이게 해주기 위해서 위드값 4000, 하이트값 450을 지정해 줍니다.

마지막으로 개별적인 이미지 값을 설정해 주기 위해서 포지션 릴레이티브를 줍니다.

html

<main id="main">
        <div class="slider__wrap">
            <div class="slider__img">
                <div class="slider__inner">
                    <div class="slider"><img src="../slide/img/slideEffect06.jpg" alt="이미지1"></div>
                    <div class="slider"><img src="../slide/img/slideEffect07-1.jpg" alt="이미지1"></div>
                    <div class="slider"><img src="../slide/img/slideEffect08-1.jpg" alt="이미지1"></div>
                    <div class="slider"><img src="../slide/img/slideEffect09-1.jpg" alt="이미지1"></div>
                    <div class="slider"><img src="../slide/img/slideEffect10-1.jpg" alt="이미지1"></div>
                </div>
            </div>
        </div>
    </main>
    <!--main-->
    <footer id="footer">
        <a href="mailto:yuna243441@naver.com">yuna243441@naver.com</a>
    </footer>
    <!--footer-->

각 슬라이드에 맞는 이미지를 설정해 주기 위해 이너 안에 각각의 이미지를 5개 설정해 넣어줍니다.

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>

    <!-- 자바스크립트 📌 -->
    <script>
        
        sliderInner.style.transform = translateX("-0px");  //-800*0 이미지의 width값 만큼 빼기
        sliderInner.style.transform = translateX("-800px"); //-800*1
        sliderInner.style.transform = translateX("-1600px"); //-800*2
        sliderInner.style.transform = translateX("-2400px"); //-800*3
        sliderInner.style.transform = translateX("-3200px"); //-800*4
        sliderInner.style.transform = translateX("-0px"); //-800*0

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

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

            sliderInner.style.transform = "translateX("+ -800 * currentIndex + "px)";
        }, sliderInterval);
    </script>

이미지가 3초마다 움직이게 하기 위해서 초기값을 3000으로 설정해주게 된다면 이미지가 3초마다 바뀌게 됩니다.

메인 이미지가 보여지는 영역과 움직일때마다 바뀌는 이미지와 개별 이미지를 각각 선택자에 지정해 줍니다.

그 뒤 초기값을 현재 보이는 이미지는 0이어야 하니 0으로 설정해주고 , 전체 이미지 갯수는 slider의 갯수이므로 slider.length로 지정해 줍니다.

좌,우로 움직이는 애니메이션 효과를 설정해주기 위해서 translateX로 지정해 주면 좌,우로 사진이 움직이게 됩니다.

또한 이미지의 width값만큼 빼주기 위해서 -800 * 0 을 해줘 나온 값을 translateX에 지정해 줍니다.

이미지가 총 5개가 나와야 하므로 0~4개까지 설정해준 뒤 마지막 이미지 뒤엔 처음 이미지로 돌아와야 하기 때문에 초기값인

translateX("-0px"); 로 마무리 합니다.

다음은 넘어가는 효과를 좀 더 다이나믹하게 만들기 위해 transtion 스타일을 all 0.6s 로 작업해 줍니다.

이번엔 자바스크립트에서 setInterval을 사용해 작업해 줍니다. 현재 인덱스에서 1을 더한 뒤 그 값을 지정한 이미지 개수로 나눠줍니다.

setInterval 함수는 일정한 시간 간격으로 코드 블록을 반복 실행합니다. 이 코드에서는 sliderInterval 변수로 지정된 시간 간격마다 sliderInner 요소의 transform 속성 값을 변경하고 있습니다.

currentIndex 변수는 슬라이더에서 현재 보여지는 이미지의 인덱스를 나타내며, sliderCount 변수는 슬라이더에 포함된 이미지의 총 개수를 나타냅니다. currentIndex 변수는 슬라이더의 이미지를 변경할 때마다 업데이트되며,

sliderCount 변수를 초과할 경우 0으로 다시 초기화됩니다.

sliderInner 요소의 transform 속성은 CSS에서 2D 혹은 3D 변환을 지정할 때 사용되며, 이 코드에서는 X축 방향으로의 이동 거리를 나타내는 translateX 함수를 사용합니다. currentIndex 변수가 변경될 때마다 translateX 함수의 인수 값으로 -800 * currentIndex가 지정되므로, 슬라이더가 왼쪽으로 이동하면서 다음 이미지가 보여집니다.

GSAP

다음은 gsap를 이용해 자바스크립트와 같은 효과를 주도록 하겠습니다.

우선 gsap를 설정하기 위해선 gsap사이트에서 스크립트를 긁어와야 합니다.

<script scr="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script>

😊😊

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script>
    <script>
        setInterval(() => {
            currentIndex = (currentIndex+1) % sliderCount;
            gsap.to(sliderInner, {
                x : -800 * currentIndex,
                duration : 1,
                ease: "elastic.out(1, 0.5)"
            });
        }, sliderInterval);
    </script>

GSAP코드는 위 코드와 거의 동일하지만 라이브러리를 사용해 슬라이더 애니메이션 효과를 적용하는 것이 다릅니다.

위 코드에서 gsap.to() 함수를 사용해 sliderInner 요소를 x축 방향으로 이동시키는 애니메이션을 적용합니다.

이 함수는 첫 번쩨 인수로 애니메이션을 적용할 요소를 받으며, 두 번재 인수로 애니메이션 옵션 객체를 받습니다.

옵션 객체에선 X 속성에 -800* currentIndex 값을 지정해 X축 방향으로 이동 거리를 지정하고 duration 속성에 1을 지정해 애니메이션의 지속 시간을 1초로 설정합니다. 또한 ease 속성에 "elastic.out(1, 0.5)"값을 지정해 탄성 있는 애니메이션 효과를 적용합니다.

따라서, 이 코드는 위의 코드와 동일한 기능을 수행하지만, GSAP 라이브러리를 사용해 애니메이션 효과를 추가하고 있습니다.

JQuery

jQurey도 마찬가지로 작업해 줍니다.

jQurey를 설정하기 위해선 jQurey사이트에서 스크립트를 긁어와야 합니다.

    <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>

😊😊

    <!-- 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>

이 코드에서는 setInterval 함수를 사용하여 일정한 시간 간격마다 슬라이더 이미지를 변경하고 있습니다. currentIndex 변수는 슬라이더에서 현재 보여지는 이미지의 인덱스를 나타내며, $(".slider")는 jQuery 선택자를 사용하여 클래스 이름이 "slider"인 모든 요소를 선택하고, .length 속성을 사용하여 선택된 요소의 개수를 반환합니다. currentIndex 변수는 선택된 요소의 개수를 초과할 경우 0으로 다시 초기화됩니다.

$(".slider__inner")는 클래스 이름이 "slider__inner"인 요소를 선택하고, .css() 함수를 사용하여 "position" 속성 값을 "relative"로 변경합니다. 그리고 .animate() 함수를 사용하여 "left" 속성 값을 -800 * currentIndex로 변경하는 애니메이션을 적용합니다. 애니메이션 지속 시간은 600밀리초이며, 이후 "easeOutElastic" 애니메이션 이징 함수를 적용합니다.

따라서, 이 코드는 jQuery와 jQuery UI 라이브러리를 사용하여 슬라이더를 구현하고, CSS와 애니메이션 효과를 적용하는 것입니다.

코드보기

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

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

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

github.com

🥰 오늘도 감사합니다.

'javascript' 카테고리의 다른 글

슬라이드이펙트 네 번째 (17)	2023.04.11
슬라이드이펙트 첫 번째 (14)	2023.04.10
슬라이드이펙트 세 번째 (14)	2023.04.10
자바스크립트 퀴즈 사이트 만들기 7-3 (13)	2023.04.05
자바스크립트 퀴즈 사이트 만들기 7-2 (12)	2023.04.04

xoouxa