스타벅스 클론(9) - 유튜브 영상배경

유튜브 영상을 페이지에 올려보도록 하겠습니다.

동영상 위에 뜨 있는 무언가도 작업할 예정입니다.

 

유튜브 영상 삽입

우선 동영상 비율부터 만들어보겠습니다.

동영상 비율이 흔히 16:9죠. 요소 두개로 간단하게 만드는 방법이 위와 같습니다.

부모요소인 .container에는 너비만 입력합니다.

자식요소인 .item은 부모요소의 너비를 100%를 이어받으며, 높이는 0입니다.

그리고 padding-top 위의 내부여백으로 56.25%를 입력하면

시각적으로 16:9 비율이 나옵니다.

 

동영상 삽입한 공간을 만들어봤습니다.

 

css도 어느정도 다듬고 진행해보겠습니다.

 

기본 틀을 다 만들고 youtube iframe api를 사용해서 유튜브 동영상 삽입해보겠습니다.

youtube iframe api 사용 참조

 

js파일을 따로 만들었습니다.

주석처리했듯이 속성과 값을 어느 정도 이해할 것이라 생각합니다.

사용법은 해당 api문서를 참조해서 사용한 거라 어렵지 않았습니다.

주의할 점: html파일 head부분에 script태그 따로 해서 js파일 연결을 해야 합니다.

 

css파일입니다.

동영상 재생하는 부분에 부모요소 전체 영역이라

그대로 이어받으면서 사용하면 됩니다.

 

 

애니메이션

html에 이미지 3개를 추가했습니다.

위치를 잘 배치해줬습니다.

여기서 floating3은 아래부분이 짤립니다.

왜냐면, .youtube에 overflow속성이 hidden으로 지정했습니다.

이 부분은 추후 수정하겠습니다.

랜덤 숫자를 계산해주는 함수를 먼저 만들었습니다.

그리고 floatingObject, 3개의 이미지를 컨트롤하는 함수도 만들었습니다.

floatingObject함수에서 3개의 인수를 할당해야됩니다.

각각 요소, 지연시간, 움직이는 폭입니다.

 

애니메이션 효과면 gsap 라이브러리를 피할 수 없죠.

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

 사용법대로 작성했습니다.

 

y는 y축입니다. 나중에 함수에 할당한 size와 같은 값으로 설정했습니다.

repeat는 -1이면 무한반복입니다.

yoyo는 반대로 진행한다는 뜻이고요.

ease: Power1.easeInOut이 Easing함수입니다. Easing함수를 찾아서 효과를 보고 원하는 값을 넣었습니다.

delay는 몇 초 후 애니메이션 시작인지 알려줍니다.