背景画像のスライド切り替え演出が綺麗なjQueryメニュープラグイン「Sliding Background Image Menu with jQuery」

全体の動きが凝った演出になっているわけではないのですが、
ナビゲーションメニューと連動して背景画像がスライドして切り替わる動きが綺麗な
「Sliding Background Image Menu with jQuery」のご紹介。

Sliding Background Image Menu with jQuery | Codrops

≫Sliding Background Image Menu with jQuery | Codrops

≫デモはこちら：Sliding Background Image Menu with jQuery

メニューにマウスオーバーすることで
背景画像が分割された形でスライドして切り替わります。

デモのパターンは一つではなく、
チュートリアルページ内で複数紹介されています。

——————————————————————————-
・Show/hide
・Fade
・Sequential fade
・Side slide
・Side slide (bounce)
・Sequential slide
・Up/down
・Sequential up/down
・Alternating up/down
・Alternating up/down (2)
・Sequential alternating up/down
——————————————————————————-

実装もそんなに難しくなく組み込めそうです。

◆HTML
<div id="sbi_container" class="sbi_container">
	<div class="sbi_panel" data-bg="images/1.jpg">
		<a href="#" class="sbi_label">About</a>
		<div class="sbi_content">
			<ul>
				<li><a href="#">Subitem</a></li>
				<li><a href="#">Subitem</a></li>
				<li><a href="#">Subitem</a></li>
			</ul>
		</div>
	</div>
	<div class="sbi_panel" data-bg="images/2.jpg">
		...
	</div>
	...
</div>

◆SCRIPT
$('#sbi_container').bgImageMenu({
	defaultBg	: 'images/default.jpg',
	menuSpeed	: 300,
	border		: 1,
	type		: {
		mode		: 'verticalSlideAlt',
		speed		: 450,
		easing		: 'easeOutBack'
	}
});

シンプルだけど気持ちがいい動きで
こういったギャラリープラグインは演出面での参考にもなります。

ご参考までに。。。