inview.jsでスクロールして表示されたらアニメーションを実行する-サンプル付き

inview.jsはスクロールして表示領域に入ったらイベントを開始させてくれるさせてくれるjQueryプラグインです。
CSSアニメーションとSVGのアニメーションを行うデモを作ってみました。
inview.js配布元

inview.jsでCSSアニメーションを実行する基本的な方法

サンプル

必要なファイルを読み込む

アニメーションのCSSはanimate.cssというライブラリを利用しています。
これのおかげで、クラス名を指定するだけでCSSアニメーションを実装できます。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.1/animate.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js" />
<script src="../jquery.inview.min.js" />

html

inview.jsを適用したい要素に任意のクラス名と、アニメーションを適用するためのクラス名animatedを記述します。

<div class="box1 animated">fadeInDown</div>
<div class="box2 animated">bounceIn</div>
<div class="box3 animated">lightSpeedIn</div>

jQuery

それぞれの要素に表示領域に入った時と、出た時のクラス名の付け外しの設定を行います。

$(function() {
  $('.box1').on('inview', function(event, isInView) {
    if (isInView) {
    //表示領域に入った時
      $(this).addClass('fadeInDown');
    } else {
    //表示領域から出た時
      $(this).removeClass('fadeInDown');
      $(this).css('opacity',0); //非表示にしておく
    }
  });
  $('.box2').on('inview', function(event, isInView) {
    if (isInView) {
      $(this).addClass('bounceIn');
    } else {
      $(this).removeClass('bounceIn');
    }
  });
  $('.box3').on('inview', function(event, isInView) {
    if (isInView) {
      $(this).addClass('lightSpeedIn');
    } else {
      $(this).removeClass('lightSpeedIn');
    }
  });
});

inview.jsでSVGの描画アニメーションを実装する方法

lazy line painterというSVGの描画アニメーションを行ってくれるプラグインと組み合わせて、表示領域に入った時にアニメーションが実行されるようにしています。

サンプル

必要なファイルを読み込む

htmlでjQuery本体と、lazy line painter 、 inview.jsのプラグインファイルを読み込みます。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js" />
<script src="../jquery.lazylinepainter-1.7.0.min.js" />
<script src="../jquery.inview.min.js" />

SVGファイルをコンバートする

  1. 描画したいSVGファイルを用意します。
  2. ファイル名を「leaf.svg」のような半角英数に変更します。ファル名がコンバートされたコードに使われるためです。
    htmlのid名としても使用するため、SVGファイルの区別がつきやすい区別がつきやすい名前が良いです。
  3. SVGファイルをlazy line painterのページ内にあるSVG TO LAZY LINE CONVERTERにドラッグ&ドロップしてコンバートします。
    img-convert
  4. コンバートされたコードをコピーして、任意のjsファイル、またはhtmlに貼り付けておきます。
    コードの10行目にファイル名が反映されているのを確認してください。
    img-code 
var pathObj = {
  "leaf": { //ファイル名で指定した文字列
    "strokepath": [{

html

SVGを表示したいところに空のdivタグを置いて、id名にコンバートしたコードの10行目の文字列(ここではleaf)を指定します。

<div id="leaf"></div>

jQuery

1〜5行目はinview.jsを実行するための記述、それ以降はlazy line painterでコンバートしたコードを関数化したものです。

  1. SVGを描画する場所を、js側で指定します。
    SVGをコンバートしたコードの最後から7行目
    $(‘#undefined’).lazylinepainter(
    の#undefinedを、htmlで指定したid名に書き換えます。
  2. lazy line painter でコンバートしたコードを 下記のように関数名で囲って関数化します。
    function leafview() { …コンバートしたコード… }
    leafviewは任意の名前でOKです。
    関数化しなくてもできるのですが、SVGが複数になった時にinview.js内の記述が煩雑になってしまうためです。
  3. 1〜8行目はinview.jsを実行するための記述です。
    1行目でhtmlで指定したidを記述します。
    4行目で(1)で作成した関数を指定します。 
$('#leaf').on('inview', function(event, isInView) {
  if (isInView) {
   $('#leaf').css('opacity',1) //表示
    leafview(); //SVG描画開始
  } else {
    $('#leaf').css('opacity',0) //非表示
  }
});
 
function leafview() {
  /* 
   * Lazy Line Painter - Path Object 
   * Generated using 'SVG to Lazy Line Converter'
   * 
   * http://lazylinepainter.info 
   * Copyright 2013, Cam O'Connell  
   *  
   */
  var pathObj = {
    "leaf": {
      "strokepath": [{
        "path": "M265.765,277.662v-34.071v-26.997V107.745c0-3.141-1.287-5.98-3.343-8.047   c-2.058-2.056-4.895-3.334-8.047-3.334c-6.283,0-11.381,5.097-11.381,11.381v94.297l-45.502-29.034   c-1.905-1.216-4.032-1.804-6.141-1.804c-3.749,0-7.407,1.865-9.576,5.27c-3.385,5.29-1.845,12.344,3.466,15.729l57.753,36.867   v67.675v29.733v34.983c0,3.141,1.276,5.99,3.334,8.046c2.067,2.057,4.904,3.345,8.046,3.345c6.293,0,11.39-5.097,11.39-11.391   v-54.065l88.258-74.019c2.696-2.25,4.084-5.482,4.084-8.736c0-2.584-0.892-5.178-2.666-7.306   c-4.064-4.824-11.238-5.452-16.052-1.408L265.765,277.662z",
        "duration": 1300
      }, {
        "path": "M464.959,249.408c-7.073-32.054-20.531-64.3-39.998-95.817C388.427,94.439,332.124,41.326,270.478,7.864   L255.997,0l-14.482,7.864C179.881,41.326,123.576,94.439,87.043,153.591c-19.468,31.517-32.926,63.763-39.999,95.817   c-7.824,35.418-7.6,69.651,0.648,101.725l0.172,0.689l0.213,0.678c10.528,34.223,34.526,60.754,69.398,76.736   c32.104,14.714,65.608,16.904,82.714,16.904c1.327,0,2.614-0.01,3.871-0.031v35.53V512h30.362h43.161h30.362v-30.361v-35.53   c1.257,0.021,2.544,0.031,3.861,0.031c17.116,0,50.609-2.19,82.723-16.904c34.872-15.972,58.869-42.512,69.398-76.736l0.204-0.678   l0.182-0.689C472.561,319.059,472.774,284.826,464.959,249.408z M434.903,343.574c-18.008,58.544-82.35,72.204-123.098,72.204   c-18.11,0-31.567-2.696-34.223-5.35v71.212h-43.161v-71.212c-2.655,2.654-16.113,5.35-34.233,5.35   c-40.749,0-105.08-13.66-123.098-72.204c-29.277-113.856,65.06-247.22,178.906-309.027   C369.852,96.354,464.179,229.718,434.903,343.574z",
        "duration": 1800
      }],
      "dimensions": {
        "width": 512,
        "height": 512
      }
    }
  };
  /* 
   Setup and Paint your lazyline! 
   */
 
  $('#leaf').lazylinepainter({
    "svgData": pathObj,
    "strokeWidth": 3,
    "strokeColor": "#4CAF50"
  }).lazylinepainter('paint');
}

おすすめ書籍

jQueryの基本～応用を学習するのにおすすめな書籍です。
こちらを一通りやれば、一般的なWebサイトのUIを実装する方法は身につくと思います。

jQuery標準デザイン講座
jQuery　仕事の現場でサッと使える! デザイン教科書