on:2012年2月1日sponsorsCSS3アニメーションを使って、ダイナミックなスライドやフェードのアニメーションでページ(コンテンツ)を切り替えるテクニックを3つ紹介します。CSS3[ad#ad-2]デモ実装デモデモでは3種類(黄・青・緑)のアニメーションが楽しめます。1は上からスライドのアニメーションで切り替わります。1#Portfolio各ページの#リンクも有効です。2はフェードのアニメーションで切り替わります。3は左からスライドのアニメーションで切り替わります。実装デモは一見、Homeを含む4ページで構成されているように見えますが、1ページで作成されています。HTMLHTMLはdiv要素で配置したコンテンツが4つ、ナビゲーションが1つの構成です。コンテンツはそれぞれ異なるidとclassを付与します。-->ヘッダにはh1要素の見出しとナビゲーションを配置します。</ul></div>CSSCSSはエレメントごとに分けて、紹介します。ヘッダとナビゲーションのスタイルで、ここではシンプルにデザインします。#ddd;}各パネルのスタイルと切り替え時のアニメーションです。最初に表示する「#home」以外は全て「.panel」のclassをもっています。パネルを配置するテクニックで大切なポイントは「margin-top」の値をデフォルト時にマイナスにしておくことです。これはターゲットがあたると「0%」になります。#ffcb00;}コンテンツ内の要素のスタイルは、シンプルです。0px;}ナビゲーションの現在位置のカラーを変更するには、「:target」を使います。