![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-M1AiL5pdYRxNfpIuhGy4K31ltrBBxB-By4_2Jgl5zuAXSp358i046egSyxKegQU38Ctml8rutEJK5uSBjetLWwnDslPwRzabqZmpAkjL2da2mmVfbEMOFwxcVQTl-6rYGDnRTDcP_shZ/s1600/%25E3%2582%25A4%25E3%2583%25A1%25E3%2583%25BC%25E3%2582%25B8068.png)
スクロール時に、指定要素がウィンドウに入ったらアニメーションをつけて表示する方法を紹介します。
HTML
補足
- img 要素の data-animation 属性でアニメーションの種類を指定しています。
jQuery
補足
- スクロール時に、指定要素の上端が画面下から100ピクセルの位置を超えたら data-animation 属性に指定されたアニメーション用のクラスを付加しています。
CSS
補足
- あらかじめ data-animation 属性のついた img 要素を非表示にしています。
- data-animation 属性で指定しているアニメーション用のクラスを定義しています