要素が画面に入ったらアニメーションをするパララックス【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ファイルに記載

<!--head内-->
<link rel="stylesheet" type="text/css" href="css/animate.css" media="all" />

<!--bodyタグ内最後の方-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="js/jquery.inview.js" type="text/javascript"></script>

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

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

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

<h1 class="title animated">この文字が動きます</h1>

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

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

jsファイルに記載

$(document).ready(function() {
  $('h1.title').on('inview', function(event, isInView) {
    $(this).addClass('ここにアニメーションの種類を記入');
    $(this).css('opacity',1);
  });
});

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

cssファイルに記載

.animated{
  opacity: 0;
}

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

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