パララックス 視差効果 (コンテンツと背景画像のスクロール速度が異なる)

[ ID : 1083 ]
シルバー
パララックス 視差効果 (コンテンツと背景画像のスクロール速度が異なる)

概要

【jQuery】スクロールに合わせたパララックス表現の中でも、コンテンツ間に視差効果を持たせて立体感や奥行きを演出するスクロールエフェクトを背景画像で実装。

用途・要件

  • スクロールエフェクトのparallaxをbackgroundプロパティとjQuery使って実装。
  • 視差の間隔を任意で設定可能。

注意事項

  • マウスホイールでスクロールした場合や素早くスクロールした場合など若干カクついて見える場合がある。

検証ブラウザ

  • Google Chrome(最新)
  • Safari(最新)
  • Firefox(最新)
  • Microsoft Edge(最新)

その他

  • jQuery v3.6.0使用。

実装方法

コンテンツの続きを閲覧するにはログインが必要です。 新規会員登録

この記事をシェアする

関連記事

全ての記事を見る

KONOCODEのメリット 無料会員登録