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用のメディアクエリはこちらを参考。

 

各ブロックの背景を動かす(IE9以上)

  • PCブラウザのみで使用
  • IE / Windows版 Google Chrome などはカクカクして微妙
  • Windows版 Firefox / Mac は慣性スクロールのため効果あり

HTML

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

 

SCSS

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

 

jQuery

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

 

コメントを投稿する

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