gsap3 EFFECT | MOUSE | 배경 조명 효과주기 mouseEffect | 배경 조명 효과 오늘의 목표 👉🏻 마우스 커서 움직임에 따라 배경 사진에 조명을 비추는 느낌으로 효과주기 1. 사이트 구조 살펴보기 CSS 살펴보기 span으로 감싼 글자는 키워드로 색깔을 다르게 주었습니다. cursor 디자인도 따로 조명을 비추는 듯한 느낌으로 디자인 했습니다. HTML 살펴보기 영화 '니모를 찾아서'에 나오는 명언을 넣어주었습니다. The best moment suddenly comes. 최고의 순간은 갑자기 찾아오는 거야. 2. script 살펴보기 📌 cursor에 움직임에 따라 배경이 컬러로 보일 수 있는 이유 cursor 자체에 background-image를 넣고 위치와 크기를 맞춰준 다음 fix시켜 마우스의 움직임에 따라 보일 수 있도록 설정해주었.. 2022. 9. 22. EFFECT | MOUSE | 마우스 따라다니기(GSAP) mouseEffect | 마우스 따라다니기(GSAP) 오늘의 목표 👉🏻 GSAP를 활용해 더 부드럽게 마우스 효과 설정하기 1. 사이트 구조 살펴보기 CSS 살펴보기 HTML 살펴보기 Success isn't permanent, and failure isn't fatal. 성공은 영원하지 않고, 실패는 치명적이지 않다. 2. script 살펴보기 원본 소스 보기 실제 사이트 보기 2022. 9. 19. JAVASCRIPT | GSAP 🤔 GSAP, 그게 뭔데? GSAP_The GreenSock Animation Platform; CSS나 jQuery등을 사용해 애니메이션 효과를 구현하는데 있어 번거로움과 복잡함을 GSAP를 통해 훨씬 간편하게 설정이 가능합니다. 세세한 부분까지 설정이 가능하며 라이브러리 참고가 가능하여 여러 웹사이트에서 사용하고 있습니다. 🤓 GSAP, 사용해볼까? 위의 사진처럼 공식 사이트에서 설치하거나 CDN을 통해 사용할 수 있습니다. 📄 SLIDER 효과_좌로 움직이는 이미지를 통해 확인해보자 ! 2022. 8. 29. 이전 1 다음
