animate.cssとjquery.inviewで要素が表示された際にアニメーションを実行する

実装例

このように、画面上に要素が表示されるとアニメーションが動作します。この画面上に表示された際にアニメーションを実行するという制御を行わないと、ページが読み込まれた際にアニメーションが実行されてしまいます。そのため、要素が表示された際にアニメーションが実行されません。

必要なファイルを準備する

animate.css

animate.cssは要素に指定のclassを設定するだけで、アニメーションを設定できるCSSです。こちらのファイルはCDNもしくはダウンロードをして利用します。

CDN

<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" type="text/css" rel="stylesheet">

ダウンロード

• GitHub

jquery.inview

jquery.inviewは特定の要素がブラウザの表示領域に現れたときに処理を実行するプラグインです。こちらのプラグインは下記のURLからダウンロードして、利用します。

ダウンロード

• GitHub

用意したファイルを読み込む

用意したanimate.cssとjquery.inviewをアニメーションさせたいファイルにリンクさせます。jQueryも利用するため、併せてリンクを設定します。

<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.inview.min.js"></script>

jsの記述

jquery.inviewの設定

最初にjquery.inviewの設定を行います。基本の形は下記のとおりです。

上記の様に記載することで、要素が表示された時、されていない時の処理を設定することができます。

animate.cssの設定

次に、要素が表示された時に、アニメーションが実行されるようにanimate.cssの記述を行います。animate.cssには多数のアニメーションが用意されているので、動きについては、下記のサイトを参考にしてください。

• Animate.css

animate.cssにはオプションも多く用意されていますが、基本の指定は下記の通りです。

animate__animated animate__shakeX

末尾のshakeXがアニメーションの種類を表しているので、こちらを公式サイト右側に記載されているアニメーションと変更することで、動作の変更も可能です。
例　bounceに変更した場合：animate__animated animate__bounce

こちらのコードを先ほどのjquery.inviewに記載します。記載内容は、「該当要素が表示された際に、animate__animated animate__shakeXを追加する」という設定です。

これで、要素が表示された時にアニメーションをさせる設定は完了です。

表示される度にアニメーションをするためにはどうするか

上記の設定では、一度アニメーションが実行されると再読み込みされるまで、再実行はされません。表示させる度に、アニメーションを実行した場合は、要素が表示されていない時の処理を追加します。

上記のように、removeClassを利用し、表示されていないときにanimate.cssのclassを取り外すことで、表示される度に何度もアニメーションを実行することが可能です。

コラム カテゴリ

コラム一覧