最近、パララックス効果（視差効果）を取り入れたサイトを目にするケースが増えてきています。ECサイトの場合、商品ページにパララックス効果を取り入れる必要性はそれほど高く無いかもしれません。

しかしLP（ランディングページ）の見せ方として、パララックスさせることで工夫次第で、人を惹きつけるページを作成することができます。

パララックス効果を持たせるには、javascriptによる実装がよく使われています。しかし今回ご紹介する方法は、javascriptは一切使わずにCSSだけで、しかもレスポンシブサイトにおいても簡単にパララックス効果を実装できてしまう、そんな方法をご紹介します。

パララックス効果とは
パララックス効果とは、日本語で訳すと「視差」効果と訳すことができます。

同一点を異なった2点から眺めたときに見える方向の違い，すなわち，二つの方向の間の角度を視差という。
参考：コトバンク

WEBデザインでのパララックス効果は、「要素ごとに動くスピードを変え方向にも変化をつける」といったイメージになるかと思います。
スクロールの際におしゃれな印象を与えることができるので重宝されています。

まずは、ベースとなるスタイルシートを作ります。

html {
  height: 100%; 
  overflow: hidden; /* ブラウザ標準のスクロールバーを消します */
}

body {
  overflow-y: scroll;  /*  縦スクロールバーを表示します。 */
  overflow-x: hidden;  /*  横スクロールバーを消します。 */                                                                                                                    
  height: 100%; 
}

.image-base{
  min-height: 800px; /* 高さの最小値を決めることで高さを確保させます。デバイスサイズに応じて数値を変更させると、背景画像もレスポンシブに変化します。　*/
　background-position: center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover; /* 背景画像をフルスクリーンにフィットさせます */
}

パララックスさせる画像に対して、背景画像として固定表示させます。

.image {
  background: url('/img/Desert.jpg') no-repeat fixed ;　/* 背景画像を固定させます。 */
}
.image2 {
  background: url('/img/ramen.jpg') no-repeat fixed ;　/* 背景画像を固定させます。 */
}
.image3 {
  background: url('/img/rice-ball.jpg') no-repeat fixed ;　/* 背景画像を固定させます。 */
}
.image4 {
  background: url('/img/hamburger.jpg') no-repeat fixed ;　/* 背景画像を固定させます。 */
}

デモサイトではHTMLを下記のように記述しています。

<h2 id="1">コンテンツ１</h2>
  <div class="image-base image"></div>
    <section class="content">
      <p>レスポンシブサイトでパララックス効果をCSSだけで簡単に実装する方法</p>
    </section>
<h2 id="2">コンテンツ２</h2>
  <div class="image-base image2"></div>
    <section class="content">
      <p>レスポンシブサイトでパララックス効果をCSSだけで簡単に実装する方法</p>
    </section>
<h2 id="3">コンテンツ３</h2>
  <div class="image-base image3"></div>
    <section class="content">
      <p>レスポンシブサイトでパララックス効果をCSSだけで簡単に実装する方法</p>
    </section>
<h2 id="4">コンテンツ４</h2>
  <div class="image-base image4"></div>
    <section class="content">
      <p>レスポンシブサイトでパララックス効果をCSSだけで簡単に実装する方法</p>
    </section>

なお、弊社の提供するレスポンシブECサイト構築ASP「aishipR」に実装する場合は、フルスクリーンで表示させる上で、下記のような余白調整もあわせて必要になります。

#sysAll{
  max-width: none; 
  width:100%; 
  padding:0;
}
#sysHeader{
  padding: 0px;
  margin: 0px;
}
#sysMain {
  padding: 0px; 
  margin: 0px;
}
.parallax .sysContent {
  padding: 0px; margin: 0px; /* 作成した機能パーツの余白調整 */
} 

実装例）デモサイト

いかがでしたでしょうか？

レスポンシブ対応ECカートシステム・aishipRではページごとにレイアウトの設定を変更することができますので、ランディングページや1枚ペラのページを作成することが可能です。

ご参考にして頂きコンバージョンに繋がるような見せ方を工夫してみましょう。

葉糸