슬라이드 이펙트 : 하 → 상 움직이기

728x90

슬라이드 이펙트 : 하 → 상 움직이기

수업 시간에 배운 내용을 복습하면서 해보겠습니다.

코드 보기(HTML, JAVASCRIPT / CSS1 / CSS2) / 완성화면

코드 블럭

<!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>03. 슬라이드 이펙트</title>

    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/slider.css">

    <!-- 파비콘 -->
    <link rel="shortcut icon" type="image/x-icon" href="ico/favicon.png"/> 
    <link rel="apple-touch-icon" sizes="114x114" href="ico/favicon.png"/>
    <link rel="apple-touch-icon" href="ico/favicon.png"/>

    <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: 1000px;
            height: 450px;
        }
        .slider {   /* 개별적인 이미지 */
            position: relative;
            width: 800px;
            height: 450px;
        }
    </style>
</head>
<body class="img03 bg03 font03">
    <header id="header">
        <h1>Javascript slider Effect03</h1>
        <p>슬라이드 이펙트 : 위로 움직이기</p>
        <ul>
            <li><a href="sliderEffect01.html">1</a></li>
            <li><a href="sliderEffect02.html">2</a></li>
            <li class="active"><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="이미지6"></div>
                    <div class="slider"><img src="./img/sliderEffect07-min.jpg" alt="이미지7"></div>
                    <div class="slider"><img src="./img/sliderEffect08-min.jpg" alt="이미지8"></div>
                    <div class="slider"><img src="./img/sliderEffect09-min.jpg" alt="이미지9"></div>
                    <div class="slider"><img src="./img/sliderEffect10-min.jpg" alt="이미지10"></div>
                </div>                
            </div>
        </div>
    </main>
    <!-- //main -->

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

코드 구성

코드는 간단하게 header 구역 부분에 제목 태그, 목록 태그를 사용해서 텍스트를 입력해줍니다.
main 구역에는 이미지 태그를 사용해 각각 이미지를 입력해줍니다.
css는 유형별로 공통으로 사용될 스타일은 파일로 따로 만들어서 링크 태그를 사용해 가지고 와서 입력해주고 유형별로 다르게 사용될 스타일은 각각의 코드 구성하는데 입력해줍니다.
두번째 슬라이드 이펙트와 다르게 width 값을 이미지가 아래로 나열되는 값을 입력해야하기 때문에 width 값을 1000으로 입력해줍니다.
스타일이 해당되는 부분을 제외하고 나머지는 사라지게 하기 위해서 overflow:hidden;을 입력해줍니다.

CSS

CSS1 참고(https://github.com/dongjin6539/web2023/blob/main/javascript/slider/css/reset.css)
CSS2 참고 (https://github.com/dongjin6539/web2023/blob/main/javascript/slider/css/slider.css)

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;          // 이미지 변경 간격 시간

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

    setInterval(() => {
        currentIndex = (currentIndex + 1 ) % sliderCount;

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

자바스크립트 구성

각각 필요한 부분의 태그를 선택자로 만들어줍니다.
변수를 추가로 저장해줍니다. 현재 보이는 이미지를 currentIndex로 0을 저장해주고, 이미지의 갯수는 sliderCount로 이미지 부부분을 선택자로 만들어둔 slider를 사용해서 slider.length를 저장해주고, 이미지 변경 경과 시간을 sliderInterval로 3000(3초)를 저장해줍니다.
setInterval 함수를 사용해줍니다.
currentIndex 값을 0, 1, 2, 3, 4의 데이터가 나오게 식을 만들어줍니다.
스타일 transform 속성을 입력해서 이미지가 위로 움직여서 사라지게 해주기 위해 translateY 속성을 입력해줍니다.
이미지의 height 값을 450px로 입력을 해놨습니다. 이미지를 좌측으로 이동해야하기 때문에 -0, -450, -900, -1350, -1800, -0이 나와야 하므로 식을 만들어서 입력해줍니다.
이동하는 효과가 자연스럽게 되도록 하기 위해 스타일을 직접주는 형식으로 transition를 줍니다.

GSAP, jQuery

GSAP

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script>
<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;          // 이미지 변경 간격 시간
    
    setInterval(() => {
        currentIndex = (currentIndex + 1) % sliderCount;

        gsap.to(".slider__inner", {
            y : -450 * currentIndex
        })
    }, sliderInterval);
</script>

GSAP 구성

JAVASCRIPT와 구성은 비슷합니다.
먼저 GSAP의 cdn링크를 홈페이지를 통해 가지고 와줍니다.(https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js)
setInterval 함수 안에만 좀 다릅니다.
함수 안에 currentIndex의 값은 똑같이 구해줍니다.
gsap 라이브러리를 사용하기 위해서는 .to( )를 사용해서 해야합니다.
( )안에는 선택자 변수를 입력하거나 클래스명을 가지고 와서 입력해주면 됩니다.
gsap 라이브러리는 transform: translateY를 간단하게 y로 표시가 가능합니다.
이미지의 height 값을 450px로 입력을 해놨습니다. 이미지를 좌측으로 이동해야하기 때문에 -0, -450, -900, -1350, -1800, -0이 나와야 하므로 식을 만들어서 입력해줍니다.
gsap 라이브러리는 transition 속성을 따로 입력안해도 자연스러운 효과를 줍니다.

jQuery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<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;          // 이미지 변경 간격 시간
    
    setInterval(() => {
        currentIndex = (currentIndex + 1) % $(".slider").length;

        $(".slider__inner").css("position", "relative");
        $(".slider__inner").animate({top : -450 * currentIndex}, 600);
    }, sliderInterval);
</script>

jQuery 구성

JAVASCRIPT와 구성은 비슷합니다.
먼저 jQuery의 링크를 홈페이지를 통해 가지고 와줍니다.(https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js)
setInterval 함수 안에만 좀 다릅니다.
함수 안에 currentIndex의 값은 똑같이 구해줍니다.
jQuery는 선택자를 따로 만들지 않고 간단하게 입력이 가능합니다. $(".클래스명")
jQuery는 transform를 효과를 사용하지 못하기때문에 animate를 사용해서 left, top, right, bottom을 사용해서 좌표를 입력시킬 수 있습니다.
하지만 그냥 사용하면은 적용이 안되기 때문에 선택자에 css를 "position", "relative"를 입력해야합니다.

참고

GSAP

https://greensock.com/gsap/

jQuery

https://jquery.com/

728x90

코딩 공부하기

슬라이드 이펙트 : 하 → 상 움직이기

슬라이드 이펙트 : 하 → 상 움직이기

코드 블럭

코드 구성

CSS

JAVASCRIPT

자바스크립트 구성

GSAP

GSAP 구성

jQuery

jQuery 구성

참고

티스토리툴바

슬라이드 이펙트 : 하 → 상 움직이기

슬라이드 이펙트 : 하 → 상 움직이기

코드 블럭

코드 구성

CSS

JAVASCRIPT

자바스크립트 구성

GSAP

GSAP 구성

jQuery

jQuery 구성

참고

관련글

티스토리툴바