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

こんにちは朱夏です。

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

パララックスサイトって何？

私が難しそうと避けていたサイトデザインが、パララックスサイトというのだそうです。
パララックスは日本語にすると「視差効果」となります。画面に表示されるタイミングを遅らせたりすることで、表示されたときに目が行きやすくなるといった効果を使って作られたサイトの事を指す言葉みたいですね。

どうやって作るの？

jQueryなどを使って、色々動きを付けているサイトが多い様です。

WordPressにはその辺りをサポートしているテーマやプラグインがありそうですが、今回はしっかりHTMLコーディングで作っていこうと思います。

基本部分を作ります

まずはHTMLとCSSで基本となる部分を作っていきたいと思います。

      <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>

ナビゲーションバーダミー

</div>

</div>

コンテンツ１

</div>

</div>

コンテンツ２

</div>

</div>

<h2>

フッター

</h2>

</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%;
}