一枚の画像をマウスオーバーで自動ドアの様に分割してスライドさせることが出来る、
「Image splitting effect with CSS and JQuery」のご紹介。
≫Image splitting effect with CSS and JQuery « TutsValley
画像にマウスオーバーすると左右にスライドし、
下に隠してある要素(テキスト&画像など)を出現させることができます。
画像を分割して用意することなく、
一枚の画像をjQueryと<script>タグ、CSSの制御のみで
実現可能でちょっとおもしろい。
<script>タグの記述はちょっと長めなので
ここには記載しませんが、上記ライブラリページ等で確認できます。
試しにやってみたサンプルは以下(ボタンにロールオーバーしてみてください。)
残念なことに上記サンプルはIE8、Firefox3.0では動作確認済みですが
IE7、IE6ではうまく動作してくれません。。。
原因不明なまま今日はギブアップ…
(大元のライブラリページのデモはIE7、IE6でも動きます。)
ページ上の演出としてどこかで使える気がしています。
是非お試しあれ。。。