【かっこいい】よく見る商品紹介ページのダイナミックなスクロール表示をCSSだけでシンプルに試す【実例付き】


画面全体をスクロールさせる、ダイナミックな表示サイトをよくみかけるようになり、 気になっていたので考えてみました。

JavaScriptを使わず、CSSだけで作ってみます。 また、わかりやすいよう 体裁に凝らず、なるべくミニマムな設定で、 幹の部分だけ書いて実現してみます。

また、動作イメージ(アニメーションデモ付き)や 想定イメージも用意しています。

スクロール方法その1

内側で多重スクロールしているように見えるので、おそらく表示の外側は隠し、スクロールを2種類設定すれば実現できると思います。

後ろの画像は、スクロールしない fixedで固定し、もう一方の文字などは普通にスクロールすれば、そのままスクロールを表現できそうです。ダイナミックさは画像を幅いっぱいに広げれば大丈夫だと思います。

構成

.

stage image 幅いっぱい
content
画像は、幅いっぱいに広げ(cover)  fixed で表示します。これで画像は固定されたような表示になります。
高さは適当に大体1画面分ぐらい設定します。
間に置く文章も 適当な幅の高さで配置します。
あとは、フォントを中央揃えで大きく表示します(.spot)。画像の方のテキストを上下中央に揃えるために text-line:を大きめに設定します。

実行例

マルチスクロールデモ :3 セット+ END

コード

    <div class="stage" style="background-image: url(pexels-photo-67752.jpeg);">
        <div class="spot">
            <h2>新渡戸稲造</h2>
        </div>
    </div>

    <div class="content">
        <div class="spot textcenter">

        </div>
    </div>

    <div class="stage" style="background-image: url(pexels-photo-24580.jpg);">
        <div class="spot">
            <h2>二宮尊徳</h2>
        </div>
    </div>

    <div class="content">
        <div class="spot textcenter">
 
        </div>
    </div>

    <div class="stage" style="background-image: url(pexels-photo-30267.jpg);">
        <div class="spot">
            <h2></h2>
        </div>
    </div>

    <div class="content">
        <div class="spot textcenter">

        </div>
    </div>


    <div class="stage" style="background-image: url(pexels-photo.jpg);">
        <div class="spot">
            <h2>END</h2>
        </div>
    </div>
        div.stage {
            height: 600px;
            /*background-position: 50% 50%;*/
            background-repeat: no-repeat;
            background-attachment: fixed;
            background-size: cover;
        }
        
        .content {
            padding: 30px 0;
            height: 600px;
        }
        
        .spot {
            max-width: 960px;
            margin: 0 auto;
        }
        
        .textcenter {
            text-align: center;
            font-weight: bold;
            font-size: 30px;
            margin-top: auto;
            margin-bottom: auto;
        }
        
     .spot span.title {
         line-height: 600px;
         text-align: center;
 
         font-size: 60px;
         color: #fff;
         font-weight: bold;
         text-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
     }

[注:動かなくなってしまいました。。]スクロール方法その2

スクロール方法その1では、3つ以上の種類のスクロールができません。
今回は、3つ以上のアイテムをスクロールする方法を考えてみます。

考え方

perspective という 設定で奥行きを考慮できるらしいので、調べてみました。
ちょっと想像と違いましたが、基本的には、Z軸(奥)に並べることでスクロール速度を変えます。

構成

.全体 .stage
セクション .baselayer
.
奥行き毎 パーツ  .layer パーツ  .layer パーツ  .layer
セクション .baselayer
セクション .baselayer

やり方

奥行き設定関連

全体(.stage)に 3D設定を施す枠を作ります。 その中でパーツ毎にスクロールさせます。
パーツ(.layer)ごとに奥行きをずらせば、違ったスクロール速度になります。
具体的には親要素(.stage)で、奥行き感をperspective:100pxでざっと設定。子要素(layer)は position:absoluteにして、おきます。

セクション設定(ページ区切り)

1回の画像スクロールだけでは寂しいので、複数のセクションを作るため、セクションごとグルーピング(.baselayer)します。
グルーピングした要素に、preserve-3d を設定しないと、平に戻ってスクロール感がなくなります(セクションあたりの全てのスクロールパーツがくっつく)。
今回は、その.baselayer にダイナミックな幅いっぱいの画像を設定します。高さも 100vhと1画面分設定しておきます。
子要素の相対位置はこの.baselayerをベースとします。

各スクロール要素の設定

各子要素の共通部分(.layer)は 中央に表示されるようにし、フォントサイズを大きく設定しておきます。
子要素の奥行設定として、もうひとつクラスを作り、それぞれ設定します。(.front, .back, .deep)
transformZで手前にすると大きくなりすぎるため、 scaleで小さくしておきます。 比率は先程の perspectiveで設定した値です。奥行きとして 手前に + 20px だと  20/100 の割合で大きく見えます。手前ほど上下移動速度は速くなります。
上下の他のセクションと文字が重ならないように、 1.9倍ぐらい以内の位置に設定しています。
奥行きで奥(z軸マイナス)に設定すると、この場合で言う画像の後ろに隠れます。

その他

右にスクロールバーが見えるので、全体的にmargin,padding0にします。
※イメージとイメージの間は、今回省きました。好きなように上記その1と同じようにやったりしてください。

実行例

マルチスクロールデモ  :4セクション

        <div class="stage">
            <div class="baselayer">
            </div>
            <br>
            <div class="baselayer" style="background-image: url(pexels-photo-67752.jpeg);">...
                <div class="layer front">front message</div>
                <div class="layer">normal </div>
                <div class="layer back">back message</div>
                <div class="layer deep">deep message</div>

            </div>
            <br>
            
            <div class="baselayer" style="background-image: url(pexels-photo.jpg);">...
                <div class="layer front">front</div>
                <div class="layer">normal</div>
                <div class="layer back">back</div>
                <div class="layer deep">deep</div>
            </div>  
            <br>    
            
            <div class="baselayer">
            </div>
        </div>
*{
    margin:0;
    padding:0;
    
}

  .stage{
    perspective: 100px;
    height:100vh;
    
    overflow-y: auto;
}
.baselayer{
    position:relative;
	transform-style: preserve-3d;
    height:100vh;
    
    background:#eee url(pexels-photo-24580.jpg) no-repeat  ;
    background-size: cover; 
    opacity:.7;
    
}
.layer{
    position: absolute;
    line-height:1000px;
    text-align: center;
    
    font-size:60px;

    top:0;
    bottom:0;
    left:0;
    right:0;

    transform: translateZ(0);
}
.front{
    transform: translateZ(60px) scale(.4);
}
.back{
    transform: translateZ(40px) scale(.6);
}
.deep{
    transform:rotateX(3deg);
    transform: translateZ(20px) scale(.8);
}

関連ページリンク

【かっこいい】よく見る商品紹介ページのダイナミックなスクロール表示をCSSだけでシンプルに試す【実例付き】

タブメニューをCSSだけでシンプルに作る

CSSだけでモーダルダイアログをシンプルに実現してみる

Delicious にシェア
Digg にシェア
reddit にシェア
LinkedIn にシェア
LINEで送る
email this
Pocket

458 views.



コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です