반응형 효과2 [HTML/CSS] cubic-bezier()를 통해 속성 변화를 조절해 보자 : 변화에 변화를 주자 cubic-bezier() 함수는 transition과 같이 속성에 변화를 나타내주는 속성에 추가적인 효과를 더해준다. 아래 예시를 보자. See the Pen Untitled by me_in_sk (@sleepyMS) on CodePen. 위의 실행 결과를 살펴보자. 모든 게이지는 변화하는 과정이 다를 뿐, 결과적으로 과정이 완료되는 시점은 모두 동일한 것을 볼 수 있다. 이처럼 transition의 속성에 의해 변화하는 시간이 같더라도, cubic-bezier() 함수에 의해 각각 다른 효과를 줄 수 있다. 그렇다면 원하는 효과를 찾기 위해서는 cubic-bezier() 함수의 값을 일일이 조정하며 원하는 값을 찾아야 하는 걸까? cubic-bezier.com cubic-bezier.com 이에 위의.. 2023. 6. 23. [HTML/CSS/JS] GSAP로 애니메이션 효과 만들기 : 시간순으로 다양한 애니메이션 효과를 만들어 보자 feat. timeline 이번 포스팅에서는 GSAP의 사용법에 대해 알아보는 시간을 가져보도록 하자. GSAP는 보다 다양하고 복잡한 애니메이션을 구현하기 위한 도구로써, 보다 자유로운 애니메이션을 제공할 수 있도록 도움을 준다. See the Pen Untitled by me_in_sk (@sleepyMS) on CodePen. GSAP를 불러와 보자 gsap - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers GSAP is a JavaScript library for building high-performance animations that work in **every** major browser. Anima.. 2023. 6. 11. 이전 1 다음 반응형
