Day2 : 스타벅스 웹사이트 만들기 / 반복 애니메이션(GSAP)

HTML/CSS/JS로 스타벅스 웹사이트 만들기

 

개요

 

프로젝트명 : HTML/CSS/JS로 스타벅스 웹사이트 만들기

강의 : 패스트캠퍼스 프론트엔드

분류 : 클론코딩

주요 강의 내용

- html : basic html + font, favicon

- css : basic css, 가상 클래스, bem

- js : basic js, swiper(슬라이드), toggle, gsap.to(순차적 애니메이션), Youtube iframe APII 등

사용 툴 : HTML, CSS, JavaScript

 

패스트캠퍼스 강의를 정리한 내용으로, 개인공부 후 기록하기 위한 목적임으로 내용 상에 오류가 있을 수 있습니다.

 

---

DAY 2
: 반복 애니메이션(GSAP)

 

반복 애니메이션(GSAP)

* view

 

저 동그라미 세 개가 둥둥 떠 다니는 듯한 효과, 반복적으로 애니메이션을 재생하는 방법

 

---

* html code

 

    <!-- Youtube Video -->
    <section class="youtube">
      <div class="youtube__area">
        <div id="player"></div>
      </div>
      <div class="youtube__cover"></div>
      <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>
    </section>

* css code

.youtube .inner {
    height: 700px;
}

.youtube .floating1 {
    position: absolute;
    top: 50px;
    left: 0;
}

.youtube .floating2 {
    position: absolute;
    top: 350px;
    left: 150px;
}

.youtube .floating3 {
    position: absolute;
    bottom: -200px;
    right: 0;
}

 

html / css 코드는 간단하다.

css 코드로 위치를 잡아주고, position은 absolute로 고정시켜준다.

 

---

* js code

// 반복 애니메이션
function random(min, max) {
    return parseFloat((Math.random() * (max-min) + min).toFixed(2))
}


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) // 몇 초 뒤에 애니메이션을 실행하겠다. (지연 옵션)
    });
}

floatingObject('.floating1', 1, 15);
floatingObject('.floating2', .5, 15);
floatingObject('.floating3', 1.5, 20);

 

GSAP (GreenSock Animation Platform)

: 웹에서 애니메이션 속성을 조금 더 디테일하게 다룰 수 있는 자바스크립트 라이브러리

 

gsap.to()

: 요소의 끝 점까지의 애니메이션 속성을 지정

 

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

- selector 가 random 시간 동안 애니메이션이 처리된다.

/ 옵션: 실행되는 애니메이션 /

- y: 수직 아래로 size 만큼

- repeat: -1 무한반복

- yoyo: true 요요처럼 한 번 재생된 애니메이션은 다시 뒤로 재생

- delay: 지연 옵션

- ease: 부드러운 애니메이션 효과

https://greensock.com/docs/v2/Easing