CSS3アニメーションを使ったかっこいいページを簡単につくりたい!そんな人に -CSS3 Animation Cheat Sheet

Appleのプロダクトページのように、スクロールをトリガーにCSS3アニメーションが展開するようなページを簡単に実装できるCSS3 Animation Cheat Sheetを紹介します。

「Cheat Sheet」という名称が紛らわしいですが、各種CSS3アニメーションをセットにしたスタイルシートで、ページに外部スタイルシートを加え、classをちょこちょこつけるだけで、簡単にCSS3アニメーションをページに実装できます。

サイトのキャプチャ

CSS3 Animation Cheat Sheet

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>

top of page

©2017 coliss