【jQuery】フルスクリーン背景画像に一連の画像を追加する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');
}
 
BackgroundTransition

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

  • LATEST
  • RELATED
  • POPULAR