AirPodsPro

사이트명 : 애플 에어팟
사용언어 : HTML, CSS, Jquery(GSAP)

---

POINT

• 시퀀스 이미지
• 스크롤에 따른 동영상 재생

---

시퀀스 이미지 애니메이션

원래의 사이트는 Canvas를 사용해서 애니메이션 처리를 했지만 Canvas를 사용하지 않아도 가능하다

let imgEl = ``;
for (let i = 0; i < 64; i++) {
  const firstClass = i == 0 ? "on" : "";
  imgEl += `<img class="${firstClass}"
  	src="./assets/images/${i.toString()
    .padStart(4, "0")}.png" alt="">`;
}

$(".sequence-area").html(imgEl);

먼저 시퀀스 이미지의 개수 만큼 반복문을 돌리고 imgEl 변수에 전부 저장을 시켜준다.
toString을 사용해서 문자열로 변환 시켜준뒤 padStart를 사용해서 X자리 값 만큼 0으로 대체 시켜준다. 저 코드 같은 경우엔 0000, 0001, 0002 식으로 변경된다.

처음 이미지만 보여지게 하기 위해서 firstClass란 변수를 사용했다.

그 다음에 이미지를 바꾸는 애니메이션은 Gsap으로 만들었다.

const introImg = gsap.timeline({
  scrollTrigger: {
    trigger: ".sc-intro",
    start: "0% 0%",
    end: "80% 100%",
    scrub: 0,
    onUpdate: function (self) {
      imgLength = $(".sequence-area img").length - 1;
      idx = Math.floor(self.progress * imgLength);

      $(".sequence-area img")
        .eq(idx)
        .addClass("on")
        .siblings()
        .removeClass("on");

      idx == 63 ? $(".sequence-area img").removeClass("on") : '';
    },

  }
});

progress의 값을 이미지의 개수 만큼 가질 수 있게 곱해주고 필요 없는 소숫점 자리를 버리기 위해 Math.floor 사용했다.
eq(idx)를 사용해서 이미지를 선택한 다음 on 클래스를 추가하고 형제 요소들의 on클래스를 지워주면 시퀀스 이미지 애니메이션이 완성된다.

---

로딩 애니메이션 겹침

Gsap에서 애니메이션을 줄 때 똑같은 요소에게 애니메이션을 주면 오류가 생겨서 로딩 애니메이션을 줄 때에는 따로 따로 줘야한다.

<div class="부모">
	<div class="자식">
	</div>
</div>

로딩 애니메이션을 줄 땐 자식 요소에게 애니메이션을 주고, 스크롤 애니메이션을 줄 땐 부모의 요소에게 조절하면 된다.

---

스크롤에 따른 동영상 재생

Gsap을 이용하면 스크롤에 따른 동영상 재생도 쉽게 할 수 있다.

const dancerVideo = document.querySelector('.dancer-video');

dancerVideo.addEventListener('loadedmetadata', function () {

  const sound = gsap
    .timeline({
      scrollTrigger: {
        trigger: ".sc-sound .group-dancer",
        start: "0% 0%",
        end: "100% 100%",
        scrub: 0,
        onUpdate: function (self) {
          dancerVideo.currentTime = dancerVideo.duration * self.progress;
        },
      },
    })

dancerVideo.addEventListener('loadedmetadata', function () {} 준 이유는 미디어 파일이 로드되었을 때 실행시켜주기 위해 넣었다. 처음엔 안넣은 상태로 만들었는데 중간 중간 새로고침 할 때 오류가 생겨 저 코드를 넣게 되었다.

비디오의 길이에 진행률을 곱해서 현재 재생 시간을 계산하게 만든 뒤 currentTime에 값을 넣어주면 비디오의 재생 시간을 스크롤에 진행률에 따라 재생 되게 할 수 있다.