背景画像を画面いっぱいにしてスライドショー化する
Result
jQuery
(function($) {
$.fn.fullClip = function(options) {
//デフォルト設定
var settings = $.extend({
current: 0,
images: [],
transitionTime: 1000,
wait: 3000,
static: false
}, options);
// 画像プリロード
var i, end;
for (i = 0, end = settings.images.length; i < end; ++i) {
new Image().src = settings.images[i];
}
// 背景指定するCSS
$('.fullBackground')
.css('background-image', 'url(' + settings.images[settings.current] + ')')
.css('-webkit-transition', 'background ' + settings.transitionTime + 's ease-in-out')
.css('-moz-transition', 'background ' + settings.transitionTime + 'ms ease-in-out')
.css('-ms-transition', 'background ' + settings.transitionTime + 'ms ease-in-out')
.css('-o-transition', 'background ' + settings.transitionTime + 'ms ease-in-out')
.css('transition', 'background ' + settings.transitionTime + 'ms ease-in-out')
// スライドショーにしない場合
if (settings.static) {
$(this)
.css('background-image', 'url(' + settings.images[settings.current] + ')');
return;
}
// 設定した複数画像を指定された時間に合わせて入れ替える
(function update() {
settings.current = (settings.current + 1) % settings.images.length;
$('.fullBackground').css('background-image', 'url(' + settings.images[settings.current] + ')');
setTimeout(update, settings.wait);
}());
}}(jQuery));
//画像と変更する時間等を指定
$('.fullBackground').fullClip({
images: ['https://picsum.photos/800/500', 'https://picsum.photos/1000/700', 'https://picsum.photos/900/600'],
transitionTime: 2000,
wait: 5000
});
css
.fullBackground {
background-position: center center;
background-attachment: fixed;
background-size: cover;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
html
<section class="container">
<div class="fullBackground"></div>
<h2 class="caption">動作テストです!</h2>
</section>
via
Full Clip – fullscreen body background image jQuery plugin