パララックスを使って背景画像を動かす

パララックスを使って動画のように背景画像を動かすことが出来ます。

コードとしては概ね以下のとおりです。

画像部分のみ載せています。

ご参考になればと思います。

/*コード例*/

/*HTML*/

<div id="parallax" class="p-frame"></div>

/*CSS*/

.p-frame{

  height:10rem;

  width:29.8rem;

  background-image:url(画像のパス);

  background-repeat:no-repeat;

}

/*JS*/

$(window).scroll(function(){

  var height = $(this).scrollTop();

　　　　/*高さを調節*/

 var yLine = height - 290;

　　　　/*parseInt( yLine / 2 )の整数部分(今回なら2)を調節することで、スクロール時の動きを調節。値を小さくすると、大きく動く*/

 $('#parallax').css('background-position', 'left top ' +parseInt( yLine / 2 ) +'px');

  });

ご依頼はこちらまで。