名古屋のIT勉強会や最新IT情報をお伝えします

今回はホームページにCSS3アニメーションが簡単に設置できるjQueryのプラグインをご紹介します。
このプラグインを使うと、テキストのアニメーション効果を簡単に実現することが可能です。

設置は簡単ですが、動きはいろいろと種類があり、状況に応じていろいろなパターンを使い分けてみて下さい。

○ダウンロードはコチラから↓
CSS3 Animate it

CSS3 Animate it

１．CSS3 Animateのプラグインをダウンロードし、ファイルを解凍します。
この中で使用するのはjsフォルダとcssフォルダになります。

２．CSS3アニメーションを設置したいファイルにJquery本体とこのプラグイン、スタイルシートを読み込ませます。
・プラグイン　css3-animate-it.js
・スタイルシート　animations.css
実際はこんな感じで読み込ませてください。

<link rel="stylesheet" href="css/animations.css" type="text/css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src='js/css3-animate-it.js'></script>

３．アニメーション効果を実装する部分に次のソースを書きます。

<div class='animatedParent'>
<h2 class='animated bounceInDown'>見出し</h2>
</div>

親ブロックに.animatedParentクラス、実際にアニメーションを加える要素に.animated bounceInDownクラスを付け加えます。

４．bounceInDownの部分でいろいろな装飾のパターンを変えることができます。
サンプルはこちらで確認

また要素を順番に表示させたい場合は以下のソースを使います。

<div class='animatedParent' data-sequence='500'>
	<h2 class='animated bounceInDown' data-id='1'>It Works!</h2>
	<h2 class='animated bounceInDown' data-id='2'>This animation will start 500ms after</h2>
	<h2 class='animated bounceInDown' data-id='3'>This animation will start 500ms after</h2>
</div>

親ブロックのdata-sequence=’500’部分の500は表示されるスピードです。
子ブロックのdata-id=’1’の番号順に表示されます。

このようにアニメーションエフェクトの種類も多いので、いろいろと使い道がありそうですね。
ぜひ参考にしてみて下さい。

---