패스트캠퍼스 온라인 강의를 통해 만든 ★다방 랜딩페이지. YOUTUBE 영상 위에 요소 3개를 위아래로 반복적으로 떠다니는 애니메이션 적용방법을 배웠다.

HTML

• img 태그로 요소 3개 삽입

<section class="youtube">
  <div class="youtube__area">
    <div id="player"></div>
  </div>
  <div class="youtube__cover"></div>
  <div class="inner">
    <img src="./images/floating1.png" alt="Icon" class="floating floating1" /> 
    <img src="./images/floating2.png" alt="Icon" class="floating floating2" />
    <img src="./images/floating3.png" alt="Icon" class="floating floating3" /> 
  </div>
</section>

JS_main.js

• 요소 3개를 Youtube 영상 위에 배치하고 떠다니는 동작 효과를 주기 위해 JS 코드 작성 : function floatingObject()의 gsap.to()을 사용
• repeat: -1 > 무한반복
• yoyo: true > 한 번 재생된 애니메이션을 다시 뒤로 재생(부드럽게 동작하게 하기 위함)
• ease: Power1.easeInOut > easing 함수, timing function의 옵션 가져옴(TweenMax.to() = gsap.to())
• delay : random(0, delay) > 몇 초 뒤에 애니메이션을 실행하겠다는 지연시간 삽입
• 랜덤 함수로 소수점 2자리의 특정한 범위의 랜덤한 수치를 뽑아내 애니메이션을 조금 더 자연스럽게 함

범위 랜덤 함수
Math라는 수학객체를 통해서 random한 숫자를 반환시키는 메소드를 실행
(max - min) + min이런 수식을 통해서 내가 원하는 범위의 랜덤한 숫자를 뽑아낼 수 있다
소수점 2자리의 특정한 범위의 랜덤한 수치를 뽑아내주는 함수이다

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

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)
        }
      );
}


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

GSAP & ScrollToPlugin
GSAP(The GreenSock Animation Platform)은 자바스크립트로 제어하는 타임라인 기반의 애니메이션 라이브러리. ScrollToPlugin은 스크롤 애니메이션을 지원하는 GSAP 플러그인.
https://greensock.com/docs/v3/GSAP/gsap.to() 에 옵션 사용법이 자세하게 설명되어 있다.

CSS

.youtube .inner {
    height: 700px;
    background-color: royalblue;
}

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

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

.youtube .floating3 {
    position: absolute;
    bottom: -200px;
    right: 0;
}

랜덤 함수는 문법과 사용법은 어려웠다
강사님께서 자바스크립트를 진도를 더 나간 후에 Math 객체와 random 메소드, 랜덤 수치를 뽑는 로직 등에 대해서 알려주시겠다고 하셨다