CSSのbackground-imageにて背景画像を表示し、スライドショーで切り替えるjQuery.BgSwitcherというjQueryプラグインをご紹介いたします。
同じように、背景画像をスライドショーで切り替えるプラグインは他にもありますが、
jQuery.BgSwitcherが一番使い勝手が良いと思いました。
実際にサンプルを踏まえて紹介します。
全画面表示のサンプル
縦横全画面に要素を引き延ばし、その背景に画像を表示させます。
背景を表示させたい要素にwidth: 100vw;height: 100vh;を指定してやると、表示領域に対して縦横100％で表示できます。
さらに、bootstrapと組み合わせるだけで、今風のサイトに見せることが出来ます。
JavaScript
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="jquery.bgswitcher.js"></script>
<script>
jQuery(function($) {
$('.bg-switcher').bgSwitcher({
images: ['sample1.jpg','sample2.jpg','sample3.jpg'], // 切り替え画像
Interval: 5000, //切り替えの間隔 1000=1秒
start: true, //$.fn.bgswitcher(config)をコールした時に切り替えを開始する
loop: true, //切り替えをループする
shuffle: false, //背景画像の順番をシャッフルする
effect: "fade", //エフェクトの種類 "fade" "blind" "clip" "slide" "drop" "hide"
duration: 1000, //エフェクトの時間 1000=1秒
easing: "swing", //エフェクトのイージング "swing" "linear"
});
});
</script>
HTML
<div class="bg-switcher"> <h1 class="bg-title">jQuery.BgSwitcher Sample Demo</h1> </div>
CSS
<style>
html, body {
height: 100%;
margin: 0!important;
padding: 0!important;
}
.bg-switcher {
width: 100vw;
height: 100vh;
background-position: center center;
background-size: cover;
display: flex;
align-items: center;
justify-content: center;
}
.bg-title {
color: #fff;
font-size: 5vw;
line-height: 1.5;
font-weight: bold;
text-align: center;
text-shadow: 1px 1px 1px #000;
font-family: "Times New Roman", Times, "serif";
}
</style>
左右50%表示のサンプル
こちらは、画面左右を半々に分け、右に写真、左に文字を表示させたサンプルです。
今はやりの左右で分割したデザインを簡単に実装することが出来ます。
左右分割はbootstrapを使用しています。
JavaScript
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="jquery.bgswitcher.js"></script>
<script>
jQuery(function($) {
$('.bg-switcher').bgSwitcher({
images: ['sample1.jpg','sample2.jpg','sample3.jpg'], // 切り替え画像
Interval: 5000, //切り替えの間隔 1000=1秒
start: true, //$.fn.bgswitcher(config)をコールした時に切り替えを開始する
loop: true, //切り替えをループする
shuffle: false, //背景画像の順番をシャッフルする
effect: "fade", //エフェクトの種類 "fade" "blind" "clip" "slide" "drop" "hide"
duration: 1000, //エフェクトの時間 1000=1秒
easing: "swing", //エフェクトのイージング "swing" "linear"
});
});
</script>
HTML
<div class="row">
<div class="col-md-6 bg-left">
<h1 class="bg-title">jQuery.BgSwitcher Sample Demo</h1>
</div>
<div class="bg-switcher col-md-6">
</div>
</div>
CSS
<style>
html, body {
height: 100%;
margin: 0!important;
padding: 0!important;
}
.bg-switcher {
height: 60vh;
background-position: center center;
background-size: cover;
}
.bg-left{
display: flex;
align-items: center;
justify-content: center;
background: #0C84A8;
height: 60vh;
}
.bg-title {
color: #fff;
font-size: 5vw;
line-height: 1.5;
font-weight: bold;
text-align: center;
text-shadow: 1px 1px 1px #000;
font-family: "Times New Roman", Times, "serif";
}
</style>
その他のサンプル
その他にも方法はあるので、自分好みのデザインを目指して工夫してください。
http://homemadegarbage.0t0.jp/jquery-bg-crossfade
https://www.weblab.co.jp/staff/html/5262.html
