WordPressアップデートによるテーマファイル構成の不具合により、現在は仮のテーマで表示しています。
記事など読みづらいところが多々あると思いますがご了承いただけると幸いです。
鋭意修正中です…

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

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

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

champagne.js | fresh tilled soil


champagne.js | fresh tilled soil

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

[html]

[/html]

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

[css]
◆CSS
.champagne div.hidden {
display: none;
}
[/css]

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

[javascript]
◆SCRIPT



[/javascript]

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

[javascript]
◆SCRIPT



[/javascript]

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

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

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

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です