パララックスデザイン＋CSSのみでレスポンシブ対応

javascriptを使わずに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 ;　/* 背景画像を固定させます。 */
}

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>

フルスクリーン表示のための調整

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

参考サイト