[CSS]CSS3アニメーションを効果的に使ったResponsiveコンテンツ用のナビゲーション

サイト構築 -CSS

Post on:2012年3月26日

sponsorsr

表示サイズに合わせてレイアウトを最適化するだけでなく、更にCSS3アニメーションを使ってかっこよくするスタイルシートのチュートリアルを紹介します。

Responsive Content Navigator with CSS3

[ad#ad-2]

デモ
実装

デモ

デモは全部で5つあり、どれも面白いエフェクトです。

Demo 1

左からスライドします。

Demo 1:かっこいいアニメーションでナビゲーションが登場

Demo 1:幅800pxで表示

[ad#ad-2]

上から順にフェードインします。

上から順に大きくなります。

上部からスライドします。

上から順に回転します。

実装

Demo 1を例に、実装方法を紹介します。

HTML

パネルにはh2要素、リンク、パラグラフを配置しており、一番上に各パネルへのリンクをnav要素で配置します。

<section class="cn-container">
 
    <div class="cn-slide" id="slide-main">
        <h2>Explore this</h2>
        <nav>
            <a href="#slide-1">Philosphy</a>
            <a href="#slide-2">Science</a>
            <a href="#slide-3">Literature</a>
        </nav>
    </div>
 
    <!-- Slide 1 and sub-slides -->
    <div class="cn-slide ts-slide-sub" id="slide-1">
        <h2>Philosophy</h2>
        <a href="#slide-main" class="cn-back">Back</a>
        <nav>
            <a href="#slide-1-1">Epistemology</a>
            <a href="#slide-1-2">Metaphysics</a>
            <a href="#slide-1-3">Aesthetics</a>
            <a href="#slide-1-4">Ethics</a>
        </nav>
    </div>
 
    <div class="cn-slide" id="slide-1-1">
        <h2>Epistemology</h2>
        <a href="#slide-1" class="cn-back">Back</a>
        <div class="cn-content">
            <p>Some text</p>
        </div>
    </div>
 
    <div class="cn-slide" id="slide-1-2">
        <h2>Metaphysics</h2>
        <!-- ... -->
    </div>
 
    <div class="cn-slide" id="slide-1-3">
        <!-- ... -->
    </div>
 
    <div class="cn-slide" id="slide-1-4">
        <!-- ... -->
    </div>
 
    <!-- Slide 2 and Sub-slides -->
    <!-- ... -->
 
</section>

CSS

まずは、一番外側のdiv要素のスタイルです。
幅のサイズはパーセントで指定し、min-width, max-widthを設定します。

.cn-container{
    width: 60%;
    min-width: 300px;
    max-width: 820px;
    margin: 10px auto 0 auto;
    text-align: left;
    position: relative;
}

次に各パネルのh2要素、見出しのスタイルです。
見出しは「position: absolute;」で配置し、CSS3アニメーションでフェードでくっきりするようにします。また、全てのパネルが登場した後に表示させるよう、アニメーションのタイミングを遅くします。

.cn-container h2{
    font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
    color: #fff;
    position: absolute;
    z-index: 10000;
    text-shadow:
        0 0 1px rgba(255,255,255,0.8),
        1px 1px 1px rgba(0,0,0,0.2);
    font-size: 80px;
    line-height: 80px;
    top: 0px;
    right: 0px;
    white-space: nowrap;
    opacity: 0;
    transform: scale(0);
    transition: all 0.5s linear 0.7s;
}
.cn-container .cn-slide:target h2{
    opacity: 1;
    transform: scale(1);
}

各パネルも見出しと同様に「position: absolute;」で配置し、「opacity: 0;」で透明にし目標地点で表示されるようにします。

.cn-slide{
    text-align: center;
    position: absolute;
    left: 0px;
    padding-top: 80px;
    margin: 0 5%;
    width: 90%;
    opacity: 0;
}
.cn-slide:target{
    opacity: 1;
    z-index: 1000;
}

リンクやパラグラフのスタイルも同様にCSS3アニメーションを設定します。スタイルシートは元記事をご覧ください。

最後に、Media Queriesの設定です。表示サイズに合わせて、ナビゲーションを最適なレイアウトに変更します。
フォントサイズを調整し、サブスライドが一列になった際にブロックレベルになるようにします。

@media screen and (max-width: 1060px){
    .cn-slide-sub nav a{
        font-size: 28px;
    }
}
@media screen and (max-width: 900px){
    .cn-container h2{
        font-size: 48px;
        line-height: 95px;
    }
    .cn-slide nav a{
        font-size: 38px;
    }
    .cn-slide-sub nav a{
        width: auto;
        font-size: 36px;
        display: block;
    }
    .cn-slide-sub nav a:nth-child(odd){
        margin-right: 0px;
    }
}