デモページ ダウンロード↓
こんばんは、デザイナーの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" />JSの記述
準備が整ったらJSの記述のほうへ行きましょう。 一番シンプルな使い方だと、画像のurlとタイトル︵省略可︶を指定すればOKです。$.sublime_slideshow({
src:[
{url:"images/1.jpg",title:"画像1のタイトル"},
{url:"images/2.jpg",title:"画像2のタイトル"},
{url:"images/3.jpg",title:"画像3のタイトル"},
{url:"images/4.jpg",title:"画像4のタイトル"},
{url:"images/5.jpg",title:"画像5のタイトル"}
]
});| パラメータ名 | デフォルト値 | 説明 |
|---|---|---|
| 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"
});
