유튜브 & 반복 애니메이션

요소를 비율에 맞춰 나타내기

유튜브 가져오기 by iFrame

// 2. This code loads the IFrame Player API code asynchronously.
var tag = document.createElement("script")

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

// 3. This function creates an <iframe> (and YouTube player)
//    after the API code downloads.
function onYouTubeIframeAPIReady() {

  new YT.Player("player", { //  <div id="player"></div>이 부분에 아이디를 넣는다.
    videoId: "An6LvWQuj_8", //최초 재생할 유튜브 영상 Id
    playerVars: {
      autoplay: true,
      loop: true,
      playlist: "An6LvWQuj_8", //loop true로 설정한 경우, 다음 재생할 파일
    },
    events: {
      onReady: function (event) {
        event.target.mute() //음소거
      },
    },
  })
}

// 4. The API will call this function when the video player is ready.
function onPlayerReady(event) {
  event.target.playVideo()
}

// 5. The API calls this function when the player's state changes.
//    The function indicates that when playing a video (state=1),
//    the player should play for six seconds and then stop.
var done = false
function onPlayerStateChange(event) {
  if (event.data == YT.PlayerState.PLAYING && !done) {
    setTimeout(stopVideo, 6000)
    done = true
  }
}
function stopVideo() {
  player.stopVideo()
}

반복 애니메이션

gsap.to()

// 범위 랜덤 함수(소수점 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, //-1은 gsap라이브러리에서 무한반복을 의미함
    yoyo: true, //한번재생된 애니메이션을 다시 뒤로 재생
    ease: Power1.easeInOut,
    delay: random(0, delay),
  })
}

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