JavaScript

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

  /

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

Contents
  1. リストタグ要素をランダムにフェードイン表示するCSSの記述
  2. jquery.champagne.jsを使ってリストタグ（li）要素をランダムにフェードイン表示するJavaScriptの記述
  3. リストタグ要素をランダムにフェードイン表示するHTMLの記述
  4. jquery.champagne.js：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アナリティクスタグは流用しないで下さい。

フェードイン li jquery.champagne.js ランダム
RELATED POST