자바스크립트 효과 적용하기 (GSAP, TweenMax)

// opacity:0 으로 설정해 둔 요소를 보이게 만드는 효과 

 

$(document).ready(function() {

const title=$(".title");       //class명 title인 애를 const 안에 title로 담아둠

title.addClass("visible");      //title에 보이는 효과를 더함

});

 

 

 

// 안보이던 요소가 점점점 선명해지게 하는 효과

TweenMax.fromTo(

  ".main_img",

  0.6, { opacity: 0 }, { opacity: 1, delay: 0.6 }

)

 

--> 0.6 초동안 이벤트를 발생하게 하고 이벤트 발생 전 0.6초의 딜레이시간을 갖는다.

 

 

// 다중 요소에 한번에 효과 적용하고 차례대로 이벤트 주는 효과

TweenMax.staggerTo(

  ".car",

  0.4, { x: -50, opacity: 1, delay: 1 }, 0.5

)

 

--> car라는 클래스명을 가진 애들이 순서대로

•       0.4초동안 
•       x축으로 -50만큼 이동하고
•       opacity는 원래 값에서 (css에서 적용해준 값에서) 1로 변하는데 
•       새로고침 후 1초의 시간후에 변한다
•       전 .car 요소가 변하고 0.5초 후에 다음 요소가 변한다.

※ TweenMax는 접속하자마자 실행됨.

※ TimelineMax는 코드순서대로 실행됨.

 

 

// 다중 요소에 한번에 효과 적용하고 차례대로 이벤트 주는 효과

--> opacity가 1로 변하는 이벤트를 1초동안 먼저 발생시키고

--> y축으로 움직이는 이벤트를 실행한다.

• yoyo 는 갔다가 왔다가 왕복을 반복하는 것.
• --> 그렇지 않으면 갔다가 끝나고 다시 시작했던 지점에서 다시 시작함
• repeat: -1은 무한반복
• ease는 모션속도를 조절함 easeIn은 점점 가속도 붙는 것.
• --> 자세한 내용은 greensock.com/get-started

Getting Started with GSAP

 

 

 

 

깃허브 보러 놀러오세요 👇 (맞팔환영)

https://github.com/Joowon0220

Joowon0220 - Overview