スクロール方向により異なるアニメーションを付加

指定した要素に、ページのスクロール方向により異なるCSSアニメーションを付加する。

デモページを表示

CSS

補足

• 付加するCSSアニメーションを用意しておく。
• レイアウトが崩れる場合は リセットCSS・共通CSS の内容を確認。

jQuery

補足

• ページのスクロール方向を判定して、CSSアニメーションのクラスを追加・削除している。
• デモページで使用している jQuery のバージョンは 1.12.4 。

HTML

補足

• CSSアニメーションを付加する要素にクラス（scrolltop）をつけておく。