반응형

스크롤 이벤트 2

AOS 라이브러리 사용법 알아보기(feat.스크롤 애니메이션)

단순한 정보를 제공하던 정적인 웹 화면에서 이제는 정보제공은 물로 다양한 인터렉션과 애니메이션 효과까지 적용된 웹 화면들이 늘어나고 있습니다. 오히려 정적인 웹 화면을 찾는 게 더 힘든 것 같다는 생각이 들 정도로 회사를 대표하는 대부분의 사이트에 들어가 보면 웹 사이트들이 크고 작은 애니메이션 효과가 적용되어 있습니다. 그 중 가장 많이 사용되는 효과는 단연 스크롤 애니메이션일거라 생각됩니다. 스크롤 애니메이션이란 웹 화면의 스크롤이 이벤트가 발생해야 하는 웹 화면의 위치에 도달하였을 때 미리 정의해놓은 이벤트 효과가 발생되는 효과를 말합니다 애니메이션 효과를 적용하는 방법은 대표적으로 인터섹션옵저버를 사용하거나 윈도우의 스크롤 값과 이벤트가 적용되어야 하는 타깃의 offset값을 비교해서 애니메이션을..

IT/Front-End 2022.12.06

GSAP 트윈맥스(Tween Max) 재대로 톺아보기

이전의 단순한 정보를 제공하던 동적이던 웹 화면은 이제는 더 이상 찾아보기 힘듭니다. 단순 정보만을 제공하는 웹 화면이라 할지라도 사용자의 시선을 끌어들이고 유저의 흥미와 재미요소를 위해서 점점 다양한 애니메이션이 적용된 웹 화면들이 생기고 있습니다. 그럼 웹 화면에 일반적으로 애니메이션 효과를 주기 위해선 어떻게 할까요? html로 화면을 구성할 때 가장 일반적인 방법은 Jquery를 사용하여 animate 효과를 주거나 Css3 속성을 사용하여 애니메이션 효과를 주는 방법입니다. 그럼 우리는 트윈맥스를 사용해야 하는 이유가 뭘까요? GSAP는 애니메이션 시퀀스에 관련해서 CSS의 keyframe과 Jquery의 animation 보다 더 정밀한 컨트롤을 할 수 있습니다. 또한 Jquery보다 가볍고 ..

IT/JavsScript 2022.12.01
반응형
//