CSSアニメーションを可視領域に入ったら発火(inview.js その1)

NO IMAGE

cssアニメーションはとても便利なのですが、アニメーションをいつ発動させるかは、CSSだけでは操作できません。そこで要素が画面内に入ったことをシンプルに判定したい。そんな時は「inview.js」の出番です。

使用方法の基本も簡単です。
(1)CSSの@keyframesでアニメーションをつくる。
(2)(1)のアニメーションを適用するCSSクラスをつくる。
(2)inview.jsで、可視領域に入ったら(2)のクラスを付与する設定をする。
基本的には、これだけです。

注意点は、アニメーションさせる要素の初期状態のCSS設定です。opacityで消しておくなどの処置が必要です。elseでclassをremoveすることで、何度でも可視領域に入る際にアニメーションさせることができます。classをremoveした後のopacityも、初期状態に戻す意味合いですので、アニメーションの種類によっては適したCSSをつけてあげれば良いです。