最近では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ファイルに記載
|
1 2 3 4 5 6 |
<!--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> |
Animate.cssとinview.jsを呼び出しました。
htmlファイルに動かしたい要素の設定
要素が画面に入ったらアニメーションさせたい要素にclass="animated"を付けます。
|
1 |
<h1 class="title animated">この文字が動きます</h1> |
jQueryでアニメーションの種類を設定
最後にこのtitleクラスのh1タグをどのようなアニメーションで動かすかをjQueryで設定します。
jsファイルに記載
|
1 2 3 4 5 6 |
$(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ファイルに記載
|
1 2 3 |
.animated{ opacity: 0; } |
また、
jquery.inview.jsのアニメーションを制御しているanimate.cssのアニメーションはこちらで確認できます。
jsファイルに記載した際【ここにアニメーションの種類を記入】と書いてあるところにお好みのアニメーション（flash、fadeInなど）を入れて下さい。