jQuery MosaicIn.js 画像にモザイクイン効果をつけるプラグイン
モザイクイン効果のテスト
ボタンをクリックすると各画像がモザイクインします。
こちらのサイトを参考にさせていただきました。⇒jsdo.it mosaic-in images

Thumbnail

Thumbnail
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec.

Thumbnail
Cras justo odio, egestas eget quam. Donec.

Thumbnail
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec.

Thumbnail
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec.
kurdistan
Photo By jan Sefti Taken on March 20, 2009
プラグインの実行方法
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); } }); }); });
ブラウザの動作(Windows)
動作確認済み
Firefox 42.0
Internet Explorer 11.0
Chrome 47.0