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

CSS
スポンサーリンク

こんにちは朱夏です。

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

 


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

 

どうやって作るの?
jQueryなどを使って、色々動きを付けているサイトが多い様です。
WordPressにはその辺りをサポートしているテーマやプラグインがありそうですが、今回はしっかりHTMLコーディングで作っていこうと思います。

 

基本部分を作ります
まずはHTMLとCSSで基本となる部分を作っていきたいと思います。
      <div class="wrap">
         <div class="p-2 bg-dark text-light">
            ナビゲーションバーダミー
         </div>
         <div class="background bg-01">
            <h1>写真1</h1>
         </div>
         <div class="content">
            コンテンツ1
         </div>
         <div class="background bg-02">
            <h1>写真2</h1>
         </div>
         <div class="content">
            コンテンツ2
         </div>
         <div class="background bg-03">
            <h1>写真3</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%;
}

 

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

失敗談:CSSから画像リンクなど相対パスで指定する場合、cssファイルからの相対位置を指定する必要があります。
私は勘違いしてhtmlファイルからのパスを指定していました。
気づくのに30分ロスしました・・・

 

方法は1つじゃない
上記では、基本に忠実に作りましたが、他にも方法はあるようです。
こちらのサイトでは、position: stickyという機能を使ってパララックスっぽい視覚効果を実現させていました。

 

こちらはコードもスッキリ書けて、画面の切り替わり方法も簡単に変更できそうです。
実現させたい内容によって使い分けていきたいですね。

 

次回に続きます
今回はパララックスサイトのベース部分を作ってみました。
基本部分に限って言えば、自分が思っているよりも実装の難易度は高くなかったみたいです。
今回はここまでにして、Javascript、jQueryは、時間がかかりそうなので次回に回します。
次回、メニューがフェードインしてきたり、コンテンツがサイドからニュッっと出てきたりする視覚効果をつけていきます。
今回はここまでです。
タイトルとURLをコピーしました