예제) 스타벅스 홈페이지 제작하기 ( vanilla js ) - 사용 라이브러리

lodash.js

📌 _.throttle(함수,시간)

실행되는 함수의 수를 계산해준다.

 

프로젝트가 무거워지면 화면을 스크롤할 때 함수를 많이 실행하는게 부담스러울 수 있다.

0.3초 단위로 부하를 줘서 함수가 우르르 실행되는 것을 방지하는 용도로 사용

ex) 화면이 스크롤 될 때 실행되는 함수의 개수를 일정 시간에 한 번씩만 실행되도록 제한을 걸었다.

window.addEventListener('scroll', _.throttle( function () {
    console.log('scroll')
}, 300));

gsap cdn

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

 

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

요소와 애니메이션 지속시간, 어떤 애니메이션을 적용할건지에 대한 여러가지 옵션을 명시할 수 있다.

요소에는 css 선택자를 작성해도 왼다.

 

1️⃣ 예제 1 ) 요소가 자연스럽게 사라지게

요소가 0.6초동안 애니메이션 처리가 되면서, opacity가 0으로 점점점 투명해진다.

const badgeEl = document.querySelector('header .badges');

gsap.to(badgeEl, .6, {
    opacity: 0,
})

 

하지만! opacity : 0 은 요소가 투명해진 것 뿐이고, 요소는 그대로여서 마우스 클릭이 가능한 상태가 된다.

👉 display 속성도 추가해준다.

// 전체 코드
const badgeEl = document.querySelector('header .badges');

window.addEventListener('scroll', _.throttle( function () {
    if(window.scrollY > 500 ) {
        gsap.to(badgeEl, .6, {
            opacity: 0,
            display: 'none',
        })
    } else {
        gsap.to(badgeEl, .6, {
            opacity: 1,
            display: 'block',
        })
    }
}, 300));

 

 

2️⃣ 예제 2 ) 요소가 자연스럽게 나타나게

opacity : 0 이었던 요소들을 각 요소에 지연시간을 추가하여 순차적으로 나타나게한다.

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

 

 

3️⃣ 예제 3 ) 요소가 둥둥 떠다니는 효과 주기

function floatingObject(selector, delay, size) {
    gsap.to(
        selector,                   // 선택자
        random(1.5, 2.5),           // 애니매이션 동작 시간
        {
            y: size,                // y축으로 20만큼 이동하는 애내매이션
            repeat: -1,             // 무한 반복
            yoyo: true,             // 재생된 애니매이션을 뒤로 다시 재생
            ease: Power1.easeInOut,
            delay: random(0,delay)
        }
    )
}

floatingObject('.floating1', 1, 15)
floatingObject('.floating2', .5, 15)
floatingObject('.floating3', 1.5, 20)

 

4️⃣ 예제 4 ) 페이지 상단으로 이동

const toTopEl = document.querySelector('#to-top');
toTopEl.addEventListener('click', function(){
    gsap.to(window, .7, {
        scrollTo: 0
    })
})

 

SwiperJS 

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

new Swiper( 요소, 옵션 )

 

📌 옵션

- direction : 방향

- autoplay: 자동 실행

   { delay : 지속시간 } 

- loop : 반복

- slidesPreView : 한번에 보여줄 슬라이드 개수

- spaceBetween : 슬라이드 사이 여백

- centeredSlides: 1번 슬라이드가 가운데 보이기

- pagination

  - el : 페이지 번호 요소 선택자

  - clickable : 사용자의 페이지 번호 요소 제어 가능 여부

- navigation

  - preEl : 이전 슬라이드

  - nextEl : 다음 슬라이드

new Swiper('.promotion .swiper', {
    loop: true,
    slidesPerView: 3, 
    spaceBetween: 10,
    centeredSlides: true,
    autoplay: {
        delay: 5000
    },
    pagination : {
        el: '.promotion .swiper-pagination',
        clickable: true,    //  사용자의 페이지 번호 요소 제어 가능 여부
    },
    navigation: {
        prevEl: '.promotion .swiper-prev',
        nextEl: '.promotion .swiper-next',
    }
})

Youtube API

Youtube 동영상을 제어할 수 있다.

https://developers.google.com/youtube/iframe_api_reference?hl=ko

iframe 삽입에 대한 YouTube Player API 참조 문서  |  YouTube IFrame Player API  |  Google for Developers

 

