[카카오테크캠퍼스 선택과정] 스타벅스 예제: 유튜브 영상 배경

Youtube iframe API

16:9의 화면 만들기

16:9

<div class="container">
  <div class="item"></div>
</div>

.container {
  width: 500px;
  background-color: royalblue;
}
.container .item {
  width: 100%;
  height: 0;
  padding-top: 56.25%;
}

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

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

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

function onYouTubeIframeAPIReady() {
  new YT.Player("player", {
    videoId: "An6LvWQuj_8", // 최초 재생할 유튜브 영상 ID
    playerVars: {
      autoplay: true, // 자동 재생 유무
      loop: true, // 반복 재생 유무
      playlist: "An6LvWQuj_8", // 반복 재생할 유튜브 영상 ID 목록
    },
    events: {
      onReady: function (event) {
        event.target.mute(); // 음소거
      },
    },
  });
}

onYouTubeIframeAPIReady 함수는 YouTube IFrame Player API에서 사용하는 이름이라 다르게 지정하면 동작하지 않는다.

playerVars의 인자에 대해 더 자세히 알려면?

---

반복 애니메이션

흔들거리는 이미지

// 흔들거리는 이미지
function floatingObject(selector) {
  gsap.to(selector, 1, {
    y: 20, // y축으로 20만큼
    repeat: -1, // 무한 반복
    yoyo: true, // 요요처럼 왔다 갔다
    ease: Power1.easeInOut, // Easing에 대해 더 알아보자!
    delay: 1, // 1초 뒤에 시작
  });
}

floatingObject(".floating");

Easing

애니메이션 효과를 더욱 자연스럽게 해주는 옵션이다.

그래프를 통해 어떤 느낌인지 직접 느낄 수 있다.

gsap.to()

gsap.to()를 지금까지 간단하게 사용했지만, 이처럼 많은 옵션이 있으니 공식 문서를 읽고 활용하자.

영어라고 싫어하지 말고.. 문서를 읽는 습관을 들이자!

// 흔들거리는 이미지
function floatingObject(selector, delay, size) {
  gsap.to(selector, random(1.5, 2.5), {
    y: size,
    repeat: -1,
    yoyo: true,
    ease: Power1.easeInOut,
    delay: random(0, delay),
  });
}
// 범위 랜덤 함수(소수점 2자리까지)
function random(min, max) {
  // `.toFixed()`를 통해 반환된 문자 데이터를,
  // `parseFloat()`을 통해 소수점을 가지는 숫자 데이터로 변환
  return parseFloat((Math.random() * (max - min) + min).toFixed(2));
}

floatingObject(".floating1", 1, 15);
floatingObject(".floating2", 0.5, 15);
floatingObject(".floating3", 1.5, 20);

자연스러운 애니메이션을 위해 요소 별로 다른 인자를 받고, 각자 다른 애니메이션이 실행되도록 했다.