BLOG
[JavaScript]アニメーションプラグインVelocity.js
2015/10/11
Velocity.jsとはアニメーションを高速化してくれるプラグインです。
jQueryの$.animate()と同じAPIを使用したアニメーションエンジンです。
animate()との互換性もあり、呼び出しをvelocity()と書き換えても動作するようです。
公式サイト
http://julian.com/research/velocity/
基本的な使い方
必要なファイル読み込み
jQeryとVelocity.jsを読み込みます。
jQueryを読み込んでいなくても使用できますが使用しない場合はIE8はサポート対象外です。
|
1 2 |
<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script> |
記述方法
|
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 31 32 33 |
<style> #sample_01_wrap { height: 300px; } #sample_01 { width: 100px; height: 100px; background: #000; } </style> <div id="sample_01_wrap"> <div id="sample_01"></div> </div> <script> $('#sample_01').velocity( { width: '300px', height: '300px', backgroundColor: '#ccc' }, { duration: 800, // アニメーション時間 easing: 'ease-in', // イージング : linear, swing, ease, ease-in, ease-out, ease-in-out, [200, 10] begin: function(){ console.log('start'); }, // or null progress: null, // 進捗率 complete: function(){ console.log('end'); }, // or null loop: 100, // 繰り返しフラグ : or false delay: 1000, // 開始遅延時間 display: false // 表示・非表示 : false, 'none', 'block' } ); </script> |
その他
|
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 |
<script> // メソッドチェーンも可能です $('#sample_01').velocity( { width: '300px' }, { duration: 800, easing: 'ease-in' } ).velocity( { height: '300px' }, { duration: 800, easing: 'ease-in' } ); // 逆再生もできます。 $('#sample_01').velocity( { width: '300px' }, { duration: 800, easing: 'ease-in' } ).velocity("reverse"); </script> |
バウンドの例
パターン1
|
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 |
<style> #sample_02_wrap { position: relative; height: 300px; } #sample_02 { width: 100px; height: 100px; background: #000; position: absolute; top: 50px; } </style> <div id="sample_02_wrap"> <div id="sample_02"></div> </div> <script> $('#sample_02').velocity( { top : '150px' }, { duration : 1000, easing : [700, 15], loop: 100, delay : 100 } ); </script> |
パターン2
|
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 31 32 33 34 |
<style> #sample_03_wrap { position: relative; height: 300px; } #sample_03 { width: 200px; height: 200px; background: #000; position: absolute; top: 50px; left: 0; } </style> <div id="sample_03_wrap"> <div id="sample_03"></div> </div> <script> $('#sample_03').velocity( { top : '100px', left : '50px', width: '100px', height: '100px' }, { duration : 1000, easing : [700, 10], loop: 100, delay : 100 } ); </script> |
Tag:JavaScript プラグイン