|
|
第11回
ブラウザ一杯に広がったメイングラフィックに最適なスライドショーを作成する
ページ上部のメイングラフィックのスペースに、複数の情報を表示させるようにするスライドショーを作成します。今回は、メイン画像が中央に、その両側には前後のグラフィック画像に黒い半透明の画像が被さった状態で表示されるスライダーを作成していきます。前後の画像が両側に表示されるため、ウィンドウサイズが変わっても横幅いっぱいに画像が表示され、よりグラフィカルなイメージを与えることができます。
解説：（有）ムーニーワークス ハヤシユタカ前回は、クリックで開閉するスライドメニューを作成しましたが、今回はメイングラフィックスペースをグラフィカルにするスライダーを作成します。
■今回作成したサンプル
|
「ブラウザ一杯に広がったメイングラフィックに最適なスライドショーを作成する」
●スライドショーのHTML
まずヘッダーエリアの上にスライドショーを設置しますが、レイアウトによってはヘッダーの下など場所は自由に設定することができます。画像はli要素を使用して配置し、左右への移動ボタンをその下に配置させて、ボタンでのスライドの移動と一定時間でアニメーションさせる機能を追加させます。今回スライドさせる画像の幅と高さについてはモバイル対応させることを想定し、サイズの記述はしません。
■■■■ HTMLコード
<div id="slider"> <ul class="clearfix"> <li><a href="#"><img src="img/01.jpg" alt=""></a></li> <li><a href="#"><img src="img/02.jpg" alt=""></a></li> <li><a href="#"><img src="img/03.jpg" alt=""></a></li> <li><a href="#"><img src="img/04.jpg" alt=""></a></li> <li><a href="#"><img src="img/05.jpg" alt=""></a></li> <li><a href="#"><img src="img/06.jpg" alt=""></a></li> </ul> <p id="prev"> <img src="img/prev.png" alt="" width="64" height="64" class="rollover"> </p> <p id="next"> <img src="img/next.png" alt="" width="64" height="64" class="rollover"> </p> </div>
●CSSでの配置
スタイルシートにて画像を横に並べて配置してさせます。また中央に表示させる画像以外も同じ感じで表示させると主題が目立たなくなるので、半透明のドット側の画像を左右のエリアに配置させることによって中央のグラフィックを目立たせつつも、左右にもグラフィックイメージとしてインパクトのあるスライダーが出来上がります。
■■■■ CSSコード
#slider{
position: relative;
width:100%;
height: 480px;
overflow: hidden;
background: url(../img/loading.gif) no-repeat center center;
}
#slider ul{
position: absolute;
top: 0;
left: 0;
}
#slider li{
float: left;
}
#slider li img {
width: 900px;
height: auto;
}
#slider #prev,
#slider #next{
position: absolute;
top:220px;
cursor: pointer;
}
#slider #prev{ left:20px;}
#slider #next{ right:20px;}
/* for script */
#slider ul,
#slider #next,
#slider #prev{
visibility: hidden;
}
#slider .layer{
width: 900px;
height: 480px;
position: absolute;
top: 0;
left: 0;
background: url(../img/dot.gif) repeat 0 0 #666;
opacity: 0.5;
filter: alpha(opacity=50);
}
 |
 |
| メイングラフィックの左右には半透明のグレーのドット柄を配置させメインを目立たせている | |
●スライダーを実装する
スライダーの作成によくある機能をまとめてみると、一定時間でのアニメーション移動、ボタンでの移動、1枚辺りの表示時間の設定などを考える必要があります。また、最後の枚数になった際の挙動としては、最後にしたら一枚目が表示させるように設定しますが、この際に再生方向とは逆の方向に一気に先頭に戻ってしまうやり方と、一定方向でループさせるやり方があります。今回は後者のほうで作成してみます。
 |
●オプション管理やDOMや数値の変数
オプションを管理する変数を用意します。スライドの速度・イージング、自動スライドの有無・インターバルを簡単に変更出来るよう、スクリプトの最初で変数を定義します。
■■■■ JSコード
var options = {
duration: 400,
easing: 'easeOutCubic',
auto: true,
interval: 3000
};
■■■■ JSコード
var $window = $(window),
$container = $('#slider'),
$element = $container.find('ul'),
$list = $element.find('li'),
$next = $container.find('#next'),
$prev = $container.find('#prev'),
shift = 2,
lw = $list.find('img').width(),
lh = $list.find('img').height(),
len = $list.length,
timer = '',
isNarrowScreen = (function(){
return $(window).width()<767;
})();
DOMや数値などを変数に入れ、キャッシュさせます。
●スライダー内の画像を読み込んでいる間、ローダー画像を表示
スライダーに必要な画像がすべて読み込み終わるまでは、CSSでスライダーの背景に設定したローダー画像が表示される。このように処理すれば、この領域に何かを表示するために読み込み中であることをユーザーに伝えることができます。
■■■■ JSコード
#slider{
position: relative;
width:100%;
height: 480px;
overflow: hidden;
background: url(../img/loading.gif) no-repeat center center;
}
■■■■ JSコード
function load(){
var array = [$element, $next, $prev];
for(var i = 0; i < array.length; i++) array[i].css('visibility', 'visible');
$container.css('background', 'none');
};
●関数の実行
windowのロードが完了された時に実行する関数を設定します。
■■■■ JSコード
function initialize(){
setup();
rollover();
$window.on('resize', resize);
$next.on('click', function(){ slide(true); });
$prev.on('click', function(){ slide(false); });
load();
if(options.auto) timer = setInterval(function(){ slide(true) }, options.interval);
};
●スライダー画像の設定
次に、HTMLの操作を行っていきます。li要素の先頭が、スライダー中央に来るようにli要素を並び替えます。また、スマートフォンなどで幅が狭い場合は左右のフェードスクリーンを配置しないようにします。
■■■■ JSコード
function setup(){
for(var i = shift; i > 0; i--) $element.find('li').eq(len-1).remove().prependTo($element)
if(!isNarrowScreen){
for(var i = 0; i < 2; i++) $('').insertAfter($element);
$leftlayer = $container.find('.layer').eq(0);
$rightlayer = $container.find('.layer').eq(1);
} else {
$container.height(lh);
}
resize();
};
●画像を中央に配置
続いて、画像を中央に配置するための関数を作成します。ウィンドウの幅からli要素の幅を引いて半分にした値を、ulに設定すれば中央に表示されます。ただし、そのままではulの左側に空白が出来てしまいますので、先ほどの値からli要素2つ分の幅を引きます。
※この時、li要素2つ分の幅を引いているため、「HTMLの操作」の際にli要素を2回並べ替えています。
■■■■ JSコード
function resize(){
var _val = ($window.width() - lw) / 2 - lw * shift;
$element.css({
'width': lw * len,
'left': _val
});
if(!isNarrowScreen){
$leftlayer.css('left', _val + lw);
$rightlayer.css('left', _val + lw * 3);
} else {
$container.height(lh);
$list.css({
'width': lw,
'height': lh
});
}
};
 |
 |
