본문 바로가기
JAVASCRIPT

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

by dongjin6539 2023. 4. 10.
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

 

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
jQuery

 

728x90
반응형