>  > サイトにアニメーションを設置するjQueryプラグイン

サイトにアニメーションを設置するjQueryプラグイン

2014.08.04

LINEで送る
Pocket

CSSアニメーション

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

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

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

CSS3 Animate it

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

2.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>

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

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

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

4.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’の番号順に表示されます。

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

LINEで送る
Pocket


WRITER

ライター紹介

ネッタン編集メンバー

JunKimura
木村純
ネッタンサイトの管理人です。

得意のジャンル:WEBマーケティング、SEO

Website:http://istyle.info/
Twitter:https://twitter.com/kimura_j
Facebook:
Google+:

NEW TOPICS

最新記事

カテゴリ一覧

ネッタンTwitter

最新IT情報メルマガ

MENU

サイトについて