jquery.champagne.jsを使ってリストタグ(li)要素をランダムにフェードイン表示する方法をご紹介します。
ページ表示時やクリック時に複数のliタグ要素をランダムにフェードイン表示させたい時に使えます。
Contents
ディスプレイ広告
リストタグ要素をランダムにフェードイン表示するCSSの記述
※champagne.cssファイルを読み込みます。ファイル内にはkeyframes等の記述があります。その他は必要に応じて変更して下さい。
<style>
body{
padding: 0;
text-align: center;
position: relative;
margin: 0;
height: 100%;
}
h1{
padding:10px 0;
font-size:18px;
line-height:1.4em;
}
</style>
<link rel="stylesheet" type="text/css" href="champagne.css">
jquery.champagne.jsを使ってリストタグ(li)要素をランダムにフェードイン表示するJavaScriptの記述
※jquery.min.js、jquery.champagne.jsファイルを読み込みます。$(ランダムにフェードイン表示させるエリア).champagne()でランダムにフェードイン表示させるエリア(ul.champagne)に対して設定します。
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.champagne.js"></script>
<script type="text/javascript">
$(function () {
$('ul.champagne').champagne();
});
</script>
リストタグ要素をランダムにフェードイン表示するHTMLの記述
※ランダムにフェードイン表示させるエリア(class=”champagne”)にリストタグ(li)を複数用意しました。必要に応じて変更して下さい。
<div class="clWrap">
<h1>liタグ要素をランダムにフェードイン表示</h1>
<div class="container">
<ul class="champagne">
<li class="post-item post-item-69"><a href="https://dad-union.com" title="DAD UNION">DAD UNION</a></li>
<li class="post-item post-item-78"><a href="https://dad-union.com/category/javascript" title="JavaScript">JavaScript</a></li>
<li class="post-item post-item-75"><a href="https://dad-union.com/category/jquery" title="jQuery">jQuery</a></li>
<li class="post-item post-item-60"><a href="https://dad-union.com/category/php" title="PHP">PHP</a></li>
<li class="post-item post-item-57"><a href="https://dad-union.com/category/css">css</a></li>
<li class="post-item post-item-69"><a href="https://dad-union.com" title="DAD UNION">DAD UNION</a></li>
<li class="post-item post-item-78"><a href="https://dad-union.com/category/javascript" title="JavaScript">JavaScript</a></li>
<li class="post-item post-item-75"><a href="https://dad-union.com/category/jquery" title="jQuery">jQuery</a></li>
<li class="post-item post-item-60"><a href="https://dad-union.com/category/php" title="PHP">PHP</a></li>
<li class="post-item post-item-57"><a href="https://dad-union.com/category/css">css</a></li>
<li class="post-item post-item-69"><a href="https://dad-union.com" title="DAD UNION">DAD UNION</a></li>
<li class="post-item post-item-78"><a href="https://dad-union.com/category/javascript" title="JavaScript">JavaScript</a></li>
<li class="post-item post-item-75"><a href="https://dad-union.com/category/jquery" title="jQuery">jQuery</a></li>
<li class="post-item post-item-60"><a href="https://dad-union.com/category/php" title="PHP">PHP</a></li>
<li class="post-item post-item-57"><a href="https://dad-union.com/category/css">css</a></li>
<li class="post-item post-item-69"><a href="https://dad-union.com" title="DAD UNION">DAD UNION</a></li>
<li class="post-item post-item-78"><a href="https://dad-union.com/category/javascript" title="JavaScript">JavaScript</a></li>
<li class="post-item post-item-75"><a href="https://dad-union.com/category/jquery" title="jQuery">jQuery</a></li>
<li class="post-item post-item-60"><a href="https://dad-union.com/category/php" title="PHP">PHP</a></li>
<li class="post-item post-item-57"><a href="https://dad-union.com/category/css">css</a></li>
<li class="post-item post-item-69"><a href="https://dad-union.com" title="DAD UNION">DAD UNION</a></li>
<li class="post-item post-item-78"><a href="https://dad-union.com/category/javascript" title="JavaScript">JavaScript</a></li>
<li class="post-item post-item-75"><a href="https://dad-union.com/category/jquery" title="jQuery">jQuery</a></li>
<li class="post-item post-item-60"><a href="https://dad-union.com/category/php" title="PHP">PHP</a></li>
</ul>
</div><!--/container-->
</div>
jquery.champagne.js:liタグ要素をランダムにフェードイン表示するデモページ
jquery.champagne.js:liタグ要素をランダムにフェードイン表示するデモ
ソース元:champagne.js | fresh tilled soil
ソース元:champagne.js | fresh tilled soil
じわじわ表示される感が必要な時に使えそうな気がします。
※流用される場合は自己責任でお願いします。
デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。