Web

簡単にアニメーションを実装できる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個つかってサンプルを作ってみました。難しい記述もいらないのでコンテンツをアニメーションで動かしたいときには使えます!

スポンサーリンク
  • この記事を書いた人
  • 最新記事
しん

しん

Webサイトの構築、プログラムを制作しています。中小企業、個人のホームページの制作、更新作業も承ります。 仕事以外はバスケをしたり、ジムで筋トレしております。 映画/海外ドラマ/プログラミング/バスケ/トレーニング/カナダ/カメラ・写真

-Web

© 2020 Sedori Plan