画像の一覧など画面上にコンテンツ要素をたくさん並べられたWebページでは
ページのロード時に順々に要素を読み込んでアニメーション表示したり
見せ方を変えることで様々な印象を与えているWebサイトをよく見かけます。

そういったコンテンツ要素が一覧で並べられたページで
要素を簡単にランダムでフェードアニメーション表示させることができる
jQueryプラグイン「champagne.js」がとても便利そうだったのでご紹介。

champagne.js | fresh tilled soil


champagne.js | fresh tilled soil

使い方もとても簡単で、
まずHTML側ではベースとなるコンテンツ要素に
任意のクラス(「.champagne」とします)をつけて、
ランダムで表示させたい各要素を並べます。

<ul class="champagne">
<li><img src="img/image1.jpg" /></li>
<li><img src="img/image2.jpg" /></li>
<li><img src="img/image3.jpg" /></li>
<li><img src="img/image4.jpg" /></li>
<li><img src="img/image5.jpg" /></li>
</ul>

「champagne.js」側で子要素となるコンテンツに対して
一つ一つ<div class=”hidden”></div>で囲われる仕様になっているので
CSS側でひとまずこれらの要素に対して非表示する指定を加えておきます。

◆CSS
.champagne div.hidden {
	display: none;
}

そしてjQueryファイルと併せて、
プラグインファイル「jquery.champagne.js」をページ内に読み込ませて
スクリプトを実行させます。

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

オプションでは
————————————————————————————————
・beginning_delay → アニメーション開始までの時間
・delay_between → ランダム表示の間隔
・duration → フェードアニメーションのスピード
・onFinish → すべて表示完了した時の処理
————————————————————————————————
などもカスタム・追加できるようです。

◆SCRIPT
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.champagne.js"></script>
<script type="text/javascript">
$(function(){
	$('ul.champagne').champagne({
		beginning_delay: 1000,
		delay_between: 500,
		duration: 1000,
		onFinish:function(){
			alert("アニメーション終了");
		}
	});
});
</script>

ランダム表示させるコンテンツ要素は、画像でもテキストでも可能になっています。

コンテンツ一覧をとても簡単にランダム表示を実装できるので
便利に活用できそうです。

jQueryでランダム表示する際にぜひ。。。

  • このエントリーをはてなブックマークに追加
BlackFlag
FOLLOW

Related Posts

Comments (0)







コメント内容

※コメントにHTMLタグを直接入力しないでください。
※HTMLタグを入力する際はタグ一つ一つの括弧「<」「>」を全角に変換して入力してください。
コメントは承認制になっているのですぐには反映されません。コメント頂いた内容については出来る限り早めの対応を心掛けていますが、時期によって返答が遅くなってしまうことがありますので、何卒ご了承ください。
» コメントについてのご注意  |  » ライセンスに関して

画像などコンテンツ要素をランダムでフェードインさせることができるjQueryプラグイン「champagne.js」

Hatena Bookmark
Popular Entries
Recent Entries
PR
Facebook
Tweets
Books
  • jQuery Technical Note
  • 外掛OUT! jQuery 高手精技
Animal Protection
  • 福島被曝牛支援のお願い
  • NO FUR