前の記事 «:サングラスに好きな写真を映りこませるPhotoShopチュートリアル
次の記事 »:PHPのファイル群を1個のファイルにまとめることが出来る「phar」

要素の中身をアニメーションしながら切り替えられる「InnerFade with jquery」

2007年12月27日

スポンサード リンク
InnerFade with jquery
InnerFade is a small plugin for the jQuery-JavaScript-Library.

要素の中身をアニメーションしながら切り替えられる「InnerFade with jquery」。
スライドショーのように、要素内がアニメーションしながら切り替わるパーツが作れます。



便利なのは、画像が切り替わった際に、画像からのリンク先も切り替わる点。
実際には、次のように、ul 要素内の li を順にアニメーションするという仕様になっているようで、その実装も簡単です。

<ul id="portfolio">
<li>
<a href="http://medienfreunde.com/deutsch/referenzen/kreation/good_guy__bad_guy.html">
<img src="images/ggbg.gif" alt="Good Guy bad Guy" />
</a>
</li>
<li>
<a href="http://medienfreunde.com/deutsch/referenzen/kreation/whizzkids.html">
<img src="images/whizzkids.gif" alt="Whizzkids" />
</a>
</li>
<li>
<a href="http://medienfreunde.com/deutsch/referenzen/printdesign/koenigin_mutter.html">
<img src="images/km.jpg" alt="Königin Mutter" />
</a>
</li>
</ul>

画像広告をローテーションで回す際なんかに使えそうですね。
ライブラリ自体は jQuery ベースで動くようです。

スポンサード リンク

投稿者 KJ : 2007年12月27日 10:16 | ブックマークに追加する Subscribe with livedoor Reader
間違いの指摘をしていただける方はメールでお願いします


本を執筆しました。