あなたのキモチ つなげるカタチ

TOP > min-technique(ミニマムテクニック) > 【jQuery】スクロール時にスクロールの逆方向へ背景画像を動かすテクニック/Scroll animate background image position

【jQuery】スクロール時にスクロールの逆方向へ背景画像を動かすテクニック/Scroll animate background image position

スポンサーリンク

実装内容

スクロール時にスクロールとは逆方向に背景画像がアニメーションする方法を紹介します。

実装所要時間:10分程度

実装方法

実装に必要なスクリプトはこれだけです

$(window).on('scroll load', function(){
 var bg = $(window).scrollTop();
  $('.bg01').css({top:bg/10*-1});
  $('.bg02').css({top:bg/5*-1});
});

【簡単な解説】
スクロール、ロード時に背景画像をtransitionで動かしています。背景画像はposition: absolute;で指定することで必要です。スクロール、ロード時の.scrollTop()の値を任意の数値で割り、.cssでtopの値を動的に変更しています。
ポイントは.cssでtopの値を動的に指定する時に-1を掛けて値をマイナスにしているところです。これにより、背景画像がスクロール方向とは逆に動くようになっています。
また、デモページのように背景を複数用意して、.scrollTop()をそれぞれ値にに指定すればデモページのような簡易的なパララックスの演出をみせることが可能です。

スポンサーリンク

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です