今使用しているナビゲーションやタブやボタンにHTMLを汚さずにさまざまなアニメーションを適用できる -All Animation
Post on:2016年2月25日
sponsors
ページ上のさまざまな要素やコンポーネントにclassを加えるだけで、CSS3アニメーションを適用できるスタイルシートを紹介します。
既存のナビゲーションやボタンにちょっとアニメーションを与えたい時にも最適です。
HTMLにclassを加えて汚したくない人は、jQueryやスクリプトでclassを加えて、クリーンな実装もできます。
All Animation CSS3
All Animation -GitHub
All Animationのデモ
約40種類のCSS3アニメーションとさまざまな要素やコンポーネントに適用したデモを楽しむことができます。
最初のデモは、ボタンをトリガーにしたアニメーション。
ぷるぷるしたり、弾んだり、ぱたっとめくれたり、3Dに回転したりと、いろいろなものが揃っています。
デモ: ボタン
リスト要素で実装されたアコーディオンも簡単にアニメーションで動かすことができます。
コンポーネント: アコーディオン
リスト要素で実装されたタブには、フェードやスライドがいいですね。
コンポーネント: タブ
フォームのボタンやチェックボックスもアニメーションを使ったかわいいデザインにすることができます。
コンポーネント: フォーム
All Animationの使い方
All AnimationはMITライセンスで利用でき、使い方は非常に簡単です。
Step 1: 外部ファイル
当スタイルシートを外部ファイルとして記述します。
|
1 2 3 4 |
<head> ... <link rel="stylesheet" type="text/css" href="yourpath/all-animation.css" /> </head> |
Step 2: classを加える
アニメーションさせたい要素にclassを加えるだけで完了。
|
1 2 3 |
<div class="dance"> danceのアニメーションを適用 </div> |
Step 3: classをスクリプトで加える
classを加えるためにjQueryなどのスクリプトを使用すると、アニメーションで動かす要素とトリガーとなる要素を別々に指定することができます。
もちろん、HTMLは一切汚さずにアニメーションを設定できます。
例えば、HTMLはこんな感じ。
|
1 2 3 4 5 |
<div> danceのアニメーションを適用 </div> <button>アニメーションのトリガー</button> |
jQueryを使用すると、こんな感じに。
ボタンをクリックすると、div要素に「.dance」が加えられ、アニメーションします。
|
1 2 3 4 |
$("button").click(function(e){ e.preventDefault(); $(div).addClass('dance'); }); |
JavaScriptで記述すると、こんな感じに。
|
1 2 3 4 |
document.querySelector('button').addEventListener('click',function(e){ e.preventDefault(); document.querySelector('div').classList.add('dance'); }) |
sponsors
