ページ背景をフルスクリーンのスライドショーにするjQueryプラグインを作ってみた。（CSS3のアニメーション機能のみで実現）

王

2012.08.31

こんばんは、デザイナーのOです。
まずはデモをどうぞლ(╹◡╹ლ)。

先日、「ページ背景に画像をフルスクリーンで表示させてスライドショーを流す」という案件がありました。
これの実装ですが、まっさきに考えたのはやはりjQueryプラグインでした。
この手のプラグインなら探せばそこら中にごろごろ転がってるし、あまり新鮮味が感じられないというか・・
ところが、いつものようにプラグインあさりしてたら、こんな面白い記事が目に留まった！

Fullscreen background image slideshow with CSS3

これ、CSS3のみでフルスクリーンのスライドショーを作るという試みですな！僕的には結構面白くて、特に三番目のデモ、背景画像を緩やかに拡大しながら流していく見せ方がどことなくMacのスクリンセーバーを彷彿させるエレガントさが漂う～～

前からこういうのないかなってずっと思っていた！しかもCSS3でやっているから、動きがスムーズそのもの！

CSS3だけでできるのに、なぜまたjQuery?

結論から言うと、CSSのみで実現しようとすると、HTMLとCSSのコーディングが面倒です！
リンクの記事は英語ですが、興味のある方なら説明を読んで頂くと分かると思います。
英語読むのが嫌な人向けに、簡単に説明しますと↓

CSS3のアニメーション機能を使って、画像を順番に出していく。
「順番に出していく」にはそれぞれの画像に対して「animation-delay」を個別で設定する必要がある。その他、画像ごとの表示時間を変えようものなら@keyframesの中身も変更する必要がある。
実装するたびにケースバイケースでちゃんと計算し直すのは、とてもじゃないが、やるのが億劫なのだ。

そういうわけなので、jQueryプラグインを作ってみた（●＾o＾●）♪
名付けてsublime_slideshow

ダウンロードはこちら

sublime_slideshowの使い方

プラグイン本体と付属のCSSを追加

ソースをダウンロードして、jquery.sublimeSlideshow.js と　sublimeSlideshow.css　を読み込んで下さい。

<script type="text/javascript" src="js/jquery.sublimeSlideshow.js"></script>
<link rel="stylesheet" type="text/css" href="css/sublimeSlideshow.css" media="all" />

※ダウンロードしたフォルダにimages/pattern.pngという画像が入ってますが、これは背景画像の上にかけられるテクスチャーの画像です。フォルダに数パターン用意してありますので、jsで指定できます（下に書いてあるJSのパラメータ早見表を参照して下さい）。
もちろん画像テクスチャーをかけたくなければ使わなくても大丈夫です（その場合は削除して大丈夫です）。

※sublimeSlideshow.cssの中身を編集して、タイトルのサイズや色とかを自由に変えられますので、必要であれば編集してください。

JSの記述

準備が整ったらJSの記述のほうへ行きましょう。
一番シンプルな使い方だと、画像のurlとタイトル（省略可）を指定すればOKです。

$.sublime_slideshow({
src:[
{url:"images/1.jpg",title:"画像１のタイトル"},
{url:"images/2.jpg",title:"画像２のタイトル"},
{url:"images/3.jpg",title:"画像３のタイトル"},
{url:"images/4.jpg",title:"画像４のタイトル"},
{url:"images/5.jpg",title:"画像５のタイトル"}
]
});

もっと詳しく設定したいなら、下記のパラメータ早見表を参考して下さい

パラメータ名	デフォルト値	説明
scaling	1.17	拡大エフェクトの設定、値は画像サイズの倍率になります。falseをセットすればエフェクトを切ることができる
rotating	3	回転エフェクトの設定、値は度数で指定する。falseをセットすればエフェクトを切ることができる
duration	6	画像ごとの存続時間、単位は秒
fade	2	フェードイン・フェードアウトの速度指定、単位は秒
overlay	images/pattern.png	マスク画像のurlを指定する文字列

全てのパラメータを指定するとこんな感じになります

$.sublime_slideshow({
    src:[
    {url:"images/1.jpg",title:"星空"},
    {url:"images/2.jpg"},
    {url:"images/3.jpg",title:"月夜"}
    ],
    duration:   7,
    fade:       1,
    scaling:    true,
    rotating:   false,
    overlay:    "images/pattern.png"
});

動作原理

裏ではCSSとHTMLをそれぞれheadとbodyタグに挿入することで目的を達成しています。
なので、スライドショーの動き自体はネーティブのCSSで駆動しています。

まとめ

CSS3ならスライドショーの動きも円滑でメリットが多いのですが、HTML＋CSSの記述で手間がかかるからやりたくないという方にはぜひ使ってみてはいかがですか？
当然のことですが、IEには対応していませんので、IEに対応したい人には一個オススメのjQueryプラグインがある↓
vegas
vegasを使えば似たような動きはできるが、拡大とか回転とかはできません、とりあえずこいつでIEに対応したらいいと思います。
ちなみに、IE10ではアニメーションに対応する予定なので、テストしたことはないが、IE10なら動くはずです。

LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。

Webサイト制作の実績・料金を見る