ホームページにanimate.cssを使って、アニメーション効果を実装する

こんにちは。WEB担当の堀内です。

トップページやランディングページなどは目を引かせるために、スクロールしていく度にアニメーションするものが多くなっています。 特に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で調整します。

1つ1つの要素を指定するのは手間なので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');
  }
 });
});

あとは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を使用しています。高さの取得の違いについてはコチラを参照しました。

最後に

まだホームページに関する記事が少ない中 、コードを触れる人に向けた内容になっているので唐突な印象になってしまったかも知れませんが、備忘録も兼ねて定期的に書き込んでいけたらなと思っています。今後もよろしくお願いします。

      1
2345678
9101112131415
16171819202122
23242526272829
3031     
    123
45678910
11121314151617
18192021222324
252627282930 
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
1234567
891011121314
15161718192021
22232425262728
293031    
       
    123
45678910
11121314151617
18192021222324
25262728293031
       
    123
45678910
11121314151617
18192021222324
25262728   
       
     12
3456789
10111213141516
17181920212223
24252627282930
31      
1234567
891011121314
15161718192021
22232425262728
293031    
       
     12
3456789
10111213141516
17181920212223
24252627282930
       
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
    123
45678910
11121314151617
18192021222324
252627282930