[JS]画像をモザイク状に切り替えるスライドショーを実装するチュートリアル

切り替え時のアニメーションにはフェードやスライドのアニメーションがよく使用されていますが、ちょっと変わったタイル状に推移していくエフェクトをもったスライドショーを実装するチュートリアルをTutorialzineから紹介します。

Making a Mosaic Slideshow With jQuery & CSS
デモページ

スライドショー自体は、シンプルなHTMLで実装されています。

HTML

<div id="mosaic-slideshow">
<div class="arrow left"></div>
<div class="arrow right"></div>
<div class="mosaic-slide" style="z-index: 10;">

		<!-- The mosaic-slide div and the tiles are generated by jQuery -->
<div class="tile" style="..."></div>
<div class="tile" style="..."></div>
<div class="tile" style="..."></div>
<div class="tile" style="..."></div>
</div>
</div>

スクリプトのベースにはjQueryが使用されており、CSSは角丸でCSS3が使用されています。

スクリプトやスタイルシートはサイトでも公開されていますが、全ファイルをダウンロードすることもできます。