【javascript】画面に表示したらアニメーションで表示する

Javascript

画面に表示したらアニメーションで表示するjsです。

jqueryなしで、IEにも対応しています。

デモ

HTML

fade_boxが対象のクラスで、data-anitypeで動きのクラスを設定します。

IE対応をする場合はポリフィルを使用しますので<head>内に

を記入してください。

css

 

今回は下からと左右の設定をしています。

応用をすれば色を変えたり回転したりなど色々と動きをつけることが出来ます。

JS

 

IntersectionObserverというAPIを使っています。

これがIE対応していないのでPolyfillの設定が必要となります。

コメント

タイトルとURLをコピーしました