GSAP2 마우스 이펙트 - 마우스 따라다니기(GSAP) 마우스 효과 마우스 이펙트 - 마우스 따라다니기(GSAP) 오늘은 GSAP를 사용해서 마우스 커서를 부드럽게 따라다니는 효과를 만들어보겠습니다. 결과 원본 소스 보기 원본 사이트 보기 HTML 작성 원 두개가 따라다니게 만들것이므로 커서1,커서2를 만들어주고 글이 나올 박스를 하나 만들어줍니다. 소스 보기 There is no masterpiece made by a lazy artist. 게으른 예술가가 만든 명작은 없다. CSS 작성 커서를 없앤 후 따라다닐 원을 만들어줍니다. 그리고 active1,2,3이 붙었을 때 변하는 모양을 디자인 해줍니다. 소스 보기 /* mouseType */ .mouse__wrap { width: 100%; height: 100vh; display: flex; align-.. 2022. 9. 18. CSS - GSAP 알아보기 GSAP 알아보기 GSAP은 웹 브라우저에서 탁월한 애니메이션을 구현하기 위한 자바스크립트 라이브러리입니다.GSAP은 기존의 CSS 애니메이션과 JavsScript 애니메이션보다 사용성이 편하고, 프론트엔드 개발자와 디자이너들이 쉽게 사용할 수 있는 타임라인 기반의 애니메이션 자바스크립트 라이브러리입니다. CSS와 바닐라 자바스크립트만으로도 동적인 화면을 만들 수 있지만 GSAP은 세밀한 움직임과 동작의 연속성을 훨씬 간편하게 설정할 수 있습니다. 사용방법 GASP홈페이지에서 gsap.min.js를 가져와서 사용할 수 있습니다. 예시 아래의 예시는 코드팬에 GSAP에서 아주 잘 만든 예제이기에 한번 보시라고 가져왔습니다. 이처럼 GSAP는 자바스크립트에서 만들 수 없는 부드럽고 섬세한 애니메이션을 훨신 .. 2022. 8. 29. 이전 1 다음
