要素の中身をアニメーションしながら切り替えられる「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 ベースで動くようです。
スポンサード リンク
Advertisements
SITE PROFILE
最新のブログ記事(新着順)
- 小説表紙などに使えそうな商用可なフォント「になロマン」
- 筆で書いたようなカナ書体「筆竹仮名B」
- 無料・商用利用可な丸文字ピクセルフォント「マルミーニャM」
- スペースコブラ風フォント
- Next.jsのVercelから商用利用可能なフリー汎用フォント「Geist Font 」
- 無料で使えるいい感じの日本語フォント「しっぽり太ゴシック」
- CSSのみで実装された500種類のローディングアニメーション「CSS Loaders」
- 画像ホバーで様々なエフェクトをかけられる「Izmir」
- CSSのbox-shadowをGUIで生成できる「CSS Box Shadows Generator」
- 好きな画像や文字を埋め込んだQRコードをリアルタイムで作れるWEBツール
- 過去のエントリ