Scrawlメモ:Animate.cssの利用方法+スクロールに応じてアニメーションさせる方法2019.03.282019年3月現在、スクロールに応じて要素をフェードインやスライドインさせるWebサイトはとても多く見られる。いったアニメーションを実装するのに、Animate.cssはとても便利(フェードイン、スライドイン、バウンド等、色々な種類のアニメーションを簡単に実装できるCSSライブラリ)。Animate.cssは、それ単体で出来るのは「ページを読み込んだ瞬間にアニメーションする」ところまで。スクロールに応じてアニメーションをさせるためには、JavaScript上で一工夫が必要らしい。調べた結果、これらの実装の方法がわかったので、メモします。▼まずはanimate.cssを読み込み。CSSファイルをダウンロードすることも出来ますが、ここではCDNから読み込みます。type="text/css">▼続けて、<body>内のアニメーションさせたい要素に”animated”というクラスと、実装したいエフェクトのクラスを付与。これで、アニメーションは動作するはずです。fadeInUp">TEST</h1></body></html>▼アニメーションは、CSSを記述することで、アニメーションにかかる時間とディレイ時間の設定が可能(下記はfadeInUpの場合の指定)。ちなみに、HTMLに直接指定することも可能。詳しくはAnimate.cssのドキュメンテーションを参照しよう(英語ですが)。引用となりますが、jQueryを読み込み、下記のようなJavaScriptを記載することで可能なようです。詳細はリンク先を確認ください。Scrawl広告を排除してくれるブラウザ”Brave”ファーストインプレ(一目惚れ)メモ:超簡単だった。Scrawl.ホーム検索トップ。