JavaScript PR

jquery.champagne.jsを使ってリストタグ要素をランダムにフェードイン表示する方法

記事内に商品プロモーションを含む場合があります

jquery.champagne.jsを使ってリストタグ(li)要素をランダムにフェードイン表示する方法をご紹介します。
ページ表示時やクリック時に複数のliタグ要素をランダムにフェードイン表示させたい時に使えます。

リストタグ要素をランダムにフェードイン表示する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アナリティクスタグは流用しないで下さい。