유튜브 영상 배경 - 반복 애니메이션

랜덤 수치를 활용한 플로팅 요소를 제작한다. 총 세 개이나, 하나는 위치상 다음 섹션으로 이동시켰다.

코드

HTML

      <img class="floating floating1" src="./images/floating1.png" alt="Icon" />
      <img class="floating floating2" src="./images/floating2.png" alt="Icon" />

CSS

.youtube .floating1 {
  position: absolute;
  top: 50px;
  left: 0;
}

.youtube .floating2 {
  position: absolute;
  top: 350px;
  left: 150px;
}

JS

// 범위 랜덤 함수(소수점 2자리까지)
function random(min, max) {
  // `.toFixed()`를 통해 반환된 문자 데이터를,
  // `parseFloat()`을 통해 소수점을 가지는 숫자 데이터로 변환
  return parseFloat((Math.random() * (max - min) + min).toFixed(2))
};


function floatingObject(selector, delay, size) {
  // gsap.to(요소, 시간, 옵션)
  gsap.to(selector, random(1.5, 2.5), {
    y: size,
    repeat: -1, // 무한 반복, 라이브러리에서 지원하는 기능
    yoyo: true, // 실행한 애니메이션을 다시 거꾸로 실행해서 돌아감
    ease: Power1.easeInOut,
    delay: random(0, delay)
  });
};

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