トップページやランディングページなどは目を引かせるために、スクロールしていく度にアニメーションするものが多くなっています。 特にCSS3が各ブラウザで標準化されてからはCSSだけでアニメーションが実装できるようになり、ライブラリとして様々なものが公開されています。
私が簡易なアニメーションを導入するのに「Animate.css」を利用しています。 すでに多くのサイトで紹介されていますが、class名に指定のアニメーション名を追加するだけで動きをつけてくれるので、導入が非常に簡単なのが魅力です。
公式サイトでそのアニメーションがデモが確認できるので、リンクを置いておきます。
Animate.css（公式）
Animate.cssの実装
実装するにはまずhead内でAnimatecssを読み込み（ここではCDNを利用）、そして動きをつけたい要素のclass名にアニメーション名とクラス名animatedを追加します。
<!--Animate.cssを読み込む-->
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.css">
</head><!--アニメーション名とクラス名animatedをclassに追加-->
<div class="bounce animated">bounce</div>これだけで簡単に動きが付けられますが、このままだとページ読み込みと同時にアニメーションしてしまいます。アニメーションはウィンドウ内に要素が出てきたときに見せたいので発火のタイミングをJQueryで調整します。
１つ１つの要素を指定するのは手間なのでanimation属性を設定し、要素の属性を書き換えるだけで様々なアニメーションを指定できるように考えてみました。先に実装サンプルを上げておきます。
発火スクリプトの実装サンプル
いかがでしょうか。
Animate.cssの中でフェードインするアニメーションを一通り実装してみました。
スクリプトの使い方について
まず、 JQueryを使うのでライブラリは読み込んでおいてください。そして、 Javascriptに下記コードをコピペします。
//アニメーション属性を持つ要素を非表示、animated属性を追加
$('*[animation]').addClass('invisible animated');
$(window).scroll(function () {
$('*[animation]').each(function () {
//アニメーションをさせる要素の上の位置
var imgPos = $(this).offset().top;
//ウインドウ上部の位置
var scroll = $(window).scrollTop();
//アニメーションを発火させる位置
var position = imgPos - window.innerHeight + window.innerHeight / 5;
//animation属性に記載されたアニメーション名を取得
if (this.hasAttribute('animation')) {
var animation = this.getAttribute('animation');
}
//発火位置まで来たら要素を表示し、アニメーションをclass名に追加
if (scroll > position) {
$(this).removeClass('invisible').addClass(animation);
}
//ページのトップまでスクロールしたら要素を非表示（リセット）
if (scroll < 10) {
$(this).removeClass(animation).addClass('invisible');
}
});
});スタイルシートで「invisible」要素を非表示にするため、visiblity：hiddenを指定します。 非表示といえばdisplay:noneもありますが、こちらは要素自体を削除してしまうためレイアウトが崩れてしまいますのでここでは使用しません。
/*アニメ―ションする要素を非表示にする*/
.invisible {
visibility: hidden;
}あとはHTMLの方で動きをつけたい要素のanimation属性にanimate.cssで指定されているアニメーション名を入力するだけ。下記例ではfadeInUpを指定しています。
<div class="box" animation="fadeInUp">fadeInUp</div>
アニメーションの指定は属性を書き換えるだけで調整できるので、編集はHTMLだけすればよく、ランディングページなんかにはあらかじめ入れておいたら良いかと思います。またWordpressなどのCMSではアニメーションを編集者が変更できるようにもできます。これはあまり実用性はなさそうですが・・・・。
補足として・・・
要素がウィンドウの1/5が出てきた段階でアニメーションが発火します。画面に要素が出てきた時にしてしまうと、スクロールの速度によって要素が画面に一部しか出てないのに発火してしまい、動きがあったのかよくわからないことになってしまったので少し遅らせています。
指定したアニメーションによっては遅く感じることもあるかも知れないので、その場合は、変数positionを下記に書き換えてください。
var position = imgPos - window.innerHeight;また、ウィンドウの高さを取得するのに JQueryのメソッドでも$(window).height()がありますが、 デバイスによって発火位置がずれてしまうためここではwindow.innerHeightを使用しています。高さの取得の違いについてはコチラを参照しました。
最後に
まだホームページに関する記事が少ない中 、コードを触れる人に向けた内容になっているので唐突な印象になってしまったかも知れませんが、備忘録も兼ねて定期的に書き込んでいけたらなと思っています。今後もよろしくお願いします。
コメント