1枚背景画像サイトで使えるかもしれないパララックスサンプル2つ [一部IE8未対応]

150913_001

サンプルの汎用性が低いので実務で使えるかは微妙。
ただ「こういうことが出来ます」と提案できるため、覚えておいて損はないはず。

検証済みブラウザとOS

  • IE 7~ ※2つめのサンプルはIE9以上
  • Firefox
  • Google Chrome
  • Safari
  • Windows 7
  • OS X Yosemite
  • iOS 8
  • Android 4.1 / 5

 

画像1枚をbodyに固定、ブロックごとに背景有ったり無かったり

  • JavaScript無し
  • body に背景画像を fixed 指定
  • 各ブロックには背景画像を fixed 指定するか、背景画像を無しにしているかだけ
  • ブロック要素は min-height 指定でコンテンツ量を可変に

Sass用のメディアクエリはこちらを参考。

 

各ブロックの背景を動かす

  • PCブラウザのみで使用
  • IE 11などはカクカクして微妙

HTML

背景を動かすブロックに class=”block” を追加(jQueryで操作)

 

SCSS

  • 背景を fixed で固定
  • background-position: center top; とするのがポイント

 

jQuery

  • Android/iOS では背景の高さが足りなくなるので、ユーザーエージェント切り替えでJavaScript無し
  • .each() メソッドで各ブロックごとに処理
  • 24行目の数字で背景を動かすピクセル数を調整する
  • ピクセル数が大きすぎると背景の高さが足りず、小さすぎると動いているように見えない

 

コメントを投稿する

※メールアドレスは私にだけ届き、サイトには表示されません。
※「送信する」ボタンは一度だけクリックしてお待ちください。