[JS]多彩なエフェクトが面白い、ボックスにパネルをスライド・フェード表示するスクリプト -Mosaic

画像のキャプションや付加情報の表示に一工夫したいときにぴったり、ボックスにパネルをさまざまなスライドやフェードのアニメーションで表示するjQueryのプラグインを紹介します。

デモのキャプチャ

Mosaic - Sliding Boxes and Captions jQuery Plugin
デモページ

[ad#ad-2]

Mosaicの主な特徴

  • 自動的にスライドするボックスとキャプションを生成
  • スライドやフェードなどアニメーションのカスタマイズが可能
  • ボックス内の画像のプリロード

多彩なエフェクトが用意されたデモ

デモではその多彩なエフェクトが楽しめます。

デモのキャプチャ

デモページ
サークル状の画像がフェード表示。

デモのキャプチャ

デモページ
画像全体に半透明のパネルがフェード表示。

デモのキャプチャ

デモページ
パネルが下からスライドのアニメーションで表示

[ad#ad-2]

デモのキャプチャ

デモページ
ちょっとだけ見えてるパネルがスライドのアニメーションで表示

デモのキャプチャ

デモページ
パネルが上からスライドのアニメーションで表示

デモのキャプチャ

デモページ
画像がスライドのアニメーションで消え、パネルが表示

デモのキャプチャ

デモページ
画像が下にスライドし、パネルが表示

デモのキャプチャ

デモページ
ダイナミックな斜め方向のスライドのアニメーションで表示

Mosaicの実装

HTML: circle

上記の一番上のキャプチャ、「circle」の実装例です。

<div class="mosaic-block circle">
	<a href="http://buildinternet.com/project/mosaic" class="mosaic-overlay">&nbsp;</a>
	<div class="mosaic-backdrop"><img src="http://buildinternet.s3.amazonaws.com/projects/mosaic/mosaic.jpg"/></div>
</div>

JavaScript:circle

$(document).ready(function($){
	$('.circle').mosaic({
		opacity:0.8 //Opacity for overlay (0-1)
	});
});

スクリプトのオプション

オプションで簡単に多彩なアニメーションを指定できます。

animation
アニメーションの種類、fade, slide が選択可能
speed
アニメーションのスピード
opacity
不透明度、fade時のみ
preload
ページのロード後のオーバーレイのフェードの有無
anchor_x, anchor_y
水平・垂直方向のアンカー、パネルを定位置にロック
hover_x, hover_y
水平・垂直方向のオーバーレイのホバーポジション

sponsors

top of page

©2018 coliss