サムネイル一覧や、コンテンツ一覧など同じような要素を並べて表示するページで、ページロード時に各要素を順番に表示する見せ方がありますが、今回はそれらの要素をランダムに、フェードインするアニメーションができるプラグイン「champagne.js」を使ってみました。
デモサンプル (テキストバージョン)
「champagne.css」と「jquery.champagne.js」をダウンロード
<head>内に「champagne.css」と「jquery.champagne.js」を読み込む
|
1 2 |
<link rel="stylesheet" type="text/css" href="css/champagne.css"> <script type="text/javascript" src="js/jquery.champagne.js"></script> |
【使い方】
HTML側で、ベースとなるコンテンツ要素に任意のクラス名（.champagne）をつけて、ランダムで表示させたい要素を並べます。
HTMLを記述
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<ul class="champagne"> <li><a href="#">No1</a></li> <li><a href="#">No2</a></li> <li><a href="#">No3</a></li> <li><a href="#">No4</a></li> <li><a href="#">No5</a></li> <li><a href="#">No6</a></li> <li><a href="#">No7</a></li> <li><a href="#">No8</a></li> <li><a href="#">No9</a></li> <li><a href="#">No10</a></li> <li><a href="#">No11</a></li> <li><a href="#">No12</a></li> <li><a href="#">No13</a></li> <li><a href="#">No14</a></li> <li><a href="#">No15</a></li> <li><a href="#">No16</a></li> <li><a href="#">No17</a></li> <li><a href="#">No18</a></li> <li><a href="#">No19</a></li> <li><a href="#">No20</a></li> <li><a href="#">No21</a></li> <li><a href="#">No22</a></li> <li><a href="#">No23</a></li> <li><a href="#">No24</a></li> </ul> |
CSSを記述
「champagne.js」側で子要素となるコンテンツに対して、ひとつひとつ<div> </div>で囲われる仕様になっているのでCSS側でひとまずこれらの要素に対して非表示にする指定を加えておきます。
|
1 2 3 |
.champagne div.hidden{ display: none; } |
JavaScriptを記述
|
1 2 3 4 5 6 7 8 9 10 |
$(function(){ $('ul.champagne').champagne({ beginning_delay: 1000, delay_between: 500, duration: 1000, onFinish:function(){ alert("アニメーションが終了しました。"); } }); }); |
ちなみに、ランダム表示させるコンテンツ要素は、画像でもテキストでも可能です。
画像をランダム表示する場合は下記のように記述します。
デモサンプル (画像バージョン)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<ul class="champagne"> <li><a href="#"><img src="images/img.jpg" alt="sea" /></a></li> <li><a href="#"><img src="images/img.jpg" alt="sea" /></a></li> <li><a href="#"><img src="images/img.jpg" alt="sea" /></a></li> <li><a href="#"><img src="images/img.jpg" alt="sea" /></a></li> <li><a href="#"><img src="images/img.jpg" alt="sea" /></a></li> <li><a href="#"><img src="images/img.jpg" alt="sea" /></a></li> <li><a href="#"><img src="images/img.jpg" alt="sea" /></a></li> <li><a href="#"><img src="images/img.jpg" alt="sea" /></a></li> <li><a href="#"><img src="images/img.jpg" alt="sea" /></a></li> <li><a href="#"><img src="images/img.jpg" alt="sea" /></a></li> <li><a href="#"><img src="images/img.jpg" alt="sea" /></a></li> <li><a href="#"><img src="images/img.jpg" alt="sea" /></a></li> <li><a href="#"><img src="images/img.jpg" alt="sea" /></a></li> <li><a href="#"><img src="images/img.jpg" alt="sea" /></a></li> <li><a href="#"><img src="images/img.jpg" alt="sea" /></a></li> <li><a href="#"><img src="images/img.jpg" alt="sea" /></a></li> <li><a href="#"><img src="images/img.jpg" alt="sea" /></a></li> <li><a href="#"><img src="images/img.jpg" alt="sea" /></a></li> <li><a href="#"><img src="images/img.jpg" alt="sea" /></a></li> <li><a href="#"><img src="images/img.jpg" alt="sea" /></a></li> <li><a href="#"><img src="images/img.jpg" alt="sea" /></a></li> <li><a href="#"><img src="images/img.jpg" alt="sea" /></a></li> <li><a href="#"><img src="images/img.jpg" alt="sea" /></a></li> <li><a href="#"><img src="images/img.jpg" alt="sea" /></a></li> </ul> |
![文字サイズを[小][中][大]と切り替えられる「jQuery Text Resizer」](https://morobrand.net/mororeco/wp/wp-content/uploads/2014/02/text-resize-s.jpg)
