16-4 스타벅스 클론 코딩하기 - Part4 3D 애니메이션 및 그 외 JS 라이브러리

fastcampus 사이트의 '한번에 끝내는 프론트엔드 개발 강의' 를 수강하며 공부 목적으로 작성하는 글입니다.

 

클론 코딩 완성형태

강의의 예제를 따라해보며 스타벅스 클론코딩을 해보았습니다. 한번에 많은 기능을 넣다보니 정리가 필요할 것 같아 파트별로 하나하나 요점들을 적어보려고 합니다.

---

순서

1. 3D 애니메이션

2. 스크롤 위치 계산

3. 페이지 상단 이동하기

 

● 3D 애니메이션

 

▷ 고정된 배경

  background-image: url("../images/bg.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
  background-size: cover;

 

RotateY 3D Animation

위의 화면처럼 3D 애니메이션 효과를 넣기위한 핵심 속성은 rotateY와 backface-visibility, 그리고 perspective입니다.

:hover 선택자를 통해 rotateY 값을 변경하여 뒤집히도록하고 backface-visibility로 뒤집힌 면은 보이지 않도록 하는것이 핵심입니다. 그리고 3D효과를 내기 위해 perspective: 600px 값을 주면 화면에서 600px 정도 떨어져 3D로 회전하는 모습을 볼 수 있습니다.

 

● 스크롤 위치 계산하기

▷ Scroll Magic 사용하기

 

https://cdnjs.com/libraries/ScrollMagic

해당 사이트에서 min.js를 카피해 HTML 파일에 연결해주세요.

 

최상단의 이미지를 보면 좌에서 우로, 우에서 좌로 날아오는 이미지들을 보셨을 것입니다. 이 모션은 Scroll Magic이라는 JS 라이브러리를 통해서 만들 수 있습니다.

 

const spyEls = document.querySelectorAll("section.scroll-spy");
 spyEls.forEach(function(spyEl) {
  new ScrollMagic
    .Scene({
      triggerElement:spyEl,  //보여짐 여부를 감시할 요소를 지정해주면 됨
      triggerHook: .8   //viewport의 윗부분이 0, 아랫부분이 1이라고 한다면 개발자가 정의한 지점에 도달했을 때 실행한다.
    })
    .setClassToggle(spyEl, 'show') // (토글할 클래스 요소, 클래스 이름 부여) 클래스 제어
    .addTo(new ScrollMagic.Controller());
 });

화면을 내리면서 특정영역을 감지해 함수를 실행시켜주는 JS의 일부분입니다.

이처럼 JS를 작성했다면 움직임의 효과는 CSS를 통해 제어할 수 있습니다.

 

.back-to-position {
  opacity: 0;
  transition: 1s;
}

/* 왼쪽에서 오른쪽으로 나타나는 애니메이션 */
.back-to-position.to-right {
  transform: translateX(-150px);
}

.back-to-position.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;
}

JS에서 사용한 함수를 통해 scroll-spy를 검색하고, 특정위치에 넘어감에 따라 클래스를 부여하면 위의 CSS 선택자를 통해 애니메이션이 동작하도록 해줍니다. 그러므로 특정 이미지나 부분이 움직이기를 원한다면 해당 섹션에 scroll-spy라는 클래스를 부여하고 상황에 맞게 위 CSS의 클래스 이름처럼 클래스를 부여해주면 됩니다.

 

 

● 페이지 상단으로 이동하기

이 기능을 사용하기 위해서는 gsap JS 라이브러리를 사용해야 합니다. 앞서 gsap 라이브러리를 사용한 적이 있지만 그 js 파일과는 다른 ScrollToPlugin.min.js 파일을 추가로 연결시켜야 합니다.

 

gsap - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.7.1/ScrollToPlugin.min.js" integrity="sha512-1OG9UO4krPizjtz/c9iDbjCqtXznBYdJeD4ccPaYfJHzC6F1qoQ3P1bgQ3J8lgCoK5qGVCqsY4+/RKjLDzITVQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

JS 코드는 Part1에서 만들었던 전역배지 부분의 JS 코드에다가 추가하였습니다.

const badgeEl = document.querySelector('header .badges');
const toTopEl=document.querySelector("#to-top");
window.addEventListener('scroll', _.throttle(function () {
  console.log(window.scrollY);
  if (window.scrollY > 500){
    //배지 숨기기
    //gsap.to(요소, 지속시간, 옵션);
    gsap.to(badgeEl, .6, {
      opacity: 0,
      display: 'none'
    });
  //버튼 보이기!
  gsap.to(toTopEl, .2, {
    x: 0  //원래위치
  });
} else {
  //배지 보이기
  gsap.to(badgeEl, .6, {
    opacity: 1,
    display: 'block'
  });
  //버튼 숨기기!
  gsap.to(toTopEl, .2, {
    x: 100
  });
}
}, 300));

toTopEl.addEventListener("click", function() {
  gsap.to(window, .7, {
    scrollTo: 0  //화면의 위치를 0px지점으로 이동
  });
 });