パララックスについて

Question

現在パララックス効果で背景をスクロールすると画像が変わるというデザインを作りたいと考えております。

ですがスクロールすると画像指定している画像ではなく背景が見えてしまうという状態になっています。
画像の表示場所などはjQueryで指定したりしているのですがうまくいきません。

コードは下記のようなものを使用使用しています。

<div class="parallax-wrap">
        <div class="parallax bg-01" id="parallax-01">
          <h1>タイトル</h1>
        </div>
    <div class="content">前面：コンテンツエリア</div>
        <div class="parallax bg-02" id="parallax-02">
        <h2>

        </h2>
        </div>
          <div class="content">前面：コンテンツエリア</div>
        <div class="parallax bg-03" id="parallax-03">
          <h2>

          </h2>
        </div>
        <div class="content">前面：コンテンツエリア</div>
    </div>

.parallax.bg-01 {
  width: 100%;
  position: relative;
  background-image: url(../img/back/renga.jpg);
  z-index: 1;
}
.parallax.bg-01::before {
  content: '';
  background-color: rgba(0,0,0,.3);
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
}

.parallax.bg-02 {
    width: 100%;
    position: relative;
    background-image: url(../img/back/renga1.jpg);
    z-index: -1;
}
.parallax.bg-02::before {
  content: '';
  background-color: rgba(0,0,0,.3);
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
}

.parallax.bg-03 {
  width: 100%;
  position: relative;
  background-image: url(../img/back/renga2.jpg);
  z-index: -1;
}
.parallax.bg-03::before {
  content: '';
  background-color: rgba(0,0,0,.3);
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
}

.parallax {
    min-height: 400px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 60px;
    box-sizing: border-box;
}
.content {
    padding: 60px;
    background-color: #fff;
}

    $(function(){
      var target1 = $("#parallax-01");
      var targetPosOT1 = target1.offset().top;
      var target2 = $("#parallax-02");
      var targetPosOT2 = target2.offset().top;
      var target3 = $("#parallax-03");
      var targetPosOT3 = target3.offset().top;
      var targetFactor = 0.5;
      var windowH = $(window).height();
      var scrollYStart1 = targetPosOT1 - windowH;
      var scrollYStart2 = targetPosOT2 - windowH;
      var scrollYStart3 = targetPosOT3 - windowH;
      $(window).on('scroll',function(){
        var scrollY = $(this).scrollTop();
        if(scrollY > scrollYStart1){
          target1.css('background-position-y', (scrollY - targetPosOT1) * targetFactor + 'px');
        }else{
          target1.css('background-position','center');
        }
        if(scrollY > scrollYStart2){
          target2.css('background-position-y', (scrollY - targetPosOT2) * targetFactor + 'px');

        }else{
          target2.css('background-position','center');
        }
        if(scrollY > scrollYStart3){
          target3.css('background-position-y', (scrollY - targetPosOT3) * targetFactor + 'px');
        }else{
          target3.css('background-position','center');
        }
  });
});

下記の画像のように１枚目はページを開いた時です。
２枚目が下にスクロールして行った時です。
２枚目を見てもらったらわかるようにレンガの画像の下側に灰色の背景が見えてしまっています。
３枚目も同様です。
これを解決したいです。

何かご教授いただければ幸いです。

１枚目

２枚目

３枚目

Answer 1

これは単純に背景画像の高さが足りてないということです。今回のコードではjsで高さの中央値との差分を計算してずらしているようで、背景画像はあくまで元のコンテンツの大きさに依存します。background-size:coverで横幅を合わせて比率を合わせて高さを取っているので、高さが取れていない部分はbackground-colorになります。

もしこの実装で修正するなら、

• 画像ソースを画面サイズの比率に合わせるか(高さを画面サイズの比率より大きくする)
• background-repeatをかけてあげて継ぎ足す
• 背景画像のサイズを無理やり引き延ばす

// 背景画像のサイズを無理やり引き延ばすれ
//比率がおかしいので横の長さを計算する必要がある
background-size: 100vw 100vh;

かがいいかと思います。

Comments

[parapra]

画像の大きさの問題だったんですね！
ありがとうございます！