jquery.champagne.js:liタグ要素をランダムにフェードイン表示できるJs
- 2019.07.19
- JavaScript jQuery
- jquery.champagne.js, li, フェードイン, ランダム

ページ表示の際やクリック時に複数のliタグ要素をランダムにフェードイン表示してみます。
1.読込むCSS・JsファイルとJavaScriptの記述例
<link rel="stylesheet" type="text/css" href="champagne.css"> <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>
2.HTMLの記述例
<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-->
jquery.champagne.js:liタグ要素をランダムにフェードイン表示するデモ
ソース元:champagne.js | fresh tilled soil
じわじわ表示される感が必要な時に使えそうな気がします。
-
前の記事
jquery.roundabout.js、jquery.roundabout-shapes.js:リストタグの要素を色々な種類の回転方法で表示してみる 2019.07.18
-
次の記事
リスト(liタグ)の情報を1行ずつ切替えて1行ニュースの様に表示する方法 2019.07.20