[CSS]1ページで構成されたウェブサイトで使える、かっこいいCSS3アニメーションのテクニック

サイト構築 -CSS

Post on:2012年2月1日

sponsorsr

CSS3アニメーションを使って、ダイナミックなスライドやフェードのアニメーションでページ（コンテンツ）を切り替えるテクニックを3つ紹介します。

Page Transitions with CSS3

[ad#ad-2]

デモ
実装

デモ

デモでは3種類（黄・青・緑）のアニメーションが楽しめます。

Demo 1

Demo 1は上からスライドのアニメーションで切り替わります。

Demo 1#Portfolio

各ページの#リンクも有効です。

[ad#ad-2]

Demo 2

Demo 2はフェードのアニメーションで切り替わります。

Demo 3

Demo 3は左からスライドのアニメーションで切り替わります。

実装

デモは一見、Homeを含む4ページで構成されているように見えますが、1ページで作成されています。

HTML

HTMLはdiv要素で配置したコンテンツが4つ、ナビゲーションが1つの構成です。
コンテンツはそれぞれ異なるidとclassを付与します。

<!-- Home -->
<div id="home" class="content">
    <h2>Home</h2>
    <p>Some content</p>
    <!-- ... -->
</div>
<!-- /Home -->
 
<!-- Portfolio -->
<div id="portfolio" class="panel">
    <div class="content">
        <h2>Portfolio</h2>
        <p>Some content</p>
        <!-- ... -->
    </div>
</div>
<!-- /Portfolio -->
 
<!-- About -->
<div id="about" class="panel">
    <div class="content">
        <h2>About</h2>
        <p>Some content</p>
        <!-- ... -->
    </div>
</div>
<!-- /About -->
 
<!-- Contact -->
<div id="contact" class="panel">
    <div class="content">
        <h2>Contact</h2>
        <p>Some content</p>
        <!-- ... -->
    </div>
</div>
<!-- /Contact -->

ヘッダにはh1要素の見出しとナビゲーションを配置します。

<!-- Header with Navigation -->
<div id="header">
    <h1>Page Transitions with CSS3</h1>
    <ul id="navigation">
        <li><a id="link-home" href="#home">Home</a></li>
        <li><a id="link-portfolio" href="#portfolio">Portfolio</a></li>
        <li><a id="link-about" href="#about">About Me</a></li>
        <li><a id="link-contact" href="#contact">Contact</a></li>
    </ul>
</div>

CSS

CSSはエレメントごとに分けて、紹介します。
まずは、ヘッダとナビゲーションのスタイルで、ここではシンプルにデザインします。

#header{
    position: absolute;
    z-index: 2000;
    width: 235px;
    top: 50px;
}
#header h1{
    font-size: 30px;
    font-weight: 400;
    text-transform: uppercase;
    color: rgba(255,255,255,0.9);
    text-shadow: 0px 1px 1px rgba(0,0,0,0.3);
    padding: 20px;
    background: #000;
}
#navigation {
    margin-top: 20px;
    width: 235px;
    display:block;
    list-style:none;
    z-index:3;
}
#navigation a{
    color: #444;
    display: block;
    background: #fff;
    background: rgba(255,255,255,0.9);
    line-height: 50px;
    padding: 0px 20px;
    text-transform: uppercase;
    margin-bottom: 6px;
    box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    font-size: 14px;
}
#navigation a:hover {
    background: #ddd;
}

各パネルのスタイルと切り替え時のアニメーションです。
最初に表示する「#home」以外は全て「.panel」のclassをもっています。パネルを配置するテクニックで大切なポイントは「margin-top」の値をデフォルト時にマイナスにしておくことです。これはターゲットがあたると「0%」になります。

.panel{
    min-width: 100%;
    height: 98%;
    overflow-y: auto;
    overflow-x: hidden;
    margin-top: -150%;
    position: absolute;
    background: #000;
    box-shadow: 0px 4px 7px rgba(0,0,0,0.6);
    z-index: 2;
    -webkit-transition: all .8s ease-in-out;
    -moz-transition: all .8s ease-in-out;
    -o-transition: all .8s ease-in-out;
    transition: all .8s ease-in-out;
}
.panel:target{
    margin-top: 0%;
    background-color: #ffcb00;
}

コンテンツ内の要素のスタイルは、シンプルです。

.content{
    right: 40px;
    left: 280px;
    top: 0px;
    position: absolute;
    padding-bottom: 30px;
}
.content h2{
    font-size: 110px;
    padding: 10px 0px 20px 0px;
    margin-top: 52px;
    color: #fff;
    color: rgba(255,255,255,0.9);
    text-shadow: 0px 1px 1px rgba(0,0,0,0.3);
}
.content p{
    font-size: 18px;
    padding: 10px;
    line-height: 24px;
    color: #fff;
    display: inline-block;
    background: black;
    padding: 10px;
    margin: 3px 0px;
}

ナビゲーションの現在位置のカラーを変更するには、「:target」を使います。

#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;
}