Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 |
Tags
- z-index
- togle
- form
- transform
- scss
- bootstrap
- animate
- TRANSITION
- vw
- display:none
- css animation
- absolute
- 이벤트 버블링
- input
- margin
- CSS
- Carousel
- 레이아웃
- css selector
- setTimeout
- JQuery
- float : left
- position : fixed
- Position
- navbar
- 밀리초
- val()
- EventListner
- sass
- hover
Archives
- Today
- Total
목록scrollTop (1)
Simple Is Best

이번 포스팅에서는 스크롤 애니메이션에 대해서 배워보도록 하겠습니다. 오늘의 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