CSS3で背景をフルスクリーン表示しスライドショーになる「CSS3 Fullscreen Slideshow」の組み込み

CSS3で背景をフルスクリーン表示しスライドショーになる「CSS3 Fullscreen Slideshow」の組み込み

今回はjQueryは使わないスライドショーの紹介です。
JavaScriptとCSS3で動きます。
その他の設定もCSSファイルにて行うタイプのスクリプトです。

因みにですが、スライドショーで動くのは画像ではあるのですが、背景として画像を設定してその背景画像をスライドショーとして動くことを指しています。

CSS3 Fullscreen Slideshowの本家サイトです。

• CSS3 Fullscreen Slideshow本家

phptemp_css3fullscreenslideshow_160115.zip

CSS3 Fullscreen Slideshowを組み込んだページのサンプルです。

• 組み込み済みサンプルページ

当サイト内の「SEOの基礎知識」の中のコンテンツです。

• コンテンツSEOのためのWEBサイトテンプレート（PHP）

凡そ、流れ的には以下のような順番です。

1. ダウロードしてきたファイルを展開する。
   展開した中からJSファイルをWEBサイトテンプレート（PHP）内の「 /js/ 」に、CSSファイルと画像を「 /css/ 」内にコピーする。
2. CSSと、メインhtmlソースをWEBサイトテンプレート（PHP）に書き込む。
3. JSファイル、CSSファイル、メインhtmlソースを書いたファイル、画像をアップする。

ということで、上記の内容を以下で詳細解説致します。

ダウンロードしてきたフォルダ内にある「 /CSS3FullscreenSlideshow/js/modernizr.custom.js 」をそのままWEBサイトテンプレート（PHP）のJSフォルダに入れそのままアップして下さい。
このJSファイルは触ることはありません。

因みにですが、当サイトのサンプルでは本家サイト内にある”Demo1”を組み込んでいます。

ダウンロードしてきたフォルダ内にある「 /CSS3FullscreenSlideshow/css/style1.css 」と「 /CSS3FullscreenSlideshow/css/fonts/ 」をそのままWEBサイトテンプレート（PHP）のCSSフォルダに入れそのままアップして下さい。
「 /fonts/ 」フォルダはCSSのファイルと同階層に設置すると便利です。
ダウンロードファイル中にある「 /CSS3FullscreenSlideshow/css/demo.css 」の中で画像の置き場を決めているので、CSSを調整可能な方は画像の置き場を調整することも出来ます。

次に、「 /CSS3FullscreenSlideshow/css/demo.css 」中の最初に記載されているフォントの指定を、「 /CSS3FullscreenSlideshow/css/style1.css 」に転記して下さい。
テキストを使わない場合は特に必要ありません。
転記する内容は以下の通りです。

@font-face {
	font-family: 'BebasNeueRegular';
	src: url('fonts/BebasNeue-webfont.eot');
	src: url('fonts/BebasNeue-webfont.eot?#iefix') format('embedded-opentype'),
	url('fonts/BebasNeue-webfont.woff') format('woff'),
	url('fonts/BebasNeue-webfont.ttf') format('truetype'),
	url('fonts/BebasNeue-webfont.svg#BebasNeueRegular') format('svg');
	font-weight: normal;
	font-style: normal;
}

因みにですが、本家サイト内にある”Demo1”の数字と、ダウンロードフォルダ内にある「 style1.css 」の数字を併せると同じ挙動をします。

次にhtmlソースの記述を追記します。

以下のソースを index.php の body 直下に記述して下さい。

<ul class="cb-slideshow">
<li><span>Image 01</span><div><h3>re·lax·a·tion</h3></div></li>
<li><span>Image 02</span><div><h3>qui·e·tude</h3></div></li>
<li><span>Image 03</span><div><h3>bal·ance</h3></div></li>
<li><span>Image 04</span><div><h3>e·qua·nim·i·ty</h3></div></li>
<li><span>Image 05</span><div><h3>com·po·sure</h3></div></li>
<li><span>Image 06</span><div><h3>se·ren·i·ty</h3></div></li>
</ul>

上記をhtmlに書き込むことで、まずは表示が完了します。

次にCSSの修正です。
この修正がないと、本テンプレートでは正常に表示しません。

修正するCSSファイルは”style1.css”の”class="cb-slideshow"”に関する”z-index”です。
当サイトで組み込んだファイルではマイナスの値にしました。

.cb-slideshow,
.cb-slideshow:after {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
	z-index: -1000;
}

.cb-slideshow li span {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0px;
	left: 0px;
	color: transparent;
	background-size: cover;
	background-position: 50% 50%;
	background-repeat: none;
	opacity: 0;
	z-index: -1000;
	-webkit-backface-visibility: hidden;
	-webkit-animation: imageAnimation 36s linear infinite 0s;
	-moz-animation: imageAnimation 36s linear infinite 0s;
	-o-animation: imageAnimation 36s linear infinite 0s;
	-ms-animation: imageAnimation 36s linear infinite 0s;
	animation: imageAnimation 36s linear infinite 0s;
}

.cb-slideshow li div {
	z-index: -500;
	position: absolute;
	bottom: 30px;
	left: 0px;
	width: 100%;
	text-align: center;
	opacity: 0;
	color: #fff;
	-webkit-animation: titleAnimation 36s linear infinite 0s;
	-moz-animation: titleAnimation 36s linear infinite 0s;
	-o-animation: titleAnimation 36s linear infinite 0s;
	-ms-animation: titleAnimation 36s linear infinite 0s;
	animation: titleAnimation 36s linear infinite 0s;
}

という感じで”z-index”にマイナスの値を入れています。
他の要素を修正するなら、上記のような修正は必要ありません。
この修正は、背景に表示している画像を一番低いレイヤーにするために行った修正です。

CSSファイル、htmlファイル、jsファイル、画像のそれぞれをサーバーにアップして下さい。
あとは動作確認を取り、様々なケースでの記述を試して理解すれば、これにて作業完了です。

WEBサイトテンプレート（PHP）の修正にあたって、以下の点に配慮しています。

• 今回、サンプルにしたWEBサイトテンプレート（PHP）は「 phptemp_151020.zip 」です。
• スライドショーの挙動修正は、CSSファイルを修正して行います。JavaScriptを修正することはありません。
• 実際には背景ではなく、画像を書き込んで最底辺のレイヤーで表示しています。
• ”class="cb-slideshow"”のリスト内の”h3”などに”display:none;”を書き込んだりすることでテキストの表示を隠すことが出来ます。

本テンプレートにはそのまま画像を背景にしているため、インターフェイス的にあってないかもしれません。
しかし、使う画像を考えてコンテンツに併せることで、かなりオシャレな感じがするサイトのデザインになりそうですよね。
また、wordpressなどにもすぐに組み込めそうな感じがしますので、お手軽感のあるスクリプトでした。
言わずもがな、レスポンシブ対応ですので、上記の組み込みが完了した後にスマホから閲覧して頂いても問題はありません。

でも、スライドショーの修正はちょっと手間がかかるかもしれません。
CSSの内容を理解しなければいけないため何かと手間かもしれませんが、このままでも十分使えそうですので、是非使って頂き、サイトのインターフェイスに味を出して頂きたく思いました。

執筆 : 清水 隼斗