Animate.cssでhover,click,scrollなどイベントでアニメーション処理する応用テクニック

Animate.cssは簡単にCSSアニメーションを実装できる便利なライブラリですが、通常はページ読み込み時に実行されることがほとんどです。本記事では、hoverやclick、さらにスクロールイベントに連動してアニメーションを発火させる応用的な手法を解説します。

hover時にAnimate.cssを作動させる

jQueryを使用して、対象の要素にホバーした際にclassを動的に付与・削除することで、何度でもアニメーションを再生させることができます。

clickイベントでのアニメーション

ボタンをクリックした瞬間にアニメーションを開始させる手法です。ユーザーのアクションに反応するインターフェースを作る際に非常に有効です。

スクロールに合わせてフェードイン

「inview.js」などのプラグインを組み合わせることで、要素が画面内に表示されたタイミングでアニメーションを開始させることができます。単調になりがちなランディングページに動きを与える定番のテクニックです。

まとめ

Animate.cssはクラスの付け外しをJavaScriptで制御するだけで、表現の幅が大きく広がります。状況に応じて最適なトリガーを選んでみてください。