スクロールの判定とCSSアニメーションを使ってみる

こんにちは、ウェブラボ技術メモです。
今回はjsでスクロールの判定を行い、それに応じてCSSでアニメーションしてみます。

DEMOはこちら

それでは実際に実装していきましょう。

まず、HTMLのbody内でアニメーションを効かせたい要素にクラスを与えます。

■HTML body内

次にhead内でjquery本体を読み込ませ、スクロールの判定を行うjsを記述します。

■HTMLhead内

これでスクロールの応じて、クラス「active」が与えられるようになりました。

最後にクラス「active」を得たとき、CSSでアニメーションさせるように記述します。

■HTMLhead内 CSS部分

対応ブラウザについて確認してみました。

◯ Google Chrome
◯ Firefox
◯ Safari
◯ Opera
◯ Internet Explorer 10+
× Internet Explorer 7、8、9

以上、技術メモでした。

  • このページを共有する

関連記事こちらの記事も合わせてどうぞ。