유튜브 영상 배경 - 반복 애니메이션
랜덤 수치를 활용한 플로팅 요소를 제작한다. 총 세 개이나, 하나는 위치상 다음 섹션으로 이동시켰다.
코드
HTML
<img class="floating floating1" src="./images/floating1.png" alt="Icon" />
<img class="floating floating2" src="./images/floating2.png" alt="Icon" />
CSS
.youtube .floating1 {
position: absolute;
top: 50px;
left: 0;
}
.youtube .floating2 {
position: absolute;
top: 350px;
left: 150px;
}
JS
// 범위 랜덤 함수(소수점 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: size,
repeat: -1, // 무한 반복, 라이브러리에서 지원하는 기능
yoyo: true, // 실행한 애니메이션을 다시 거꾸로 실행해서 돌아감
ease: Power1.easeInOut,
delay: random(0, delay)
});
};
floatingObject('.floating1', 1 , 15);
floatingObject('.floating2', 0.5 , 15);
floatingObject('.floating3', 1.5 , 20);
Author And Source
이 문제에 관하여(유튜브 영상 배경 - 반복 애니메이션), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@rkde8938/유튜브-영상-배경-반복-애니메이션저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)