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

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

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

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

コーディングとjQueryの基礎的な知識があれば実務未経験のコーダー、マークアップエンジニア、Webデザイナー、エンジニア、副業の初心者など誰でも実装可能です。

実装所要時間は15分程度

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

$(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()をそれぞれの値に指定すれば簡易的なパララックスの演出を実装できる