背景画像のスライド切り替え演出が綺麗な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]
◆HTML
[/html]
[javascript]
◆SCRIPT
$(‘#sbi_container’).bgImageMenu({
defaultBg : ‘images/default.jpg’,
menuSpeed : 300,
border : 1,
type : {
mode : ‘verticalSlideAlt’,
speed : 450,
easing : ‘easeOutBack’
}
});
[/javascript]
シンプルだけど気持ちがいい動きで
こういったギャラリープラグインは演出面での参考にもなります。
ご参考までに。。。
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にすることで
解消される可能性があるのではないでしょうか？
憶測になってしまいますがお試しください。
よろしくお願いします。