0

コンテンツや画像やテキストなどをランダムにフェードインするjQuery「champagne.jp」

champagne

サムネイル一覧や、コンテンツ一覧など同じような要素を並べて表示するページで、ページロード時に各要素を順番に表示する見せ方がありますが、今回はそれらの要素をランダムに、フェードインするアニメーションができるプラグイン「champagne.js」を使ってみました。

 

デモサンプル (テキストバージョン)

champagne.css」と「jquery.champagne.js」をダウンロード

champagne.js

 

<head>内に「champagne.css」と「jquery.champagne.js」を読み込む

 

【使い方】

HTML側で、ベースとなるコンテンツ要素に任意のクラス名(.champagne)をつけて、ランダムで表示させたい要素を並べます。

HTMLを記述

 

CSSを記述

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

 

JavaScriptを記述

 

ちなみに、ランダム表示させるコンテンツ要素は、画像でもテキストでも可能です。
画像をランダム表示する場合は下記のように記述します。

 

デモサンプル (画像バージョン)




コメントを残す

mororeco > JavaScript > コンテンツや画像やテキストなどをランダムにフェードインするjQuery「champagne.jp」