유튜브 영상이 출력될 위치에 요소를 생성한다.

 <div class="youtube__cover"></div>

 

옵션을 지정하고 실행한다.

// This code loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');

tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

//    This function creates an <iframe> (and YouTube player)
//    after the API code downloads.
function onYouTubeIframeAPIReady() {
    new YT.Player('player', {
      videoId: 'dLgC4yhZ578',
        playerVars: {          // 영상을 재생하기 위한 변수들
          autoplay: true,     // 자동 재생 유무
          loop: true,         // 반복 재생 유무
          playLists: 'dLgC4yhZ578'    // 반복 재생할 유튜브 영상 ID
      },
      events: {
          onReady: function(event) {
              event.target.mute();    // 음소거
          }
      }
    });
}

ScrollMagic

스크롤과 요소의 상호 작용을 위한 자바스크립트 라이브러리입니다.
대표적으로 어떤 요소가 현재 화면에 보이는 상태인지를 확인할 때 사용합니다.

new ScrollMagic.Scene().setClassToggle()

Scene : 특정한 요소를 감시하는 옵션을 지정해주는 메서드

setClassToggle : 클래스 속성을 지정 (toggle 방식으로)

👉 특정한 섹션이 화면에 보이기 시작할 때 애니메이션을 추가해줄 수 있다.

 

1️⃣ Scene 옵션

- triggerElement : 보여짐의 여부를 감시할 요소를 지정

- triggerHook : 트리거가 시작되는 지점

 

triggerHook: .8

 

 

 

 

 

0.8 이라는 뷰포트의 지점에 걸리면 트리거가 된다

 

 

감시하는옵션을 통해 해당하는 요소가 화면에 보여진다라고 판단이 되면 그 밑에 있는 setClassToggle이라는 메서드를 실행

 

2️⃣ setClassToggle(요소, 토글할 클래스 이름)

setClassToggle(spyEl, 'show')

해당하는 요소가 화면의 0.8 지점을 지나면 'show' 클래스가 추가된다.

 

⭐ 예제

const spyEls = document.querySelectorAll('section.scroll-spy');
spyEls.forEach( function(spyEl) {
    new ScrollMagic
        .Scene({
            triggerElement: spyEl,       /* 보여짐의 여부를 감시할 요소를 지정 */
            triggerHook: .8,             
        })
        .setClassToggle(spyEl, 'show')
        .addTo(new ScrollMagic.Controller());
})

클래스가 'scroll-spy' 인 요소들을 감시하고 스크롤 효과를 지정한다.

<section class="season-product scroll-spy">
  <div class="inner">
    <img src="./images/floating3.png" alt="image" class="floating floating3" />
    <img src="./images/season_product_image.png" alt="season" class="product back-to-position back-to-right delay-0"/>

    <div class="text-group">
      <img src="./images/season_product_text1.png" alt="season" class="title back-to-position back-to-left delay-1"/>
      <img src="./images/season_product_text2.png" alt="season" class="description back-to-position back-to-left delay-2"/>
      <div class="more back-to-position back-to-left delay-3">
        <a link="javascript:void(0)" class="btn"> 자세히 보기 </a>
      </div>
    </div>
  </div>
</section>

.back-to-position {
    opacity: 0;
    transition: 1s;
}
.back-to-position.back-to-right {
    transform: translateX(-150px);
}
.back-to-position.back-to-left {
    transform: translateX(150px);
}
.show .back-to-position {
    opacity: 1;
    transform: translateX(0);
}
.show .back-to-position.delay-0 {
    transition-delay: 0s;
}
.show .back-to-position.delay-1 {
    transition-delay: .3s;
}
.show .back-to-position.delay-2 {
    transition-delay: .6s;
}
.show .back-to-position.delay-3 {
    transition-delay: .9s;
}

'back-to-position' 클래스인 요소들은 opacity:0 으로 처음에 보이지 않고,

'back-to-right / left' 클래스 css를 통해 x축으로 -150 , +150 만큼 떨어져있다.

 

👉스크롤을 해서 0.8 지점을 지나 'show'클래스가 추가되면 opacity : 1 로 보이게 되면서 translateX(0)으로 x축 0 지점으로 돌아온다.

 

 

출처

프론트엔드 웹 개발의 모든 것 초격차 패키지