jQuery – inview.js で画面に表示されたタイミングでアニメーションを開始する

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

inview.jsとAnimate.cssで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のプラグインファイルを読み込みます。
lazy line painter配布元

<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ファイルを用意します。
    イラレでSVGに書きだしたものを使用することもできますが、今回はICOOON MONOさんで配布されている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');

}

RELATED POSTS