[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))
}
'html과CSS 고급' 카테고리의 다른 글
2021-07-22 Part(1)_ch(10)_(30-32) 스크롤버튼으로 화면 맨위로 올리기 (0) | 2021.07.22 |
---|---|
2021-07-20 Part(1)_ch(10)_(27-29) 이미지 스크롤에 따라 나타나기 (0) | 2021.07.21 |
2021-07-19 Part(1)_ch(10)_(21~23) padding-top 1920*1080 (0) | 2021.07.19 |
2021-07-17 Part(1)_ch(10)_(17~20) Swiper(슬라이드,pagination,navigation) (0) | 2021.07.17 |
2021-07-16 Part(1)_ch(10)_(13~16) (0) | 2021.07.16 |