1. Youtube iframe API
16:9의 화면 만들기
<html />
<div class="container">
<div class="item"></div>
</div>
<css />
.container {
width: 500px;
background-color: royalblue;
}
.container .item {
width: 100%;
height: 0;
padding-top: 56.25%;
}
https://developers.google.com/youtube/iframe_api_reference?hl=ko
iframe 삽입에 대한 YouTube Player API 참조 문서 | YouTube IFrame Player API | Google Developers
애플리케이션에 YouTube 플레이어를 삽입합니다.
developers.google.com
<javascript />
var tag = document.createElement("script");
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName("script")[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
function onYouTubeIframeAPIReady() {
new YT.Player("player", {
videoId: "An6LvWQuj_8", // 최초 재생할 유튜브 영상 ID
playerVars: {
autoplay: true, // 자동 재생 유무
loop: true, // 반복 재생 유무
playlist: "An6LvWQuj_8", // 반복 재생할 유튜브 영상 ID 목록
},
events: {
onReady: function (event) {
event.target.mute(); // 음소거
},
},
});
}
onYouTubeIframeAPIReady 함수는 YouTube IFrame Player API에서 사용하는 이름이라 다르게 지정하면 동작하지 않는다.
playerVars의 인자에 대해 더 자세히 알려면?
2. 반복 애니메이션
<javascript />
// 흔들거리는 이미지
function floatingObject(selector) {
gsap.to(selector, 1, {
y: 20, // y축으로 20만큼
repeat: -1, // 무한 반복
yoyo: true, // 요요처럼 왔다 갔다
ease: Power1.easeInOut, // Easing에 대해 더 알아보자!
delay: 1, // 1초 뒤에 시작
});
}
floatingObject(".floating");
2.1. Easing
애니메이션 효과를 더욱 자연스럽게 해주는 옵션이다.
그래프를 통해 어떤 느낌인지 직접 느낄 수 있다.
2.2. gsap.to()
gsap.to()를 지금까지 간단하게 사용했지만, 이처럼 많은 옵션이 있으니 공식 문서를 읽고 활용하자.
영어라고 싫어하지 말고.. 문서를 읽는 습관을 들이자!
<javascript />
// 흔들거리는 이미지
function floatingObject(selector, delay, size) {
gsap.to(selector, random(1.5, 2.5), {
y: size,
repeat: -1,
yoyo: true,
ease: Power1.easeInOut,
delay: random(0, delay),
});
}
// 범위 랜덤 함수(소수점 2자리까지)
function random(min, max) {
// `.toFixed()`를 통해 반환된 문자 데이터를,
// `parseFloat()`을 통해 소수점을 가지는 숫자 데이터로 변환
return parseFloat((Math.random() * (max - min) + min).toFixed(2));
}
floatingObject(".floating1", 1, 15);
floatingObject(".floating2", 0.5, 15);
floatingObject(".floating3", 1.5, 20);
자연스러운 애니메이션을 위해 요소 별로 다른 인자를 받고, 각자 다른 애니메이션이 실행되도록 했다.
'카카오테크캠퍼스 > 선택과정' 카테고리의 다른 글
| [카카오테크캠퍼스 선택과정] 스타벅스 예제: 3D 애니메이션 (0) | 2023.05.07 |
|---|---|
| [카카오테크캠퍼스 선택과정] 스타벅스 예제: 고정 이미지 배경 (0) | 2023.05.07 |
| [카카오테크캠퍼스 선택과정] 스타벅스 예제: 요소 슬라이드 (0) | 2023.05.07 |
| [카카오테크캠퍼스 선택과정] 스타벅스 예제: 순차적 애니메이션 (0) | 2023.05.07 |
| [카카오테크캠퍼스 선택과정] 스타벅스 예제: 헤더와 드롭다운 메뉴 (0) | 2023.05.07 |
