• かちびと.net

    羅列した要素をjQueryで徐々にランダム表示させる。champagne.jsというプラグインでフェードインしながらランダム表示されます。

    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で実装
出来る、というプラグインの
ご紹介。割と短いコードで作れる
エフェクトなので覚えておきたい
ですね。

要素をフェードインさせながらランダム表示させるjQueryのプラグイン・champagne.jsです。

champagne.js


とても軽量で、テキストでも画像でもOKです。シンプルなので色々応用が利きそう。

以下動作サンプルです。※再生ボタンで動作します。

コード

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.champagne.min.js"></script>
<script type="text/javascript">
  $(function() {
      $("ul.champagne").champagne();
  });
</script>

本体とプラグイン読み込んでセレクタ指定するだけ。オプションとして表示スピードも設定できます。コード見れば分かりますので設定の際はご確認下さい。

ライセンスはMITだそうです。

champagne.js

URL :
TRB :

Comments & Trackbacks (3)

Twitter

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

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

twitter facebook rss contact

Ads

Posts

Contact

Services