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

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

コラム

今回はjQueryは使わずCSS3とJavaScriptで背景をスライドショーのように一定時間で背景画像が切り替わる機能を組み込みました。
厳密に言いますと、背景画像のように見せている画像・・・という表現が正しいのですが、細かいことは置いといて・・・。
スライドショーのように画像が切り替わるタイミングやアニメーションする時間などの設定は面倒かもしれませんが、理解出来れば結構使えること請け合いです。
「ちょっとは役に立ったかな?」や「ちょっと面白いな(笑)」みたいなことを感じられましたら、シェアして頂けますと幸いです。

WEB全般に投稿したコラム記事

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

CSS3 Fullscreen Slideshowイメージ
CSS3 Fullscreen Slideshowとは?
CSS3 Fullscreen Slideshowとは、CSS3とJavaScriptで動かすスライドショー

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

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

CSS3 Fullscreen Slideshowの配布サイト

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

ダウンロードと組み込みサンプル
CSS3 Fullscreen Slideshow組み込み済みファイルのダウンロード
phptemp_css3fullscreenslideshow_160115.zip
組み込み済みサンプル

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

元になるWEBサイトテンプレート(PHP)について

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

組み込み手順

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

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

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

CSS3 Fullscreen Slideshowファイルのアップ

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

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

CSSファイルのアップと画像のアップ

ダウンロードしてきたフォルダ内にある「 /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 」の数字を併せると同じ挙動をします。

CSSの修正とhtmlの記述

次に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の内容を理解しなければいけないため何かと手間かもしれませんが、このままでも十分使えそうですので、是非使って頂き、サイトのインターフェイスに味を出して頂きたく思いました。

執筆 : 清水 隼斗

Facebookコメント

他のカテゴリ記事は下記からお選び下さい。
SEO対策に関する記事を投稿するカテゴリです。とにかく、SEO対策のことのみを記事にしようと思います。弊社の本業です(笑)
インターネットやWEBに関する総合情報に関する記事を投稿するカテゴリです。技術的なことでも出来るだけ分かりやすくしていこうと思います。
社内での出来事やランチのことなど、小さなことから大きなことまでを投稿するカテゴリです。少人数なのでネタは限られてますが面白可笑しくいきます!
その他、上記に当てはまらないことは全てこのカテゴリに投稿します。弊社の歴史・・・というわけではありませんが、後になって懐かしむことが出来る記事を投稿します。
株式会社SEMラボラトリー
TEL : 06-4394-8427
MAIL : info@oosaka-web.jp
PAGE TOP