jQuery

【jQuery】フルスクリーン背景画像に一連の画像を追加するBackgroundTransition

October 11, 2016
BackgroundTransition

BackgroundTransitionはウェブサイト上にトランジション(フェードイン/アウト)のフルスクリーン背景画像を表示する、軽量でシンプルなjQueryプラグイン。

CSS&JS

<link rel="stylesheet" type="text/css" href="backgroundTransition.min.css" />
...
<script type="text/javascript" src="backgroundTransition.min.js"></script>

HTML

<body>
    <div class="backgroundTransition">
        <h1>My page title</h1>

プラグインセレクタとして.backgroundTransitionを使用。

$(function() {
  $('.backgroundTransition').backgroundTransition({
      backgrounds:[
          { src: 'images/image1.jpg' },
          { src: 'images/image2.jpg' },
          { src: 'images/image3.jpg' },
      ],
      transitionDelay: 5,
      animationSpeed: 500
  });
});

Options

  1. backgrounds
  2. transitionDelay
  3. animationSpeed
.backgroundTransition {
  background-image: url('images/image1.jpg');
}

Demo/Download