おすすめグッズや役立つ情報ブログ

Sedori Plan

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

スポンサーリンク

アドセンス

アドセンス

  • この記事を書いた人
  • 最新記事

toney

サイトの構築、プログラムを制作をしていますtoneyと申します。中小企業、個人のホームページの制作、更新作業も承ります。 筋トレで自分を追い込んでいくのが楽しみです。最近マラソンにはまって2年連続名古屋シティマラソンに出ました。

-Web

Copyright© Sedori Plan , 2018 All Rights Reserved.