• かちびと.net

    マウスオーバーでボタンがスライドダウンし、同時にコンテンツを横スライドさせるダイナミックなjQueryのご紹介。WanderWallはIE6でも動いてくれます。

    Kudos for

    WordPress jQuery
  • About This

    Web制作に役立つTips、チュートリアル、、マーケティングに役立つ情報などのリソースをほぼ毎日配信しています。宜しければメモ代わりにご利用下さい。詳しい情報はAbout me またはhumans.txtをご覧下さい。

    Kachibito.net is a community-based website for web designers and developers. The site includes a popular weblog, a design gallery, a open source software, design tips, and the various web-news.

  • Links

マウスオーバーで背景がスライドダウンし、同時にコンテンツを横スライドさせるダイナミックなjQuery

スポンサーリンク

jQueryを使った面白いスライダーがあった
のでメモ。IE6、7でも一応は動いてくれます
よ。メニューのボタンにマウスを乗せると、
他のボタンがフェードアウトし、マウスを乗
せたボタンだけ下にスライド、同時にコン
テンツが横にダイナミックにスライドします。

なかなか凝った感じで、IEでも一応動いてくれるので個人的な備忘録としてエントリー。ページ全体を使用するスライド系のjQueryプラグインです。

WanderWall

jquery-slider01
元記事ではcss3とHTML5 を使っているとありますが、動作そのものはjQueryを中心に作ってあるみたいなのでIEでも一応動作はしてくれます。全く同じ動きではないですけど、応用すれば普通に使えそう。

jquery-slider03
こんな感じでスライドします。他のメニュー項目はフェードアウト。

jquery-slider04
IE6のキャプチャです。一応は動いてくれますが、css3を使っているメニューの傾きやグラデーション、ドロップシャドウ等は実装できません。

コンテンツ部分はdiv要素をスライドさせています。

<div class="page">
<div class="mantletext">
<h3>jQuery</h3>
<h2>Wanderwall 1</h2>
</div>
</div>
<div class="page">
<div class="mantletext">
<h3>jQuery</h3>
<h2>Wanderwall 2</h2>
</div>
</div>

IEで一応動いてくれれば応用して使えるのでどこかで試したいですね。以下よりデモの確認とダウンロードが出来ます。

WanderWall – A jQuery, CSS3 & HTML5 Hover-Based Interface

URL :
TRB :

Comments & Trackbacks

Comments are closed.

Twitter

Web制作に役立つそうなリソースを独断と好みで配信しています。

かちびと.netにリンクの無いトラックバックはお受けいていません。
コメントされる前にガイドラインをご覧下さい。

twitter facebook rss contact

Ads

Posts

Contact

Services