要素が画面に入ったらアニメーションをするパララックス【inview.js】と【animeite.css】の使い方

最近ではLPのみならず、通常の企業サイトでもアニメーションを使用して要素を出現させたり動かしたりするサイトが増えてきました。
その中でも最も使いやすく動作が軽いjQueryのプラグイン【inview.js】と、cssのアニメーションプラグイン【Animate.css】の使い方をご紹介致します。

inview.jsのダウンロード

https://github.com/protonet/jquery.inviewからinview.jsをダウンロードしてjsフォルダにjquery.inview.jsファイルを格納。

Animate.cssのダウンロード

https://daneden.github.io/animate.css/からAnimate.cssをダウンロードしてcssフォルダにanimate.cssファイルを格納。

htmlファイルで呼び出し

htmlファイルに記載

これでhtmlファイルにAnimate.cssinview.jsを呼び出しました。

htmlファイルに動かしたい要素の設定

要素が画面に入ったらアニメーションさせたい要素にclass="animated"を付けます。

jQueryでアニメーションの種類を設定

最後にこのtitleクラスのh1タグをどのようなアニメーションで動かすかをjQueryで設定します。

jsファイルに記載

こちらは好みでの設定になりますが、上記の$(this).css('opacity',1);のように、画面に現れたときにopacityが1になるように設定すると、よりパララックス効果が得られますので、cssでもともとの設定をopacity:0;にしておきます。

cssファイルに記載

これで画面に要素が現れたときにパララックスアニメーションで要素が動きます。
また、jquery.inview.jsのアニメーションを制御しているanimate.cssのアニメーションはこちらで確認できます。

jsファイルに記載した際【ここにアニメーションの種類を記入】と書いてあるところにお好みのアニメーション(flash、fadeInなど)を入れて下さい。

投稿者:気まぐれWEBLOG管理人