유튜브 배경에 깔기 / 플로팅 애니메이션 반복 / 랜덤함수

💻 유튜브 영상 배경으로 깔기

💻 가상클래스 padding-top으로 영역 만들기

💻 Youtube iframe API 사용법

💻 애니메이션 반복 (플로팅 이미지 만들기)

💻 랜덤함수를 이용한 애니메이션 반복

🚨 padding-top으로 부모 요소의 가로 너비 50%만큼의 높이 갖기

📍 youtube나 vimeo영상을 16:9비율로 가져올 때 padding-top:56.25%로 한다. 

.container {width: 100px;}
.container .item {width: 100%;height: 0;padding-top: 50%;}

 

🚨 가상클래스로 youtube 영역 만들기

현재 부모 요소(.youtube__area) 안에 자식 요소가 없는 상태이므로

가상클래스before를 이용하여 자식을 만들어 유투브 영역을 만들어 준다. (스타일 작업을 위한 요소이므로)

ㄴ 가상클래스는 inline요소다.

.youtube {
  position: relative;
}
.youtube .youtube__area {
  width: 1920px;
  background-color: #333; /*색상을 지정해 현재 위치를 알 수 있음*/
  position: absolute;
  left: -50%;
  margin-left: calc(1920px / -2);
}
.youtube .youtube__area::before {
  content: "";
  display: block;
  width: 100%;
  height: 0;
  padding-top: 56.25%;
}

 

 

🚨 youtube 전체영역에 투명한 어두운 배경 덮기

ㄴ 패턴 배경 + 투명도 30%

ㄴ 너비와 높이가 있어야 함

.youtube .youtube__cover {
  background-image: url('../images/video_cover_pattern.png');
  background-color: rgba(0,0,0,0.3);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

 

 

🚨 youtube iframe API

📍API JavaScript

(힌트)

1) 유튜브 영상이 출력될 위치에 요소를 생성

<!-- in HEAD --> <script defer src="./js/youtube.js"></script>

<!-- in BODY --> <div id="player"></div>

 

2) 객체데이터와 속성

videoId / playerVars(autoplay,loop,playlist) / events(onready 매개변수로 event)

- 내장플레이어

iframe 삽입에 대한 YouTube Player API 참조 문서  |  YouTube IFrame Player API

- 매개변수

YouTube 내장 플레이어 및 플레이어 매개변수  |  YouTube IFrame Player API

// 2. This code loads the IFrame Player API code asynchronously. --></script>
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() {
// <div id="player"></div>
new YT.Player('player', {
    videoId: 'An6LvWQuj_8', // 최초 재생할 유투브 영상 ID
    playerVars: {
        autoplay: true, //자동 재생 유무
        loop: true, //반복 재생 유무
        playlist: 'An6LvWQuj_8' // 반복 재생할 유튜브 영상 ID 목록   
    },
    events: {
        onReady: function (event) {
            event.target.mute() // 음소거
        }
    }

});
}

 

📍#player 스타일

#player {
  width: 100%;
  height: 100%;
  position: absolute;
  top:0;
  left:0;
}

 

 

 

🚨 유튜브 위로 플로팅되는 이미지 반복 애니메이션📌📌

(힌트)

floatingObject 함수에 selector를 인수로 gsap애니메이션을 실행시킨다. 

  ㄴ 속성 : y, repeat, yoyo, ease

  ㄴ gsap.to(요소, 시간, 옵션)

📍 gsap.to() property사용법

Docs

  <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>

// ANIMATION

function floatingObject(selector) {
  // gsap.to(요소, 시간, 옵션);
  gsap.to(selector, 1, {
    y: 20, //y축으로 00px 이동
    repeat: -1, // 무한 반복
    yoyo: true, // 애니메이션을 되감기해서 반복
    ease: Power1.easeInOut
  });
};
floatingObject('.floating');

 

 

🚨 랜덤함수📌📌📌

시간과 위치를 랜덤으로 변경해보자.

ㄴ 함수와 인수 간의 관계를 생각하며 작성한다.

// 범위 랜덤 함수(소수점 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: 20, //y축으로 00px 이동
      repeat: -1, // 무한 반복
      yoyo: true, // 애니메이션을 되감기하기
      ease: Power1.easeInOut,
      delay: random(0, delay)
    }
  );
};
floatingObject('.floating1', 1, 15);
floatingObject('.floating2', .5, 15);
floatingObject('.floating3', 1.5, 20);

 

 

 

📍SEASON SECTION CSS

/* SEASON-PRODUCT */
.season-product {
  background-image: url("../images/season_product_bg.jpg");
}

.season-product .inner {
  height: 400px;
}

/* 세번째 플로팅 아이콘 */
.season-product .floating3 {
  position: absolute;
  top: -200px;
  right:0;
}

.season-product .text-group {
  position: absolute;
  top: 110px;
  right: 100px;
}

.season-product .text-group .title {
  margin-bottom: 10px;
}

.season-product .text-group .description {
  margin-bottom: 15px;
}