最終更新日 : 2019/05/27
jQueryのanimateと互換性のあるVelocity.jsの使い方についてまとめます。
本記事は、著者yutaがVelocity.jsについて勉強しつつ随時更新していく形にします。
1.Velocity.js
2.Velocity.jsの導入方法
2-1.Velocity.js公式サイトからダウンロードして使う
2-2.Velocity.jsのCDNを利用して使う
3.Velocity.jsの基本的なコーディング
3-1.Velocity.js単体でのコーディング
3-2.jQueryを併用したコーディング
4.Velocity.jsのCSSサポートについて
4-1.blur(画像のぼかしフィルター)
1.Velocity.js
・Velocity.jsは、jQueryのanimateと互換性のあるJava Scriptアニメーションライブラリです。
互換性があるので、animate関数で実装しているコードのanimate部分をvelocityに書き換えるだけでアニメーションの高速化が実現します。(※animateで複雑なアニメーションを実装している場合はその限りではありません。)
・Velocity.jsは、jQueryやtransit.jsなどのアニメーションライブラリと比較して動作が非常に軽く、スムーズなアニメーションを実現できます。
・Velocity.jsの特徴は以下をサポートしている点です。
- color アニメーション
- transform(変形)
- loop(繰り返し)
- easing(イージング)
- SVG
- scroll(スクロール)
2.Velocity.jsの導入方法
Velocity.jsの導入方法としては、公式サイトからVelocity.jsをダウンロードして使う方法と、CDNを利用する方法があります。個人的には、CNDを利用する方法が(ファイルを管理する必要がないので)おすすめです。
CDNとは、ライブラリをわざわざダウンロードしなくても、URLをコードに記述するだけでライブラリが使えるようになるものです。
2-1.Velocity.js公式サイトからダウンロードして使う
- 公式サイトにアクセスします。
- Download Velocityからダウンロードします。
- HTMLの</body>タグの前に<script>タグでダウンロードしたvelocity.min.jsを読み込みます。
公式サイトのリンクは、velocity.min.jsへのリンクになっていますが、その他のvelocity.jsなどをダウンロードしたい場合は、ソースコードがGitHubで公開されていますので以下を参照してください。
Julian Shapiro Velocity.js | GitHub
2-2.Velocity.jsのCDNを利用して使う
- Velocity.jsのCDNをホストしているサイトへアクセスします。
- いくつかURLがありますが、velocity.jsかvelocity.min.jsのURLをコピーします。
- HTMLの</body>タグの前に<script>タグで先ほどコピーしたURLを記述しvelocity.js(もしくは、velocity.min.js)を読み込みます。
3.Velocity.jsの基本的なコーディング
Velocity.jsは、jQueryと一緒に使うこともできますし、jQuery無しで使うこともできます。
jQueryと一緒に使えば、セレクタを$(‘#id’)などで簡単に指定できます。
まずは、Velocity.js単体でのコーディングを紹介して、その後にjQueryを併用したコーディングを紹介します。
3-1.Velocity.js単体でのコーディング
まずは、アニメーションさせる要素を以下のように記述します。
単に、div要素を宣言して、CSSでwidthとheightを100px、border-radius:50%、background-color:pinkを指定しているだけです。
See the Pen PveNMV by Yuta(株)LAplust CTO×フロントエンド (@yutric9) on CodePen.
次に、HTMLに<script>タグを追加してその中に以下の通り記述します。
※もちろん、Java Scriptファイルを用意してそちらに記述してもOKです。
Velocityの構文は、Velocity(要素,{プロパティ},{オプション});です。今回は、jQueryを使用していないので、document.getElementByIdを使ってアニメーションを効かせる要素をID名で取得しています。
上図のプロパティ部分の{}には、アニメーションさせたいCSSのプロパティと値を:(コロン)で繋げて記述します。
複数のプロパティを記述する場合は、,(カンマ)をつけてください。
最後に、オプションの部分の{}にアニメーションの継続時間を表すdurationや、アニメーションの繰り返し回数を表すloopを指定します。
オプションには以下のプロパティを指定できます。(よくわからないものは空欄にしています。)
| オプション | 説明 | 例 |
| duration | アニメーションの継続時間。ms指定もしくは、jQuery同様にslow、normal、fastで指定。 | duration:1000 duration:slow |
| easing | イージングの種類。 | easing:”swing” easing:”ease” |
| queue | キューの設定。falseにすると、他のアニメーションと並列して動作する(パラレルキュー)。カスタムキューという使い方もある(詳細はわかりません)。※パラレルキューやカスタムキューでは、loopやreverseが機能しません。 | queue:false |
| begin | アニメーションを開始した時に一度だけ実行されます。loopの場合でも、最初のループでのみ実行。 | |
| progress | コールバック関数を渡すと、アニメーション実行中に繰り返し実行されます。 | |
| complete | アニメーションを終了した時に一度だけ実行されます。loopの場合でも、最後のループでのみ実行。 | |
| display | noneやhiddenを指定することで、アニメーション終了後に対象要素を消したり、非表示にしたりできます。 | display:”none” display:”hidden” |
| visibility | ||
| loop | アニメーションを繰り返す回数。数値指定でその数だけ繰り返し、trueにすると無限ループになる。falseだと繰り返さない。 | loop:5 loop:true |
| delay | アニメーションを繰り返す時の間隔。ms指定。 | delay:500 |
| mobileHA |
これを実行すると以下のようになります。
See the Pen JqvKPO by Yuta(株)LAplust CTO×フロントエンド (@yutric9) on CodePen.
3-2.jQueryを併用したコーディング
要素の取得にdocument.getElementByIdなどを使わなくても良いし、結局animate以外でjQueryを使用するので個人的にはこちらのコーディングで良いんじゃないかと思っています。
アニメーションさせる要素を先ほどと同じピンク色の円形とします。
まず、jQueryを読み込みます。
※jQueryは、Velocity.jsよりも先に読み込ませてください。
<script>タグもしくは、Java Scriptファイルに以下のように記述します。
jQueryを併用したコーディングの場合は、Velocityの構文も若干異なります。
まず、jQueryスタイルの$(‘#ID’)もしくは、$(‘.CLASS’)でアニメーションを効かせたい要素を取得します。
次に、取得した要素に対して.velocity({プロパティ},{オプション});という構文で記述します。
上図の通りですが、$(‘#el’).velocity({プロパティ},{オプション});ですね。velocityのvが小文字になっていることに注意してください。
これを実行すると以下のようになります。
See the Pen byMwNg by Yuta(株)LAplust CTO×フロントエンド (@yutric9) on CodePen.
4.Velocity.jsのCSSサポートについて
Velocity.jsで利用できるCSSプロパティは、公式ページの「CSS Support」で確認できます。(下図参照)
background-colorなどもサポートしていますが、Velocity.jsではbackgroundColorと記述するのでプロパティ名が若干異なります。プロパティ名も上図のプルダウンメニューで確認できます。
4-1.blur(画像のぼかしフィルター)
CSSのfilter機能の一つであるblurがVelocity.jsにも一応付いてるようですが、
$(‘#id’).velocity({
blur: ‘5px’
},{duration:1000});
としても反応なし。
$(‘#id’).velocity({
filter: ‘blur(5px)’
},{duration:1000});
とするとブラウザがエラーを吐く。しかしながらこのコードのままで、
#id{ filter: blur(0px); }
をCSSに記述してあげると、blurのアニメーションが効く。謎い。
ブラウザの対応状況も微妙なのでとりあえずは使わない方が良いかなと。
本記事は、随時更新しますので参考になった方はSNSシェアやブックマークなどよろしくお願いします。
ブログランキングに参加していますので、僕のモチベアップの為にもバナーを押していただけると嬉しいです！(※別タブで開きます)
