jQuery MosaicIn.js 画像にモザイクイン効果をつけるプラグイン

ボタンをクリックすると各画像がモザイクインします。

こちらのサイトを参考にさせていただきました。⇒jsdo.it mosaic-in images

jQueryとMosaicIn.jsを読み込む

jQuery MosaicIn.jsはこちらからダウンロードできます。
⇒画像にモザイクインさせるjQueryプラグイン MosaicIn.js ver 0.5(11KB)

  <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
  <script src="/js/jquery.mosaic-in.js"></script>
                

モザイクインさせる画像を配置する

  <img class="mosaic-in" src="/images/stone1.jpg">
  <img class="mosaic-in" src="/images/stone2.jpg">
  <img class="mosaic-in" src="/images/stone3.jpg">
                

プラグインの実行スクリプトを書く

  $(document).ready(function () {
      $('.mosaic-in').mosaicIn();
  });
                

エフェクトの持続時間を調整する

オプションにいくつかのパラメーターを指定できます。ひとつはdurationプロパティで、エフェクトの持続時間をミリ秒単位（1秒なら1000）の数値で指定します。初期値は800です。なお、このプラグインはエフェクト処理をrequestAnimationFrame()メソッドを介して行っていて、FPSが60フレームの環境で動作することを想定しています。しかし、スペックの低いPCやスマートフォンなど、デバイスによってはこれより低いFPSで動作するケースがあり、その場合、指定した時間よりエフェクト時間が長くなることがあります。

また、intervalFrameプロパティでこちらはアニメーションの滑らかさの度合いを調整します。注意点として、intervalFrameプロパティは必ず1以上の整数を指定します。初期値は1で、もっともアニメーションが滑らかに動きます。数値を増やすごとにスムーズさがなくなり、カクカクしたアニメーションになります。実用範囲は10ぐらいまででしょう。

その他にエフェクト開始時のタイル数をhorizontalPixelsで指定でき、モザイクアウトに効果を切り替えたいならreverseにtrueを指定、beforeStartとafterFinishはエフェクトの始めと終わりにそれぞれコールバック関数を指定できます。

      $('.mosaic-in').mosaicIn({
          duration: 1500,
          intervalFrame: 5
      });
  });
                

後から動的に画像ファイルを指定する場合

まず、画像を表示するコンテナ要素（DIV要素など）をHTML上にあらかじめ用意します。jQueryオブジェクトでその要素を取得して、mosaicIn()を実行し、その際オプションのimageURLとimageClassプロパティを指定します。

  <div id="image-container"></div>
                

  $(document).ready(function () {
      $('#image-container').mosaicIn({
          imageURL: '/images/stone_00097.jpg',
          imageClass: 'img-responsive large-image'
      });
  });
                

IMG要素を指定するケース

URLの代わりにIMG要素を第1引数に渡すこともできます。ただし、対象はsrcにURLを指定済みのIMG要素とします。オプションがあれば第2引数に指定します。

  <div id="image-container"></div>
                

  $(document).ready(function () {
      var image = document.createElement('IMG');
      image.className = 'img-responsive large-image';
      image.src = '/images/stone_00097.jpg';
  
      $('#image-container').mosaicIn(image, opt);
  });
                

このページのデモ用スクリプト

  $(function () {
    var reversible,
      animStarted;
    
    $('#button-1').on('click', function () {
      $(this).blur();
      
      $('.mosaic-in').mosaicIn({
        duration: 1500,
        intervalFrame: 5,
        transition: 'linear',
        horizontalPixels: 4
      });
    });
    
    reversible = false
    animStarted = false;
    $('#button-2').on('click', function () {
      var button = $(this);
      button.blur();
      
      if (animStarted) {
        return;
      }
      
      button.prop('disabled', true);
      animStarted = true;
      
      $('#image-1').mosaicIn({
        imageURL: '/images/cc/201006280400_sm.jpg',
        imageClass: 'img-responsive large-image',
        
        duration: 1200,
        intervalFrame: 3,
        
        reverse: reversible,
        afterFinish: function () {
          animStarted = false;
          reversible = reversible ? false : true;
          button.prop('disabled', false);
        }
      });
    });
  });
                

動作確認済み

Firefox 42.0

Internet Explorer 11.0

Chrome 47.0