[youtube iframe api]

// 2. This code loads the IFrame Player API code asynchronously.

      var tag = document.createElement('script'); =>html에 script라는 요소의 변수 tag를 생성

 

      tag.src = "https://www.youtube.com/iframe_api"; => tag안의 script의 src를 작성

      var firstScriptTag = document.getElementsByTagName('script')[0]; => html에서 script태그들의 0번인 맨처음을 변수 firstScriptTag에 생성

      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); => html에서 firstScriptTag인 script태그의 맨처음의 부모 즉 header의 맨 앞인 firstScriptTag앞에 tag를 삽입 즉, 맨 처음 이 스크립트가 실행되도록 설정하는것

 

      // 3. This function creates an <iframe> (and YouTube player)

      //    after the API code downloads.

      

      function onYouTubeIframeAPIReady() {

        new YT.Player('player', { =>html에서 선언한 <div id="player></div>

          videoId: 'M7lc1UVf-VE',

playVars:{autoplay:true, loop:true, playlist:'비디오번호'}, =>재생옵션들(loop는 반복한 playlist로 영상번호가 함께 다시작성 되어야한다.)

          events:{

            onReady: function(event){ => 영상시작 준비가 되면 function 함수작동 / event 는 위 모든 영상 요소들이다.

              event.target.mute();

 

            }

        });

      }

 

─g[gsap로 이미지 반복움직이기]

 

function floatingObject(selector){

 

  gsap.to(selector, 1, {

    y:20, //y로 20움직이기

    repeat:-1, //반복횟수로써 -1로할 시 무한반복

    yoyo:true, //1회 끝날시 반대로 되돌림

 //+gsap easing 함수로 부드러운 처리를 할수있다.

 //+delay 로 시작 시간을 조절 할 수 있다.

  });

 

}

floatingObject('.floating') // 바로 작동시키기

 

 

[gsap로 이미지 랜덤 수치로 움직이기]

 

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

 

+ Recent posts