簡単にアニメーションを実装できるVelocity.jsを使ってみた(サンプル付き)

簡単にアニメーションを実装できるVelocity.jsを使ってみた(サンプル付き)

簡単にコンテンツをアニメーションで動かせたらいいなと思って探していたら「速くて、軽くて使いやすい。」とネットで評判になっていたVelocity.jsがありました。今回はVelocity.jsを使ってみます。

ファイルをダウンロード STEP1

Velocity.js

URLVelocity.js

このページの右サイドバーにある「Download」からファイルをダウンロードしてください。

Download

データを解凍します STEP2

ダウンロードしたファイルを解凍して中身を確認します。

データを解凍します

HTMLに実際に動くjsコードの記述を書きます STEP3

velocity(“callout.bounce”) この記述でコンテンツをバウンドさせます。
※最後の「, 2000」は2秒後に繰り返すと言う記述です。

どんなエフェクトがあるの?

velocity.ui.js

velocity.ui.js このファイルを開いて中のソースを確認します。

エフェクト

velocity(“callout.bounce“)中に書かれている「callout.bounce」を変えれば簡単にアニメーションエフェクトが作れます。

HTMLを設置します STEP4

簡単なHTMLで問題ないです。

Velocity.jsのjsファイルをHTML付けます STEP5

まとめ

[サンプル] 簡単にアニメーションを実装できる

Velocity.jsのアニメーションのエフェクトは全部で約60種類もあります。そのうち10個つかってサンプルを作ってみました。難しい記述もいらないのでコンテンツをアニメーションで動かしたいときには使えます!

簡単にアニメーションを実装できるVelocity.jsを使ってみた(サンプル付き)

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


*