全体の動きが凝った演出になっているわけではないのですが、
ナビゲーションメニューと連動して背景画像がスライドして切り替わる動きが綺麗な
「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'
	}
});

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

ご参考までに。。。

  • このエントリーをはてなブックマークに追加
BlackFlag
FOLLOW

Related Posts

Comments (2)

  • gideon | 2012.09.15 16:36

    Sliding Background Image Menu with jQueryに興味があり、カスタマイズしていて気付いた事。
    メニューで表示する文字を全角にすると、ボックスが上下に膨張してしまい見た目が悪い状態になります。
    半角カタカナは半角英数字同様問題は起きません。
    解決策は無いでしょうか?
    <div class=”sbi_panel” data-bg=”images/SRYO04.jpg”>
    <a href=”#” class=”sbi_label”>最新の作品</a>
    <div class="sbi_content">
    <ul>
    <li><a href="#">全角</a></li>
    </ul>
    </div>
    </div>

  • BlackFlag | 2012.09.15 23:23

    >gideonさん

    コメントいただきました件ですが
    このプラグイン自体、私自身が作成したものではないので
    その様な不具合の対応についてはちょっと判断できないのですが
    半角英数で正常に表示されて、全角にするとおかしくなる場合は
    プラグインJSファイルの文字コードをUTF-8にすることで
    解消される可能性があるのではないでしょうか?

    憶測になってしまいますがお試しください。
    よろしくお願いします。







コメント内容

※コメントにHTMLタグを直接入力しないでください。
※HTMLタグを入力する際はタグ一つ一つの括弧「<」「>」を全角に変換して入力してください。
コメントは承認制になっているのですぐには反映されません。コメント頂いた内容については出来る限り早めの対応を心掛けていますが、時期によって返答が遅くなってしまうことがありますので、何卒ご了承ください。
» コメントについてのご注意  |  » ライセンスに関して

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

Hatena Bookmark
Popular Entries
Recent Entries
PR
Facebook
Tweets
Book
  • jQuery Technical Note
Animal Protection
  • 福島被曝牛支援のお願い
  • NO FUR