スクロール時に、見出し文字列を１文字ずつ、指定した間隔でアニメーションさせる。
デモページを表示
CSS
補足
- h2 要素内の span 要素で、見出し文字列の１文字のスタイルを設定している。なお、アニメーションさせるために span 要素は inline-block 化している。
- 文字に適用するCSSアニメーション（bounce）を定義している。
- レイアウトが崩れる場合は リセットCSS・共通CSS の内容を確認。
jQuery
補足
- ロード時に、見出し文字列を１文字ずつ span 要素で区切っている。
- このサンプルでは、ロード・スクロール時に、見出しがウィンドウの高さの1/2を超えたときに、data-animation 属性で指定されたCSSアニメーションのクラスを span 要素に追加している。
- １文字ずつ順番にアニメーションさせるために、data-delay 属性で指定された秒数間隔をあけて、各 span 要素にCSSアニメーションのクラスをつけている。
- デモページで使用している jQuery のバージョンは 1.12.4 。
HTML
補足
- data-animation 属性に適用するCSSアニメーションのクラスを指定する。また、各文字のアニメーション開始の間隔を data-delay 属性に指定する。
関連投稿