![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgc_t8Xtqpjzyc50ShGJM42eXrCT-lNuaVwMYA3Fd_XW0zK3zYOMWg5IJdCvLulcAtB8D4AtJrD5n72EV6PzMDggF4KUWXj1u6HHOsPsnbloIVmXzRiRhOwC2FHy0Fnzv_uLMECo0_ec5wk/s1600/%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AD%25E3%2583%25BC%25E3%2583%25AB%25E6%2599%2582%25E3%2581%25AB%25E6%258C%2587%25E5%25AE%259A%25E8%25A6%2581%25E7%25B4%25A0%25E3%2581%258C-029.jpg)
スクロール時に、指定要素がウィンドウ内に入ったらフワッと表示する方法を紹介します。
HTML
補足
- 必要であればフワッと表示したい要素に id または class を指定します。サンプルでは ul li 要素をフワッと表示させます。
jQuery
補足
- フワッと表示したい要素を変数 s に指定します(サンプルでは ul li 要素を指定)。
- ロード、リサイズ、スクロール時に、指定した要素の上端がウィンドウ内にあるかチェックして、ウィンドウ内にあれば透明度を変化させてフワッと表示しています。
CSS
補足
- スクロール時にフワッと表示したい要素を opacity: 0.0 で透明にしておきます。