Web制作の技術情報を中心に、WordPress、jQuery、CSSなどの情報など幅広く発信中。Web制作スキルや知識のアウトプットブログです。

Sedori Plan

Web

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

更新日:

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

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

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

Velocity.js

URLVelocity.js

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

Download

データを解凍します STEP2

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

データを解凍します

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

//サンプル1 コンテンツがバウンド(跳ねる)する
setInterval(function() {
  $("p.sample01")
    .velocity("callout.bounce")
	.delay(750)
}, 2000);

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

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

velocity.ui.js

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

エフェクト

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

HTMLを設置します STEP4

<div class="sec">
<h2 class="midashi">サンプル1 コンテンツがバウンド(跳ねる)する</h2>
<p class="sample01">あいうえおかきくけこ</p>
</div>

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

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

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://cdn.jsdelivr.net/velocity/1.1.0/velocity.min.js"></script>
<script src="http://cdn.jsdelivr.net/velocity/1.1.0/velocity.ui.min.js"></script>

まとめ

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

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

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

しん

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

-Web

Copyright© Sedori Plan , 2019 All Rights Reserved.