ランダムに文字や画像をパラパラ表示する、jQueryで。
@CyberMameCANです。暑くなって来ましたね。
ペットのボーダーコリーが早くもバテ気味です。
かちびと.netさんで紹介されていた羅列した要素をjQueryで徐々にランダム表示させるが面白そうです。
パラパラパラっと出てくるのが大好きな感じです。
テキストも画像も大丈夫です。
設置も簡単に出来るのが、また凄い。
class=”champagne”が付いたliに対してパラパラします。
HTML（抜粋）
[xhtml]
<div class=”container”>
<ul class=”champagne”>
<li>hello</li>
<li>namaste</li>
<li>bon giorno</li>
<li>chao</li>
</ul>
</div>
<script type=”text/javascript” src=”https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js”></script>
<script type=”text/javascript” src=”champagne/jquery.champagne.js”></script>
<script type=”text/javascript”>
$(function() {
$(“ul.champagne”).champagne();
});
</script>
[/xhtml]
CSSに追加（抜粋）
[css]
ol,ul{list-style:none}
body {
background: #fafafa;
color: #fff;
font-family: ‘Helvetica Neue’, ‘Arial’, sans-serif;
text-align: center;
-webkit-font-smoothing: antialiased;
}
.container {
margin: 0 auto;
width: 780px;
background: #fff;
height: 300px;
}
ul.champagne img {
margin-top: 1px;
}
ul.champagne li {
height: 25px;
padding: 0;
text-align: right;
width: 100%;
font-size: 19px;
}
ul.champagne div.hidden {
display: none;
}
ul.champagne li.test0 {
margin-bottom: 2px;
}
ul.champagne li.test1 {
margin-bottom: 16px;
}
ul.champagne li.test2 {
}
[/css]
jquery.champagne.js（抜粋）
パラメータの変更で表示の仕方に変化が出ます。
[javascript]
beginning_delay: 500,
delay_between: 200,
duration: 1000,
[/javascript]
ランダムに表示するのも楽しいけど、上の要素から順番に表示していくのも良いかも。
変更も簡単に出来そうですよ。
ライセンスはMITです。
MIT License