| スライダー画像配置においての幅の設定 | 透明の画像を配置するdiv要素 |
●アニメーションの仕組みを作成
アニメーションを管理する関数を作成します。この関数では、自動スライドの停止・アニメーション・コールバック関数の呼び出しを行っています。この際、引数に入れた値によって右に動くか左に動くかを調整できるようにすることで、ひとつの関数で左右の動きを管理します。
■■■■ JSコード
function slide(direction){
if($element.filter(':animated').length) return;
if(options.auto) clearInterval(timer);
val = (direction)? -lw: lw;
$element.animate({
'marginLeft': val
}, options.duration, options.easing, callback);
};
先ほどの関数から呼び出されたコールバック関数では、先ほどの関数で動かしたmargin-leftをリセットするとともに、一番端のli要素を逆端に回りこませてループを行いました。その後自動スライドの再開を行っています。
■■■■ JSコード
function callback(){
(0 > val)? $element.find('li').eq(0).remove().appendTo($element): $element.find('li').eq(len - 1).remove().prependTo($element);
$element.css('marginLeft', 0);
if(options.auto) timer = setInterval(function(){ slide(true) }, options.interval);
};
今回は以上になります。
次回はmasonryでコンテンツを隙間なく敷き詰め表示方法をいろいろ作成したいと思います。
『現場でかならず使われている jQueryデザインのメソッド』
| 今回紹介したサンプルは『現場でかならず使われている jQueryデザインのメソッド』にてサンプルダウンロードとコードの解説を行っております。 |
 |
作成したサンプルや本の紹介はこちらをご覧ください。
2015/1/21
●本連載で使用している書籍「現場でかならず使われている jQueryデザインのメソッド」
| |
jQueryの特長は、通常のJavaScriptよりもシンプルなコードでWebサイトの動的なふるまいを記述できる点です。CSSと同じセレクタが利用できるので、HTML+CSSをひと通り理解していれば、文法や記述ルールはすぐに習得できます。書は、このようなjQueryの実践感覚を身につくように、アコーディオンやタブパネル、ツールチップといった頻出の基礎技術から、背景全面動画、パララックススクロールなどの現在流行している最新の手法まで、多彩なjQueryのテクニックを解説。現場の制作メソッドがぎっしり詰まった必携の一冊です！ |
Profile【ハヤシユタカ】2001年、有限会社ムーニーワークスを設立。WEB制作の他、書籍執筆、セミナー講演、企業研修などを行う。また、クリエイター育成機関デジタルハリウッドでは1999年より教鞭をとる。2004年からは、デジタルハリウッド大学大学院、明治大学大学院非常勤講師を歴任。2012年からはデジハリオンラインスクールにてWEB関連講座のeラーニング教材の開発に携わり、会社・自宅のPCからいつでも「HTML5」「WordPress」を学べる講座を担当。2013年御苗場Vol12.横浜にて「The Zoological Garden ～言葉のない対話～」エプソン賞受賞。
こちらの連載もあわせてご覧ください
●WordPressでブログでなくビジネスサイトをつくろう：http://www.mdn.co.jp/di/articles/2782/
●ゼロからはじめるHTML5でのサイト制作：http://www.mdn.co.jp/di/articles/2605/
●HTML5でサイトをつくろう：http://www.html5-memo.com/
●Webデザインクリップ：http://webdesignmatome.com/
【著書・共著】
●現場でかならず使われている jQueryデザインのメソッド (2014/4/25)
●HTML5デザイン 仕事のネタ帳 CSS3+JavaScript+CSSフレームワークと活用するプロのテクニック (2014/3/24)
●現場で役立つCSS3デザインパーツライブラリ (2013/5/17)
●WordPress 3.x 現場のワークフローで覚えるビジ?ネスサイト制作 (2012/9/20)
●WebデザイナーのためのHTML5入門 (2012/08)
●ポケット詳解 jQuery Mobile辞典 (2012/05)
●すべての人に知っておいてほしい HTML5 & CSS3 の基本原則(2012/10/20)
●すべての人に知っておいてほしい スタイルシートデザインの基本原則(2012/5/25)
