CSSだけで簡単にクリックエフェクトなどをアニメ化する
All Animation CSS3 オール・アニメーションCSS3とは?
スタイルシートフレームワークで、簡単にクリックやタップエフェクトをアニメーション化する方法だ。
HTMLにclassをつけるだけで実装できるので簡単。プログラミングの知識がなくてもできるので嬉しい。
超簡単な導入方法を紹介しよう。
オールアニメーションCSS3の導入方法
1. CSSとjQueryをダウンロード
右クリックで保存しよう。
all-animation.cssは「通常版」と「ミニファイド版」の2種類あるが、どちらでもOK。
・all-animation.css←通常版
・all-animation.min.css←minified版(軽量版)
・position.css
↑画像のサイズや表示位置を変える時に編集する。
・jquery-1.11.1.min.js
・bootstrap.min.js
・main.js
なお、.jsファイルは「.txt」としているので、ダウンロードしたら拡張子を「.js」に変更しておこう。ファイル名も確認しておこう。
・アーカイブ版 .zip (導入サンプルまとめてダウンロード)
all-animation.zip
2. CSSとjsファイルの読み込み
<head> と </head> の間で、cssを読み込もう。
次に、</body>の直前辺りで、js ファイルを読み込もう。
これで読み込みは完成。あとは画像にclassをつけたり、するだけでアニメーションエフェクトが実装できる。
3. 画像のアニメーションエフェクト
画像アニメーションのデモページはこちら
画像の<img>のタグを div で囲んで、class にエフェクトを記入すると、その画像にアニメーションエフェクトをつけることができる。
記述例:
<div class="dance"><img src="img/画像名.jpg" /></div>
使用可能クラス一覧(エフェクトのデモはデモページを参考に。)
エフェクト名 |
クラス名 |
ダンス |
dance |
回転(ジャーナル) |
journal |
鼓動(パルス) |
pulse |
ゆっくり鼓動 |
pulse-slow |
ジャンプ |
japm |
4点 |
four-rock |
上バウンド |
enter-up-bounce |
下バウンド |
enter-down-bounce |
右バウンド |
enter-right-bounce |
左バウンド |
enter-left-bounce |
背面バウンド |
scale-bounce |
ジャンプバウンド |
jump-bounce |
右フリップ |
tree-flip-right |
左フリップ |
tree-flip |
上フリップ |
tree-flip-up |
下フリップ |
tree-flip-down |
左めくり |
flip-left-bounce |
めくり |
rotate-flip |
右めくり |
flip-right-bounce |
上から登場 |
flip-top |
左から登場 |
flip-left |
右から登場 |
flip-right |
下から登場 |
flip-bottom |
縦めくり |
rotate-flip-down |
ぶら下がり落ち |
rotate-down-bounce |
回転消滅 |
rotate-out |
点滅 |
flash-bang |
吹き飛び |
bomba |
ぐるぐる |
rotate-row |
下へ網掛け |
legend-down |
上へ網掛け |
legend-up |
左から網掛け |
legend-left |
右から網掛け |
legend-right |
終幕 |
legend-flip |
くっきり |
portrait-before |
ぼんやり |
portrait-blur |
そのまま |
scale-before |
4. ボタンのアニメーションエフェクト
ボタンのアニメーションのデモページはこちら
button に data-efect= として、エフェクトのクラス名を記入するだけで、画像にアニメーションをつけることができる。
button の下で、画像を読み込んでおく。
記述例:
<div class="btns">
<button data-efect="dance">ダンス</button>
</div><!– btns –>
<div class="posi treed">
<div id="all-animation-icon">
<img src="img/all-animation.png" alt="" />
</div>
</div>
使用可能クラス一覧は画像のアニメーションエフェクトと全く同じ。
5. メニューのアニメーションエフェクト
メニューのアニメーションのデモページはこちら
ulやdivにクラスを付けて、簡単にアコーデオンやタブを実装可能。
個別アコーデオン
<ul class="all-animation double-acordeon">
連動アコーデオン
<ul class="all-animation acordeon">
フェードタブ
<div class="all-animation tab-panel">
スライドタブ
<div class="all-animation tab-slide-panel">
記述方法(個別アコーデオンの場合):
<ul class="all-animation double-acordeon">
<li>
<input type="checkbox" name="_double_acordeon[]" id="double-acordeon1" checked />
<label for="double-acordeon1">メニュー1
<div>内容1</div>
</label>
</li>
<li>
<input type="checkbox" name="_double_acordeon[]" id="double-acordeon2" />
<label for="double-acordeon2">メニュー2
<div>
内容2</div>
</label>
</li>
<li>
<input type="checkbox" name="_double_acordeon[]" id="double-acordeon3" />
<label for="double-acordeon3">メニュー3
<div>
内容3</div>
</label>
</li>
</ul>
その他の記述方法は、メニューのアニメーションのデモページのソース、またはall-animation.zipを参照。
6. チェックボックスのアニメーションエフェクト
チェックボックスのアニメーションのデモページはこちら
div にクラス名を記入するだけで、チェックボックスやラジオボタンにエフェクトを付けて、トリガーボタンなどを作れる。
記述方法:
・トリガー
<div class="all-animation triggerOnOf">
<input id="check9" name="check9″ type="checkbox" />
<label for="check9"> トリガー黄緑</label>
</div>
・ラジオボタン
<div class="all-animation box-check">
<input id="radio1" name="radio1" type="radio" />
<label for="radio1"></label>
</div>
<div class="all-animation box-check">
<input id="radio2" name="radio1" type="radio" checked />
<label for="radio2"></label>
</div>
・チェックボックス
<div class="all-animation puft-in">
<input id="check1" type="checkbox" />
<label for="check1"></label>
</div>
その他のエフェクトはメニューのアニメーションのデモページのソース、またはアーカイブ版all-animation.zipを参照。
・アーカイブ版(導入サンプルまとめてダウンロード)
all-animation.zip