【苦手克服】パララックスサイトを作ってみよう

こんにちは朱夏です。

今回は、パララックスデザインについて学んでいきたいと思います。
ここ数日、仕事の案件を探していますが、このブラウザ全体に画像が表示されて、スクロースすると順番に要素がフェードインしてきたりするサイトを見ると、「難しそう」と避けてしまう傾向があったので、苦手意識を克服しようと思います。

      <div class="wrap">
         <div class="p-2 bg-dark text-light">
            ナビゲーションバーダミー
         </div>
         <div class="background bg-01">
            <h1>写真１</h1>
         </div>
         <div class="content">
            コンテンツ１
         </div>
         <div class="background bg-02">
            <h1>写真２</h1>
         </div>
         <div class="content">
            コンテンツ２
         </div>
         <div class="background bg-03">
            <h1>写真３</h1>
         </div>
         <div class="bg-dark text-light text-center" style="height: 300px;">
            <h2>
               フッター
            </h2>
         </div>
      </div>

続けて、CSSも記載します。

.background {
    min-height: 400px;
    background-position: center top;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
}

.content {
    padding: 200px;
    background-color: #fff;
}

.bg-01 {
    background-image: url("../img/S__23322627.png");
    position: relative;
}

.bg-02 {
    background-image: url("../img/S__23322629.png");
    position: relative;
}

.bg-03 {
    background-image: url("../img/S__23322630.png");
    position: relative;
}

.bg-01 h1 {
    color: #fff;
    font-size: 80px;
    text-align: center;
    position: fixed;
    width: 100%;
    position: absolute;
    top: 20%;
}

.bg-02 h1 {
    color: #fff;
    font-size: 80px;
    text-align: center;
    position: fixed;
    width: 100%;
    position: absolute;
    top: 20%;
}

.bg-03 h1 {
    color: #fff;
    font-size: 80px;
    text-align: center;
    position: fixed;
    width: 100%;
    position: absolute;
    top: 20%;
}

これで、基本の部分は出来ました。
これだけでもそれっぽくなってきたかなと思います。

こちらのサイトでは、position: stickyという機能を使ってパララックスっぽい視覚効果を実現させていました。

WPJ

 

83 Posts

102 Users

264 Pockets

たった数行のCSSでパララックス風表現ができる「position: sticky」の使い方 - WPJ

https://www.webprofessional.jp/js-library-scrollreveal-2/

短いCSSを書くだけで要素を特定の位置に固定できるCSSの「position: sticky」。ちょっとした工夫で実現できるおもしろい使い方をデモで解説します。 スクロールに応じてページ要素を固定表示できるposition: stickyが便利で面白い使い方ができそうなので実験してみました。仕様がまだ草案（Working Draft）の段階で、将来、細かい部分に変更がないとは言い切れませんが、Ed…