【jQuery】覚えておくと便利な、スクロールで対象要素がフェードするサンプル3つ [IE7対応]

150912_001

1枚画像背景のブロックをスクロールしていくサイトなどでは、ブロックの中身をフェードさせると、容易に見栄えを良くすることができます。

あまりやりすぎると訪問者の反感を買うので、シンプルな3つを用意しておくと便利です。

目次

検証済みブラウザとOS

  • IE 7~
  • Firefox
  • Google Chrome
  • Safari
  • Windows 7
  • OS X Yosemite
  • iOS 8
  • Android 4.1 / 5

 

フェードイン

  • 対象要素がスクロール内に現れたら、フェードインして終了
  • .each() で繰り返し処理させればOK

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

 

フェードイン繰り返し

else で切り替えて、スクロールが対象要素より上に行けば元に戻る

 

フェードイン / アウト

所定位置を起点とした、フェードイン / アウトの切り替え

 

問題点

タッチデバイスでカクつく
jQuery の .animate() メソッドは、慣性スクロールでレンダリングに誤差が生じる。気になるなら、ユーザーエージェント切り替えで iOS と Android はアニメーション無しにする。

 

    • このエントリーをはてなブックマークに追加