スクロール時に、指定要素がウィンドウに入ったらアニメーションをつけて表示する方法を紹介します。
HTML
補足
- img 要素の data-animation 属性でアニメーションの種類を指定しています。
jQuery
補足
- スクロール時に、指定要素の上端が画面下から100ピクセルの位置を超えたら data-animation 属性に指定されたアニメーション用のクラスを付加しています。
CSS
補足
- あらかじめ data-animation 属性のついた img 要素を非表示にしています。
- data-animation 属性で指定しているアニメーション用のクラスを定義しています