목록scroll animation (1)

Simple Is Best

13. [jQuery] Scroll Animation

이번 포스팅에서는 스크롤 애니메이션에 대해서 배워보도록 하겠습니다. 오늘의 Target 스크롤 이전에는 최상단의 navbar 를 웹사이트의 대문과 색을 동일하게 유지한다. 스크롤 이후에는 최상단의 navbar 를 회색의 배경에 글씨를 검은색으로 만들어주고 오른쪽에 위치한 Our Products의 font-size 를 줄여준다. [스크롤 이전] [스크롤 이후] 애니메이션 제작 방법 1. CSS로 애니메이션 동작 이전의 화면을 미리 제작한다. 2. CSS로 애니메이션 동작 이후의 화면을 미리 제작한다. 3. CSS로 transition : all 1s; 로 변경할 때 몇 초에 걸려서 변경할 지 설정한다. 4. 자바스크립트 혹은 제이쿼리로 언제 변경할 지 변경point(Trigger) 를 설정한다. HTML ..
JavaScript & JQuery 2021. 7. 31. 15:48
이전 Prev 1 Next 다음