비디오 태그 및 GSAP

비디오 배경

html

<video src="vid/bg.mp4" autoplay muted loop></video>

css

  video{

    width: 100%;

    height: 100%;

    object-fit: cover;

    position: absolute;

    top: 0px;

    left: 0px;

  }

애니메이션 효과 및 시간차 효과

js

const logo = document.querySelector("header h1");

const menu = document.querySelectorAll(".gnb li");

const bgVideo = document.querySelector("video");

const title = document.querySelector(".textBox h2");

const btnOpen = document.querySelector(".btnOpen");

let isOn = null;

// scss에서 초기 위치 값을 수정하는 것이 아닌 set으로 초기위치값 변경

gsap.set(logo, {y:-100, opacity:0})

gsap.set(menu, {y:-100, opacity:0})

gsap.set(bgVideo, {opacity:1})

gsap.set(title, {y:-100, opacity:0})

gsap.set(btnOpen, {scale:3, opacity:0} )

gsap.to(logo, {y:0, opacity:1, duration:1, delay:2})

gsap.to(menu, {y:0, opacity:1, duration:1, delay:2, stagger:0.2})

// gsap.to(menu[0], {y:0, opacity:1, duration:1, delay:2})

// gsap.to(menu[1], {y:0, opacity:1, duration:1, delay:2.5})

// gsap.to(menu[2], {y:0, opacity:1, duration:1, delay:3})

// gsap.to(menu[3], {y:0, opacity:1, duration:1, delay:3.5})

// gsap.to(menu[4], {y:0, opacity:1, duration:1, delay:4.5})

gsap.to(bgVideo, {opacity:0.5, duration:5} )

gsap.to(title, {y:0, opacity:1, duration:1, delay:1} )

gsap.to(btnOpen, {scale:1, opacity:1, duration:1, delay:1.5} )

바운스 효과

html

<a href="#" class="btnOpen">VIEW DETAIL</a>

css

    .btnOpen{

      display: inline-block;

      padding: 5px 20px;

      border: 1px solid white;

      font-size: 1rem/1 'arial';

      color: white;

      &:hover{

        animation: bouncing 0.6s ease-in-out infinite;

      }

@keyframes bouncing{

  0% {

    transform: scale(1);

    opacity: 1;

  }

  50% {

    transform: scale(1.2);

    opacity: 0.5;

  }

  100% {

    transform: scale(1);

    opacity: 1;

  }

}

타임라인으로 순서대로 동작

const tl = gsap.timeline();

gsap.to(bgVideo, {opacity:0.5, duration:5} )

tl.to(title, {y:0, opacity:1, duration:1, delay: 1} )

tl.to(btnOpen, {scale:1, opacity:1, duration:1} )

tl.to(logo, {y:0, opacity:1, duration:1})

tl.to(menu, {y:0, opacity:1, duration:1, stagger:0.2})

tl.to(line, {width:"100%", duration:1} )

tl.to(sns, {y:0, duration:0.5, stagger:0.2} )

tl.to(copyright, {y:0, duration:0.5} )

태그 안에 있는 텍스트를 파싱해서 모션 넣기

1. 파싱할 텍스트 가져오기

const slogan = document.querySelector(".textBox h2");

2. 함수 호출

splitText(slogan);

3. 파싱된 태그 가져오기

const letters = document.querySelectorAll(".textBox h2 span");

4. 모션

gsap.set(letters, {opacity:0, scale:3})

tl.to(letters, {scale:1, opacity:1, duration:1, delay: 1, stagger: 0.1} )

※ 함수

const splitText = (domEl) => {

  // tag로 구성할 빈 문자열 생성

  let tags = "";

  //파라미터로 전달 받은 돔 요소의 텍스트 추출

  const text = domEl.innerText;

  // for of 반복문 활용해서 문자값을 반복돌며 <span>문자</span>형식으로 담아줌

  for(let el of text) tags += `<span style="display:inline-block;">${el}</span>`;

  //최종적으로 완성된 태그 문자열을 파라미터로 전달받은 요소에 바꿔치기

  domEl.style.textWrap = "nowrap";

  domEl.innerHTML = tags;

};