ランダムに文字や画像をパラパラ表示する、jQueryで。

@CyberMameCANです。暑くなって来ましたね。
ペットのボーダーコリーが早くもバテ気味です。

かちびと.netさんで紹介されていた羅列した要素をjQueryで徐々にランダム表示させるが面白そうです。

champagne.js

文字や画像をランダムに表示するJavaScript

パラパラパラっと出てくるのが大好きな感じです。
テキストも画像も大丈夫です。
設置も簡単に出来るのが、また凄い。

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



こういうブログもありました。

人気のあるブログ:

コメントを残す

メールアドレスが公開されることはありません。

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください