エントリーの編集
エントリーの編集は全ユーザーに共通の機能です。
必ずガイドラインを一読の上ご利用ください。
スクロールで背景画像を別々に動かすパララックス効果
記事へのコメント0件
- 注目コメント
- 新着コメント
このエントリーにコメントしてみましょう。
注目コメント算出アルゴリズムの一部にLINEヤフー株式会社の「建設的コメント順位付けモデルAPI」を使用しています
- バナー広告なし
- ミュート機能あり
- ダークモード搭載
関連記事
スクロールで背景画像を別々に動かすパララックス効果
通常背景画像は記事を下にスクロールすると一緒に移動するか、もしくは背景画像が固定された状態でしか... 通常背景画像は記事を下にスクロールすると一緒に移動するか、もしくは背景画像が固定された状態でしか設定できません。しかしJQueryを使うと背景画像が横、斜めなど好きな方向に動かすことができます。 今回は、パララックス効果のある2種類のサンプルとコードを紹介します。 スクロールすると雲の背景画像が横に動く 元のコードはアメブロのデザイン「気球に乗って」のコードを元に少アレンジして紹介してあります。 サンプルを見ていただけば分かるとおりスクロールすると雲の背景画像が横に動きます。 背景画像を設置する要素名(id名やclass名)はサイトによって異なると思いますのでそれに合わせて要素名(id名やclass名)は変更してください。 このサンプルでは縦方向は0pxにしてあるので横方向のみ移動していきます。 スクロールすると背景が右に2pxづつ移動します。 htmlコード htmlのコードは記事の外側