(function($) { // defaults $.fn.fullClip = function(options) { var settings = $.extend({ current: 0, images: [], transitionTime: 1000, wait: 3000, static: false }, options); // preload images var i, end; for (i = 0, end = settings.images.length; i < end; ++i) { new Image().src = settings.images[i]; } // sort out the transitions + specify vendor prefixes $('.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 only one image, set as static background if (settings.static) { $(this) .css('background-image', 'url(' + settings.images[settings.current] + ')'); return; } // change the background image (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 });
.fullBackground { background-position: center center; background-attachment: fixed; background-size: cover; position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .caption { font-size: 30pt; text-transform: uppercase; color: #fff; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
<section class="container"> <div class="fullBackground"></div> <h2 class="caption">動作テストです!</h2> </section>