navbar animation-漸變效果transition
navbar animation while scrolling這是我在製作本網站navbar時,所運用到的css技巧。利用transition這項元素,可以完成很多簡單的動畫。
#步驟
- 產生一個
div
元素 (此範例class name為navbar
),在CSS給予position:fixed
的元素,以其來製作動畫。- 利用jquery的
.scroll()
Browser Events,於一定條件之下對navbar增減class (此範例增減的class name為color-change
)。- 利用
transition
即可以對background-color
height
做出圓滑動畫。
#Transiton 介紹
CSS Syntax
transition: [property] [duration] [timing-function] [delay]; default: all 0s ease 0s;
- property(屬性): 指定要套用上動畫的css元素。
- duration(動畫持續時間): 指動畫會持續幾秒鐘,0為default value。
- timing-function(變換函式):動畫的形式,這裡可以瞭解更多transition-timing-function。
- delay(延遲時間): 可以控制動畫多久之後才開始。
See the Pen navbar scroll animation by lichin-lin (@lichin-lin) on CodePen.
#參考
blog comments powered by Disqus