全体の動きが凝った演出になっているわけではないのですが、
ナビゲーションメニューと連動して背景画像がスライドして切り替わる動きが綺麗な
「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' } });
シンプルだけど気持ちがいい動きで
こういったギャラリープラグインは演出面での参考にもなります。
ご参考までに。。。
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>
>gideonさん
コメントいただきました件ですが
このプラグイン自体、私自身が作成したものではないので
その様な不具合の対応についてはちょっと判断できないのですが
半角英数で正常に表示されて、全角にするとおかしくなる場合は
プラグインJSファイルの文字コードをUTF-8にすることで
解消される可能性があるのではないでしょうか?
憶測になってしまいますがお試しください。
よろしくお願いします。