【本日】誠に勝手ながら、全社員研修のため、2017年4月20日(木)の13:00以降はお電話によるサポート受付を休止させていただきます。

ECサイト構築クラウド型プラットフォーム

【本日】誠に勝手ながら、全社員研修のため、2017年4月20日(木)の13:00以降はお電話によるサポート受付を休止させていただきます。

モバイルファーストマーケティングラボ

レスポンシブサイトでパララックス効果をCSSだけで実装する方法

レスポンシブサイトでパララックス効果をCSSだけで実装する方法

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

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

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

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

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

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

CSSだけでパララックス効果を実装する〜作り方〜

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

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">コンテンツ1</h2>
  <div class="image-base image"></div>
    <section class="content">
      <p>レスポンシブサイトでパララックス効果をCSSだけで簡単に実装する方法</p>
    </section>
<h2 id="2">コンテンツ2</h2>
  <div class="image-base image2"></div>
    <section class="content">
      <p>レスポンシブサイトでパララックス効果をCSSだけで簡単に実装する方法</p>
    </section>
<h2 id="3">コンテンツ3</h2>
  <div class="image-base image3"></div>
    <section class="content">
      <p>レスポンシブサイトでパララックス効果をCSSだけで簡単に実装する方法</p>
    </section>
<h2 id="4">コンテンツ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枚ペラのページを作成することが可能です。

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

葉糸

”スマホで売れる”ためには必須の「レスポンシブECサイト」とは?

CTA-IMAGE 2019年、ECサイトの利用者は今やスマ―トフォンからが7割を超え、市場のニーズは完全にPCからスマホに転換しました。
また、検索エンジン大手のGoogleも「モバイルファーストインデックス」を打ち出し、スマホ対応の手段として正式に「レスポンシブWEBデザイン」を推奨しています。 そのような背景から、昨今のEC市場ではスマートフォンへの適切な対応が急務となっており「レスポンシブECサイト」のニーズが非常に高まってきています。本パンフレットではECサイト運営を取り巻く環境の変化を、レスポンシブECサイト構築導入実績No.1のプラットフォームである「aishipR」の機能や実績を踏まえながらまとめました。

・レスポンシブECサイトがなぜ今選ばれるのか
・これまでのECサイトの課題とは何なのか
・どのようにすれば解決できるのか

といったノウハウから、プラットフォーム変更で得られる効果の実例まで網羅して解説しています。
ECサイトの運営されておられる経営者様だけでなく、運営担当者様にも必ずお役に立つ内容となっておりますので、是非ご活用ください。
機能のご確認はお気軽にお問合せ、もしくは2週間無料お試し利用で。
aishipRの無料体験、お問合わせはお気軽に。説明会・資料請求も受付中。
0120-173-163
0120-173-163
無料体験
  • 無料体験
  • 問合せ
  • 説明会
  • 資料請求
  • 問合せ
  • 説明会
  • 資料請求
+