用Velocity.js來玩動畫吧!

by on # javascript

CDN

<!-- v1.5.1 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.5.1/velocity.min.js"></script>
<!-- v2.0.5 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/2.0.5/velocity.min.js"></script>

參考

筆記

  • 用過 jQuery 的 $.animate(),將會很容易上手。
  • jQuery 的 animate 不支援 translateX 與 backgroundColor 屬性,但 Velocity.js 可以!
  • 可支援到 IE8 和 Android 2.3。
  • transit 這個動畫庫效能太差,可直接跳過,免學!
  • v1 與 v2 在 transform 的使用方式有些差異, v1 可以直接下 translateX , 但 v2 要 transform: translateX
  • velocity 內 backgroundColor 只能打色碼 ,如果打顏色文字會無效。
  • v2 還在 Beta, issue 不少,先暫時別用。
  • TimelineMax 搭配 tweenMax 用。
  • 引入了 jQuery , Velocity 前面需加上$.,即 $.Velocity ,或者加入下面這段Code
if (window.jQuery) { var Velocity = $.Velocity; } 

CodePen - Velocity.js(v1) - Basic

CodePen - Velocity.js(v1) - Rotate

CodePen - Velocity.js(v1) - Scroll

javascript, Velocity.js
comments powered by Disqus