以前の記事で「jQueryで画像などコンテンツ要素を順番にフェードインさせる方法」と題して、
一覧となって並べられた画像をjQueryを使って順々にフェードインさせる方法を紹介しましたが、
同様のパターンで、フェードインさせる順番をランダムにするパターンを
できるだけシンプルな構成で作ってみたので紹介してみます。
jQueryでランダムに画像などコンテンツ要素をフェードインさせる方法
まずは動作のサンプルから。
下記画面の「リロード」を押してみてください。
ページの読み込みが終わると
一覧画像がランダムによって順々にフェードインして表示されます。
この全体構成について、
まずはHTMLから。
◆HTML <div id="thumblist"> <ul> <li><a href="#"><img src="img/photo1.jpg" alt="" /></a></li> <li><a href="#"><img src="img/photo2.jpg" alt="" /></a></li> <li><a href="#"><img src="img/photo3.jpg" alt="" /></a></li> <li><a href="#"><img src="img/photo4.jpg" alt="" /></a></li> <li><a href="#"><img src="img/photo5.jpg" alt="" /></a></li> <li><a href="#"><img src="img/photo6.jpg" alt="" /></a></li> <li><a href="#"><img src="img/photo7.jpg" alt="" /></a></li> <li><a href="#"><img src="img/photo8.jpg" alt="" /></a></li> <li><a href="#"><img src="img/photo9.jpg" alt="" /></a></li> <li><a href="#"><img src="img/photo10.jpg" alt="" /></a></li> <li><a href="#"><img src="img/photo11.jpg" alt="" /></a></li> <li><a href="#"><img src="img/photo12.jpg" alt="" /></a></li> <li><a href="#"><img src="img/photo13.jpg" alt="" /></a></li> <li><a href="#"><img src="img/photo14.jpg" alt="" /></a></li> <li><a href="#"><img src="img/photo15.jpg" alt="" /></a></li> <li><a href="#"><img src="img/photo16.jpg" alt="" /></a></li> <li><a href="#"><img src="img/photo17.jpg" alt="" /></a></li> <li><a href="#"><img src="img/photo18.jpg" alt="" /></a></li> <li><a href="#"><img src="img/photo19.jpg" alt="" /></a></li> <li><a href="#"><img src="img/photo20.jpg" alt="" /></a></li> <li><a href="#"><img src="img/photo21.jpg" alt="" /></a></li> <li><a href="#"><img src="img/photo22.jpg" alt="" /></a></li> <li><a href="#"><img src="img/photo23.jpg" alt="" /></a></li> <li><a href="#"><img src="img/photo24.jpg" alt="" /></a></li> <li><a href="#"><img src="img/photo25.jpg" alt="" /></a></li> </ul> </div><!--/#thumblist-->
任意のID要素で<ul>リストを囲い
<li>リストで画像を25個ほど並べています。
画像一つ一つはリスト<li>で囲っており、
サンプルではこのリスト<li>の中の<img>を
一つずつをフェードインさせる構成にしています。
そしてこのHTMLソースに対してのCSSは以下の様に。
◆CSS #thumblist { width: 550px; } ul { margin: 0 auto; width: 550px; text-align: left; } ul li { margin: 5px; width: 100px; height: 100px; text-align: left; float: left; overflow: hidden; } ul li img { display: none; } /* ======================================= ClearFixElements ======================================= */ ul:after { content: "."; height: 0; clear: both; display: block; visibility: hidden; } ul { display: inline-block; overflow: hidden; }
順々にフェードインさせる対象となる
画像<img>にはCSS側で「display:none」を入れておく必要があります。
その他は特に重要な項目もなく、
サンプル画面用のレイアウトを形成する内容になっています。
そして実際の動作実行用のスクリプトは以下の様になります。
◆SCRIPT <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script> $(function(){ var setElm = $('#thumblist img'), delaySpeed = 100, fadeSpeed = 500; $(window).load(function(){ randomShow(); function randomShow(){ var elmLength = setElm.length, randomSet = Math.floor(Math.random()*elmLength); $(setElm[randomSet]).css({display:'block',opacity:'0'}).animate({opacity:'1'},fadeSpeed); setElm.splice(randomSet,1); if (elmLength > 0) { setTimeout(function(){randomShow();},delaySpeed); } else { return false; //全てロード終了後に処理を加える際はココに } } }); }); </script>
スクリプト開始部分にある
——————————————————
var setElm = $(‘#thumblist img’),
delaySpeed = 100,
fadeSpeed = 500;
——————————————————
が上から
——————————————————
・フェードインさせる対象となる要素
・読み込みの遅延時間
・表示時のアニメーション(フェード)時間
——————————————————
となっているので、この部分の値を変更することで、
それぞれスピードなど調整することが可能となっています。
スクリプトでは「setElm」に入れた対象要素の数を数えて表示順をランダムで設定し、
個数分「randomShow()」functionを実行させています。
フェードイン動作では「.fadeIn()」を使う方がシンプルではありますが
「.animate()」を使うようにしておくことで、
フェード処理以外のちょっとしたアニメーション演出も
簡単にカスタム追加することができるかと思うので
あえてこの形にしてあります。
スクリプト構成については以下のプラグインを参考にしてあります。
【参考プラグイン】画像などコンテンツ要素をランダムでフェードインさせることができるjQueryプラグイン「champagne.js」
ランダム表示の応用として、
ページに並べられる<li>リストの順序もランダムにシャッフルして
さらにフェードインの順番もランダムにするパターンも作ってみたので併せて紹介してみます。
【応用?】jQueryでランダムに画像などコンテンツ要素をフェードインさせる方法
まずは動作のサンプルから。
下記画面の「リロード」を押してみてください。
リロードするごとに<li>の並びをランダムで入れ替えて
フェードインさせる順序もランダムで表示されます。
構成に関して、HTMLとCSSは先のものと同じで
スクリプトのみ追記になってます。
◆SCRIPT <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script> $(function(){ // リストのランダム並べ替え var rdmList = $('#thumblist ul li'), listParent = $('#thumblist ul'), array = []; rdmList.each(function(){ array.push($(this).html()); }); array.sort(function() { return Math.random() - Math.random(); }); listParent.empty(); for(i=0; i < array.length; i++) { listParent.append('<li>' + array[i] + '</li>'); } // リストのランダム表示 var setElm = $('#thumblist img'), delaySpeed = 100, fadeSpeed = 500; $(window).load(function(){ randomShow(); function randomShow(){ var elmLength = setElm.length, randomSet = Math.floor(Math.random()*elmLength); $(setElm[randomSet]).css({display:'block',opacity:'0'}).animate({opacity:'1'},fadeSpeed); setElm.splice(randomSet,1); if (elmLength > 0) { setTimeout(function(){randomShow();},delaySpeed); } else { return false; //全て終了後に処理を加える際はココに } } }); }); </script>
スクリプト開始部分にある
——————————————————
var rdmList = $(‘#thumblist ul li’),
listParent = $(‘#thumblist ul’),
——————————————————
が上から
——————————————————
・ランダムで位置を入れ替える要素
・ランダムで位置を入れ替える要素の親要素
——————————————————
となっているので、実装する際の構成によって
この部分の変更が必要になります。
<ul><li>構成ではなく
親要素が任意のIDの付いた<div>で
子要素がその中に入る<div>、という構成でも可能です。
【例】————————————————
var rdmList = $(‘div#thumblist div.child’),
listParent = $(‘div#thumblist’),
——————————————————
ランダムでの入れ替えは以下の記事を参考にさせていただきました。
この様に要素をランダムでフェードインさせることで
サイトに派手目な印象を加えることができるかと思います。
トップページのキービジュアルやギャラリーページやポートフォリオページなどでの魅せ方に是非。。。