Lichin

contact: [email protected]

I am

這是我在製作本網站navbar時,所運用到的css技巧。利用transition這項元素,可以完成很多簡單的動畫。


#步驟

  1. 產生一個 div 元素 (此範例class name為 navbar),在CSS給予 position:fixed 的元素,以其來製作動畫。
  2. 利用jquery的 .scroll() Browser Events,於一定條件之下對navbar增減class (此範例增減的class name為 color-change)。
  3. 利用 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.

#參考

  1. css-trick transition
  2. jquery .scroll()
  3. 30+ Scroll animation


blog comments powered by Disqus

Published

22 February 2016

Tags

title

yo! trying to alert