WordPressアップデートによるテーマファイル構成の不具合により、現在は仮のテーマで表示しています。
記事など読みづらいところが多々あると思いますがご了承いただけると幸いです。
鋭意修正中です…

背景画像のスライド切り替え演出が綺麗な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]

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

ご参考までに。。。

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

  • 2012年9月15日 @ 4:36 PM
    パーマリンク

    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>

    返信
  • 2012年9月15日 @ 11:23 PM
    パーマリンク

    >gideonさん

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

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

    返信

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です