複数の背景画像を順番に表示していくことができるスライドショーは、jqueryプラグインを使用することで自動スクロールするスライドショーにすることができます。
jqueryプラグインで背景画像を自動スライドショーにするやり方は私自身初めて挑みました。
初めてでも意外とできてしまうもので、使用するjqueryプラグインで背景画像が自動スクロールしてスライドショーとして動作したときは素直に嬉しい。
アウトプット的な復習も兼ねて、背景画像を自動スライドショーにするまでの流れをまとめました。背景画像でスライショーを実装したい方に参考になるかと思います。
使用するjqueryプラグインは「bgswitcher」です。
jqueryを読み込みjqueryプラグインをフォルダに配置
jqueryプラグインのbgswitcherを使用して背景画像を自動スライドショーにするためには、Weサイトでjqueryプラグインが動作できる環境をjQuery本体を読み込んで整えます。
jQuery本体を読み込むことも踏まえた大まかな手順は以下のとうりです。
- jQueryを読み込む
- jqueryプラグイン(bgswitcher)のダウンロード
- ダウンロードしたJSファイルをフォルダに配置
上記の1、2、3の手順でjqueryプラグインの導入準備をすることで、jqueryプラグインで背景画像を自動のスライドショーにすることができます。
jQueryをCDNで読み込む
jQueryを読み込むには「jQuery本体をダウンロードして読み込む方法」と「CDNを経由して使う方法」がありますが、CDNを経由してjQueryを読み込みます。
CDNで読み込むとjQueryをダウンロードする手間が省け、headタグ内に以下のスクリプトタグをコピペするだけで背景画像をスライドショーにするjQueryプラグインが使えるようになります。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
上記のjQueryのスクリプトコードは、背景画像を自動スライドショーにするサイトのheadタグ内に記述します。
バージョン3系の最新のjQueryを使用してますが、jQueryの最新バージョンを確認しておきたい場合はGoogleにホストされているライブラリからCDNのjQueryバージョンを確認できます。
Hosted Libraries | Google Developers
GitHubからbgswitcherをダウンロード
jQuery本体を読み込んだ次は、背景画像を自動スライドショーにすることができるjQueryプラグイン「bgswitcher」のzipファイルをGitHubからダウンロードします。
GitHubの「bgswitcher」のzipファイルは以下のページからダウンロードできます。
GitHubのjquery-bgswitcherダウンロード
GitHubからダウンロードしたbgswitcherのzipファイルは解凍します。解凍後のフォルダ名は「jquery-bgswitcher-master」になります。
そしてjqueryプラグイン「bgswitcher」で背景画像を自動スライドショーにするために必要なファイルはjquery-bgswitcher-masterフォルダを開いた「jquery.bgswitcher.js」ファイルを使用します。
jsフォルダにjquery.bgswitcher.jsを配置
jqueryプラグイン「bgswitcher」のダウンロードファイルに入ってるjquery-bgswitcher-masterフォルダ内の「jquery.bgswitcher.js」は、jsフォルダ内に配置して背景画像を自動スライドショーにするためのjsファイルになってもらいます。
背景画像を自動スライドショーにするWebサイトのフォルダ構造にすでにjsフォルダがある場合は、そのjsフォルダに配置すればjquery.bgswitcher.jsを読み込むときのファイルパスを間違えにくいと思います。
jsフォルダがまだない場合は、フォルダ名を「js」にしてjsフォルダを作成した中にjquery.bgswitcher.jsファイルを格納してください。
jsフォルダの配置場所は、それぞれのサイトのフォルダ構造で適宜になりますが、私の場合は背景画像を自動スライドショーにするHTMLファイルが入ってるフォルダと同じ階層に配置しました。
ここまでの流れで完了しておくことは以下です。
- jquery本体を読み込むスクリプトコードをheadに記述
- jqueryプラグイン「bgswitcher」の「jquery.bgswitcher.js」ファイルをjsフォルダに配置
上記2点が完了していればオッケーです。
背景画像を自動スライドショーにするHTMLとCSS
jqueryとjqueryプラグインのbgswitcherを読み込み、背景画像を自動スライドショーにする準備が整いました。
次にHTMLでスライドショーを表示する要素をマークアップして、jsフォルダに配置した「jquery.bgswitcher.js」を読み込む記述と、自動スライドショーにする背景画像を指定します。
またCSSでは背景画像のサイズを調整します。
スライドショーを表示するHTML要素
スライドショーを表示するHTML要素は以下のHTMLをbody要素内で表示したい場所に記述します。
<div class="bgimg-slider">
<h1 class="slider-title">背景画像の上に乗るテキスト</h1>
</div>
divのブロック要素でスライドショーになる背景画像が表示できるようにして、背景画像の上に乗せるテキストやコンテンツが欲しい場合にはdivの子要素をマークアップします。
HTMLにjquery.bgswitcher.jsを読み込む
スライドショーを表示するHTML要素を記述した下あたりにjsフォルダに配置したjquery.bgswitcher.jsをscriptで読み込みます。jquery.bgswitcher.jsの読み込みは</body>直上でも読み込みができます。
<head></head>の間でも読み込んだのですがjquery.bgswitcher.jsをheadで読み込めなかったです。
スライドショーを表示するHTML要素も含めたjquery.bgswitcher.jsを読み込むコードは以下です。私がjqueryプラグインで背景画像を自動スライドショーにするために使用したコードのままです。
<div class="bgimg-slider">
<h1 class="slider-title">背景画像の上に乗るテキスト</h1>
</div>
<!-- bgswitcher-script -->
<script src="../js/jquery.bgswitcher.js"></script>
<script>
jQuery(function($) {
$('.bgimg-slider').bgSwitcher({
images: ['../images/back.jpg','../images/blue.jpg','../images/paint.jpg'],
effect: "drop",
easing: "linear"
});
});
</script>
<!-- bgswitcher-script-end -->
スライドショーを表示するHTML要素の下でjquery.bgswitcher.jsを読み込みました。
そしてjquery.bgswitcher.jsを読み込んだ下には、上の記述のように$(‘.bgimg-slider’)で背景画像の自動スライドショーにするdivのクラス名をセレクタにして、images:の部分でスライドショーに使う背景画像を指定します。
クラス名で要素を指定してるので、例えばスライドショーを表示するHTML要素のクラス名が上のHTMLの「”bgimg-slider”」ではなく「”sample-slider”」にした場合は、$(‘.sample-slider’)とセレクタも変更する必要があります。
jqueryプラグインで自動スライドショーにする背景画像は、imagesやimeagのフォルダ名にして画像フォルダを作成して画像を入れておきパスを指定します。
これによりjqueryプラグインのスライドショーで使う背景画像は、background-imageプロパティがHTMLにインラインで記述される形になって表示できます。
スライドショーにする背景画像のCSS
jqueryプラグインのbgswitcher.jsの読み込みとHTMLに記述したscriptや画像の指定により、HTML要素には背景画像を自動でスライドショーにすることができているので、あとはCSSでスライドショーになる要素のサイズを広げて画像を表示させます。
.bgimg-slider {
width: 100vw;
height: 100vh;
background-position: center center;
background-size: cover;
display: flex;
align-items: center;
justify-content: center;
}
.slider-title {
color: #fff;
font-size: 48px;
line-height: 1.5;
font-weight: bold;
text-align: center;
text-shadow: 1px 1px 1px #000;
}
CSSで背景画像を表示するボックスのサイズをvw、vhで指定します。
- vwでビューポートの幅に対する割合
- vhでビューポートの高さに対する割合
背景画像サイズを%やpxで指定するのも可能ですが、背景画像を自動スライドショーにするパターンが画面いっぱいのスライドショーにする場合では、ビューポートを基準に幅と高さを指定するといいかと思います。
ここまでの時点の流れが間違いなく進んでいれば、ブラウザにjqueryプラグインで背景画像を自動でスライドショーにするページを開くと自動スライドショーで背景画像がスクロールしています。
スクロールする背景画像の切り替えをコントロール
jqueryプラグインのbgswitcherで背景画像を自動スライドショーにするときには、スクロールする背景画像の切り替えをコントロールすることができます。
キー | 型 | 初期値 | 説明 |
---|---|---|---|
start | boolean | true | $.fn.bgswitcher(config) をコールした時に切り替えを開始する |
loop | boolean | true | 切り替えをループする |
interval | number | 5000 | 切り替えの間隔 |
effect | string | fade | エフェクトの種類 |
shuffle | boolean | false | 背景画像の順番をシャッフルする |
duration | number | 1000 | エフェクトの時間 |
easing | string | swing | エフェクトのイージング |
1:Start
Startは背景画像の自動スクロールをするかしないかコントロールできます。
初期値 start: true,
trueで背景画像は自動でスクロールします。
falseにするとスクロールせずに静止したままの背景画像になります。
2:Loop
Loopは自動でスライドショーにした背景画像を繰り返しスクロールするかしないかコントロールできます。
初期値 loop: true,
trueだと自動でスライドショーが繰り返しスクロールします。
falseにすると最後の背景画像までスクロールしたら自動でスライドショーが止まります。
3:Interval
Intervalは背景画像が次の画像に自動でスクロールして切り替わるまでの時間をコントロールできます。
初期値 interval: 5000,
たとえば2000で指定したら2秒かけて背景画像が切り替わります。
4:Effect(効果)
Effectはエフェクトの種類です。背景画像を自動のスライドショーにするスライドの動きをどのようにスライドさせるかコントロールできます。
初期値 effect: “fade”,
- fade フェード..なんていうかゆっくりぼんやり次の背景画像に切り替わります。
- blind ブラインドをあげるように上にスクロールして切り替わる
- clip 背景画像の中央でクリップで挟むような感じでスクロールして切り替わる
- slide 背景画像が下から上に縦スクロールして切り替わる
- drop 背景画像が右から左に横スクロールして切り替わる
- hide フェードと違い、一瞬で次の背景画像に切り替わる
5:Shuffle
shuffleはスクロールする背景画像の順番をシャッフルしてランダムで切り替えるコントールができます。
初期値 shuffle: false,
trueで順番どうりに背景画像が自動スクロールで切り替わります。
falseにすると背景画像の切り替わりはシャッフルしてランダムでスクロールします。
6:Duration
Durationはエフェクトにかかる時間のコントロールで、背景画像のスライドショーが自動でスライドするときの動きにかかる時間をコントロールできます。
初期値 duration: 1000,
1000なら1秒、3秒に変更するなら3000という感じです。
7:Easing
速度に緩急をつけることをイージング(Easing)と呼びます。
Easingは自動スライドショーで背景画像がスライドするときの速度の変化をコントロールできます。
初期値 easing: “swing”,
「swing」と「linear」から指定
- linear: 等速で変化する。のっぺりとした安定した印象。等速なのでテンポのいい動きかもしれません。
- swing:始めはおだやか、途中はちょっと速め、最後はおだやか
jqueryプラグインで背景画像を自動スライドショーにするために使用したbgswitcherのデモページでエフェクトの調整をしながら確認できるので、実装前にスクロールする背景画像の切り替えを調整してみるといいかもしれません。