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

サイト構築 -JavaScript

Post on:2011年4月20日

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: 水平・垂直方向のオーバーレイのホバーポジション

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

Mosaicの主な特徴

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