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

TOP > min-technique > 【jQuery】スクロール時にスクロールの逆方向へ背景画像をアニメーションさせるテクニック/Scroll animate background image position

【jQuery】スクロール時にスクロールの逆方向へ背景画像をアニメーションさせるテクニック/Scroll animate background image position

スポンサーリンク

コーディングテクニックの実装内容

スクロール時にスクロールの逆方向へ背景画像をアニメーションさせるテクニックを紹介します。

実装所要時間:10分程度

CSS,JavaScriptの記述内容

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

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

実装のポイント

  • 1)$(window).on('scroll load', function()でスクロール、ロード時に背景画像をtransitionで動かす。背景画像はposition: absolute;で指定
  • 2)スクロール、ロード時の.scrollTop()の値を任意の数値で割り、.css()でtopプロパティの値を動的に変更
  • 3).css()でtopプロパティへ-1を掛けて値をマイナスにするのがポイント。これにより、背景画像がスクロール方向とは逆に動く
  • 4)デモページのように背景を複数用意して、.scrollTop()をそれぞれの値に指定すれば簡易的なパララックスの演出を実装できる

おすすめ記事

スポンサーリンク

「【jQuery】スクロール時にスクロールの逆方向へ背景画像をアニメーションさせるテクニック/Scroll animate background image position」への1件のフィードバック

コメントを残す

メールアドレスが公開されることはありません。