Page Transitions with CSS3

ページを切り替えるときに効果を与える方法はいろいろありますが、ほとんどはjQueryなどのJavaScriptを使用したものがたくさん溢れているような気がします。

しかし今回はCSSのみを使用して、ひとつのページでコンテンツをスライドさせて切り替える『Page Transitions with CSS3』を紹介します。

<div>~</div>で囲んだdiv要素ごとにページを作成し、コンテンツをスライドさせてページを切り替えるワンページャーのウェブサイトを作ることができます。

とういうことで、サンプルページを作ってみました。こんな感じになります。

→ 『Page Transitions with CSS3』サンプルページ


jQueryを使用していないので、jQueryなどをダウンロードする必要はありませんが、『Page Transitions with CSS3』のソースを一式ダウンロードすることができるのでちょこっといじってあげるだけで、サイトを作成することができます。

こちらからソースをダウンロードできます。→ Page Transitions with CSS3

まず、<head>部分にcssの設定をします。
<link rel=”stylesheet” type=”text/css” href=”css/demo.css” />
<link rel=”stylesheet” type=”text/css” href=”css/style.css” />

<body>部にページごとにコンテンツを以下のように<div>要素で設定をします。

そしてメニューを設定します。

CSSのソースはダウンロードしてきたものを使用出来ます。
スライドのエフェクトによってCSSソースが3パターン用意してあります。

メニューナビゲーションの色はCSSの以下の部分のカラーコードを変更することで簡単に変更できます。
#home:target ~ #header #navigation #link-home,
#portfolio:target ~ #header #navigation #link-portfolio,
#about:target ~ #header #navigation #link-about,
#contact:target ~ #header #navigation #link-contact{
background: #000;
color: #fff;
}

CSSだけでもこれだけのサイトが実現できるんですね。jQueryを読み込んでいないので、軽くて表示が早いのも利点です。このソースを基にいろいろとアレンジしてみては。

この記事と関連してると思われる記事: