2020年11月12日木曜日

スクロール時に指定した要素をアニメーション付きで表示

ページのスクロール時に、指定した要素を、指定したアニメーションで表示する。

デモページを表示

CSS

補足
  • アニメーション表示する要素（ data-scroll-animation 属性を付けた要素）をあらかじめ透明（見えない状態）にしておく。
  • 設定するアニメーションのクラス（ slideInLeft, slideInRight ）を用意しておく。
  • レイアウトが崩れる場合は リセットCSS・共通CSS の内容を確認。

jQuery

補足
  • このサンプルでは、対象となる各要素（ data-scroll-animation 属性を付けた要素）の上端が、ウィンドウ高さの１／４を超えたらアニメーションが始まり、表示される。
  • アニメーション表示されるのは、最初に表示される時だけ。
  • デモページで使用している jQuery のバージョンは 1.12.4 。

HTML

補足
  • アニメーション表示する要素に data-scroll-animation 属性とアニメーションを定義したクラスを設定する。

関連投稿

ラベル: , , ,