「タブ」タグアーカイブ

【All Animation CSS3】CSS3だけでアニメーションや3Dエフェクトを表現できる

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を読み込もう。

<link rel="stylesheet" type="text/css" href="css/position.css" /><!–- all animation css3 –->
<link rel="stylesheet" type="text/css" href="css/all-animation.min.css" /><!–- all animation css3 –->

 

次に、</body>の直前辺りで、js ファイルを読み込もう。
 

<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>

これで読み込みは完成。あとは画像に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