背景画像を画面いっぱいにしてスライドショー化する

Ads

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