このページの本文へ

DESIGN 先端サイトに学ぶCSS3/jQueryアニメーションデザイン ― 第6回

スクロールアニメーションによる立体コンテンツの見せ方

2014年07月22日 11時00分更新

本間宣光 / Stronghold

  • この記事をはてなブックマークに追加
本文印刷

今回の注目サイト:
MANUEL RUEDA

http://www.manuel-rueda.com/

Manuel Rueda 氏のビデオ作品を紹介するポートフォリオサイト。

スクロールによって立体的に浮かび上がるサムネイル

 サムネイルに視点をフォーカスさせる仕掛けが目を引く、動画のポートフォリオサイト「MANUEL RUEDA」。ページ中央にあるサムネイルには奥行きが設定されており、スクロールによって手前に起き上がってくる動きが斬新だ。サイドナビにもスクロールに合わせたギミックが用意されており、コンテンツを何度も行き来してしまうおもしろさがある。

 今回は、このサイトをヒントに、CSS3の3D表現とjQueryを使ったスクロールアニメーションを制作する。

STEP 1:スクロール値を取得する

 スクロール値を基にCSS3のプロパティを変化させるため、スクロール値を正しく取得することから始めよう。

 スクロール値は jQueryのscrollメソッドを使って取得する。以下のようにして現在のスクロール値を取得できる。

■ソースコード(HTML)

<p id="posy"></p>

■ソースコード(JavaScript)

$(window).on('scroll'function() {
    // 現在のスクロール位置
    var scrollPos = $(this).scrollTop();
    $('#posy').html('スクロール値: ' + scrollPos + 'px');
});

STEP 2:奥行きのあるコンテンツを作成する

 スクロール値を取得できているのが確認できたら、次にCSS3で奥行きのあるコンテンツを作成していく。

 アニメーションさせる要素「.card」を親要素「#content」で包み、奥行きを持たせるためのスタイル「.perspective」を定義する。

 「.card」には rotateX(90deg) を記述し、水平に倒した状態にしておく。コンテンツが下から起き上がるようなアニメーションにするため、変形の基準点となるtransform-originを要素の底辺中央(50%,100%)に設定する。

■ソースコード(HTML)

<div id="wrapper">
    <div id="section" class="inner red">
         <div id="content" class="perspective">
            <div class="card">
                <span>CONTENT</span>
            </div>
         </div>
    </div>
</div>

■ソースコード(CSS)

{
    margin: 0;
    padding: 0;
    border: 0;
    outline: none;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
        -ms-box-sizing: border-box;
         -o-box-sizing: border-box;
            box-sizing: border-box;
}
html, body {
    width: 100%;
    height: 100%;
}
#wrapper,
.inner {
    position: relative;
    width: 100%;
    height: 100%;
}
.perspective {
    -webkit-perspective: 1000px;
       -moz-perspective: 1000px;
           -ms-perspective: 1000px;
         -o-perspective: 1000px;
            perspective: 1000px;
    -webkit-transform-style: preserve-3d;
       -moz-transform-style: preserve-3d;
        -ms-transform-style: preserve-3d;
         -o-transform-style: preserve-3d;
            transform-style: preserve-3d;
}
.card {
    position: relative;
    display: block;
    margin: 0 auto;
    width: 100%;
    height: 100%;
    border: 10px solid #FFF;
    -webkit-transform-origin: 50% 100%;
       -moz-transform-origin: 50% 100%;
        -ms-transform-origin: 50% 100%;
         -o-transform-origin: 50% 100%;
            transform-origin: 50% 100%;
    -webkit-transform: rotateX(90deg);
       -moz-transform: rotateX(90deg);
        -ms-transform: rotateX(90deg);
         -o-transform: rotateX(90deg);
            transform: rotateX(90deg);
}
.card span {
    display: block;
    position: absolute;
    top: 50%;
    margin-top: -50px;
    width: 100%;
    height: 100px;
    color: #FFF;
    font-size: 80px;
    text-align: center;
    text-transform: uppercase;
    line-height: 100px;
}
.red { background: #F4726D}
.red .card { background: #F68985}
#content {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 50%;
}

この連載の記事

一覧へ

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

HTMLリファレンス誘導バナー

CSSリファレンスサイト誘導バナー

Webディレクター江口明日香が行く

ランキング