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

TOP > min-technique > 【jQuery】スクロール時に背景画像をスクロールの逆方向へ動かすパララックスアニメーションの実装方法(topプロパティを使用)

【jQuery】スクロール時に背景画像をスクロールの逆方向へ動かすパララックスアニメーションの実装方法(topプロパティを使用)

この記事は2018年7月11日に公開した記事です。

現在とは状況が違う場合がありますのでご注意ください。

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

今回はパララックス・スクロールエフェクトに関する内容です。スクロール時に背景画像をスクロールの逆方向へ時間差で動かすパララックスアニメーションを実装する方法(topプロパティをJSで制御)をご紹介します。

使いどころ

jQueryのプラグインを使用せず、手軽にパララックスを実装するのに便利です。慣性スクロールで滑らかなスクロールを実現できます。

実装所要時間: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】スクロール時に背景画像をスクロールの逆方向へ動かすパララックスアニメーションの実装方法(topプロパティを使用)」への1件のフィードバック

コメントは受け付けていません。