2017年2月10日

スクロール時に指定要素がウィンドウ内に入ったらフワッと表示

スクロール時に、指定要素がウィンドウ内に入ったらフワッと表示する方法を紹介します。

HTML

補足

  • 必要であればフワッと表示したい要素に id または class を指定します。サンプルでは ul li 要素をフワッと表示させます。

jQuery

補足

  • フワッと表示したい要素を変数 s に指定します(サンプルでは ul li 要素を指定)。
  • ロード、リサイズ、スクロール時に、指定した要素の上端がウィンドウ内にあるかチェックして、ウィンドウ内にあれば透明度を変化させてフワッと表示しています。

CSS

補足

  • スクロール時にフワッと表示したい要素を opacity: 0.0 で透明にしておきます。

サンプル