CSS3アニメーションを使ったかっこいいページを簡単につくりたい！そんな人に -CSS3 Animation Cheat Sheet
Post on:2013年7月11日
sponsors
Appleのプロダクトページのように、スクロールをトリガーにCSS3アニメーションが展開するようなページを簡単に実装できるCSS3 Animation Cheat Sheetを紹介します。
「Cheat Sheet」という名称が紛らわしいですが、各種CSS3アニメーションをセットにしたスタイルシートで、ページに外部スタイルシートを加え、classをちょこちょこつけるだけで、簡単にCSS3アニメーションをページに実装できます。
CSS3 Animation Cheat Sheetのデモ
デモは2種類あります。
CSS3のキーフレームアニメーションを使用しているため、モダンブラウザでご覧ください、IEは10で。
まずは、CSS3アニメーションを使ったシンプルなアクションから。
天地左右のスライド、拡大・縮小・フェードなどのアニメーション。
バウンド、パルス、フロート、トス、プル、ストレッチなどのアニメーション。
アクション単体では、ウェブページにどのように使えばいいのか迷うかもしれません。
実際に、ページに使用したデモもあります。
トップページと同じおじさんがいますが、このページはスクロールをトリガーにさまざまなCSS3アニメーションが楽しめます。
スライドアップ：プロダクトがスライドで登場します。
どこかで見たような気がするのは、気のせいでしょう。
ハッチ：タマゴから雛がかえるようなアニメーション。
スライド エクスパンド アップとパルス：下からスライドして拡大し、鼓動のように動きます。
ストレッチ：矢印が目標地点に伸びます。
見たような気がしますが、視線を誘導するのに効果的ですね。
最後はプルアップ：棒グラフがぐーんと、伸びます。
CSS3 Animation Cheat Sheetの使い方
Step 1: 外部ファイル
当スタイルシートをhead内に配置します。
<head> ... <link rel="stylesheet" href="css/animations.css"> </head>
Step 2: アニメーションの実装
既存のHTMLにclassを加えるだけで、CSS3アニメーションを実装できます。
<div id="object" class="slideUp">
スライドなどのアニメーションでページに表示させる時は、最初に非表示にしておくと効果的です。非表示にする際は、「visibility: hidden;」を使用します。
#object{
background-color: #fe5652;
visibility: hidden;
}
スクロールをトリガーした実装
デモページのようにスクロールをトリガーにする場合は、「jquery.js」を併用します。
まずは、head内に外部ファイルを配置します。
<head> <head> ... <link rel="stylesheet" href="css/animations.css"> <script src="http://code.jquery.com/jquery-1.10.1.min.js"> </head>
特定のエレメントをスクロールした際にアニメーションさせるには、</body>の上に下記のように記述します。
例：エレメント（#animatedElement）がスクリーンの最上部から400pxになったら、スライドアップ（slideUp）させる場合。
<script>
$(window).scroll(function() {
$('#animatedElement').each(function(){
var imagePos = $(this).offset().top;
var topOfWindow = $(window).scrollTop();
if (imagePos < topOfWindow+400) {
$(this).addClass("slideUp");
}
});
});
</script>
クリックをトリガーした実装
クリックをトリガーにする場合は、</body>の上に下記のように記述します。
<script>
$('#animatedElement').click(function() {
$(this).addClass("slideUp");
});
</script>
sponsors
