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

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

2007年12月27日-はてなブックマーク

スポンサード リンク
[PR] 英単語を忘却曲線アプリを使って超効率よく記憶する方法
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 ベースで動くようです。

関連の記事検索:jQuery, ライブラリ
スポンサード リンク

By.KJ : 2007年12月27日 10:16 livedoor Readerで購読 Twitterに投稿

間違いの指摘をしていただける方はメール、あるいはTwitter/FBでお願いします(クリック)