스타벅스 예제_6

gsap 이용 visual 부분 사진 순차 등장할 수 있게 만들기

• html

 <section class="visual">
      <div class="inner">

        <div class="title fade-in">
          <img src="./images/visual_title.png" alt="STARBUCKS DELIGHTFUL START TO THE YEARS"/>
          <a href="javascript:void(0)" class="btn btn--brown">자세히 보기</a>
        </div>
        <div class="fade-in">
          <img src="./images/visual_cup1.png" alt="new OATMEAL LATTE" class="cup1 image"/>
          <img src="./images/visual_cup1_text.png" alt="오트밀 라떼" class="cup1 text"/>
        </div>
        <div class="fade-in">
          <img src="./images/visual_cup2.png" alt="new STARBUCKS CARAMEL CRUMBLE MOCHA" class="cup2 image"/>
          <img src="./images/visual_cup2_text.png" alt="스타벅스 카라멜 크럼블 모카" class="cup2 text"/>
        </div>
        <div class="fade-in">
          <img src="./images/visual_spoon.png" alt="spoon" class="spoon"/>
        </div>
        
      </div>
    </section>

우선 첨부했던 이미지를 div를 통해 그룹으로 묶어주고 class이름을 fade-in 으로 지정해준다.

• css

.visual .fade-in {
    opacity: 0;
}

css 에서 visual 의 후손 fade-in class 이름을 가진 요소들을 보이지 않게 opacity를 0으로 지정해준다.

• js

const fadeEls = document.querySelectorAll('.visual .fade-in');
fadeEls.forEach(function(fadeEl, index) {
    gsap.to(fadeEl, 1,{
        delay: (index + 1) * .4,
        opacity: 1
    });
});

fadeEls 라는 변수를 만들고 document 객체의 querySelectorAll 메소드를 통해 fade-in 이라는 클래스 이름을 가진 요소를 전부 넣어줌.

반복적인 처리를 위해 forEach 메소드를 통해서 html에서 찾은 fade-in 요소의 개수만큼 forEach 메소드의 인수로 적은 함수가 실행시킴.

function에 fadeEl로 데이터 이름을 정해주고 매개변수는 index로 반복되는 횟수를 받아줌.

gsap은 자바스크립트 애니메이션 라이브러리.

이렇게 두개의 이름을 가진 함수가 반복적으로 실행 될 때 내부에서는 gsap의 to라는 메소드를 실행해준다.

gsap.to(요소, 지속시간, 옵션); 

애니메이션 처리하는 라이브러리에서 제공하는 기능.

첫번째로 반복되는 요소는 fadeEl, 지속시간은 1초, 애니메이션 처리할 옵션은 객체 데이터 형태로 {}를 사용.
css 에서 opacity 0으로 안보이게 했던 것을 js가 실행되면서 1로 보이게 만드는데 순차적으로 하나씩 보이기 위해 delay라는 옵션을 추가해 0.4초마다 하나씩 등장할 수 있게 해주는데 0.4만 입력을 하면 fade-in 요소가 0.4초 뒤 전부 등장하게 됨.

따라서 그 앞에 어떤 값을 곱해주는데 그 값은 index + 1

여기서 index는 0부터 시작. 0에 0.4를 곱하면 0이니 숫자 1을 더해 0.4 0.8 1,2 초 뒤 실행될 수 있게 만들어줌.

swiper

swiper 는 하드웨어 가속 전환과 여러 기본 동작을 갖춘 라이브러리.

현재 7,8 버전의 사용법이 다르기 때문에 6버전 사용.

<!-- in HEAD -->
<link rel="stylesheet" href="https://unpkg.com/swiper@6.8.4/swiper-bundle.min.css" />
<script src="https://unpkg.com/swiper@6.8.4/swiper-bundle.min.js"></script>

<!-- in BODY -->
<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">1</div>
    <div class="swiper-slide">2</div>
    <div class="swiper-slide">3</div>
  </div>
</div>

다음의 코드를 Html 넣어줌.

link와 script 태그에 swiper 정확한 버전을 명시해 작성해줌.

7,8과 현재 버전은 div 태그에 swiper-container 라고 클래스 이름을 명시해주는데 7,8 에서는 -container을 제거해서 swiper라고만 명시해줘도 됨.

scriptjs 라고 검색해 홈페이지 들가기
script js 홈페이지

get started 누르고 스크롤 내리면

Use Swiper from CDN 가 보이고 거기서

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css"
/>

<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>

복붙해주면 됨. 나는 버전이 달라서 그냥 강사님 깃허브에서 긁어옴.

저기서 버전만 바꾸면 될듯

그 다음 아래로 스크롤 내리면

Add Swiper HTML Layout를 보면 됨

필요한 부분은

<!-- Slider main container -->
<div class="swiper">
  <!-- Additional required wrapper -->
  <div class="swiper-wrapper">
    <!-- Slides -->
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-slide">Slide 3</div>
    ...
  </div>

swiper-slide 클래스 부분에 작성할 내용을 작성하면 됨.

슬라이드를 만들기 위해서 js 에 코드를 작성해주는데

new Swiper(); 라고 함수를 실행해줌.
new 는 후에 배울 내용이지만 자바스크립트의 생성자라 하며 자바스크립트의 클래스 개념.
여러 객체를 다룰 수 있음.

swiper 소괄호 사이 옵션을 넣어주면 됨.
첫번째로 선택자를 작성해주고 두번째로 객체데이터 넣어주면 됨

new Swiper('.notice-line .swiper-container', {
    direction: 'vertical',
    autoplay: true,
    loop: true
});

direction으로 방향을 설정해주고 autoplay로 자동재생 설정, loop로 반복설정을 해주면 공지사항 4개가 차례대로 반복되어 슬라이드됨.