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

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

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

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

コーディングテクニックの使いどころ

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

実装難易度・必要なスキル

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

実装所要時間は15分程度

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

この記事を書いた人(著者情報)

片岡 学

カタチップ編集長。昭和生まれの30代でWeb業界歴は15年。プログラマー出身のWebデザイナー。現在はカタチップを運用しつつ事業会社でWEBメディアサイトのディレクター兼コーダーを担当。最近はSNSの運用にも業務範囲を拡大中です。

著者画像

スポンサーリンク

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

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