Fullscreen Crossfading Background Slideshow with jQuery - BackgroundTransition

BackgroundTransition is an ultra-light (2kb minified) jQuery plugin for creating automatic, smooth fade in/out transition effects between background images. Great for creating a fullscreen background image slideshow for your website.

How to use it:

1. Link jQuery library and the jQuery backgroundTransition.js script into your HTML document.

<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="backgroundTransition.js"></script>

2. Call the function on the container and define an array of images for the background slideshow.

$('.backgroundTransition').backgroundTransition({
  backgrounds:[
    { src: '1.jpg' },
    { src: '2.jpg' },
    { src: '3.jpg' },
    { src: '4.jpg' },
    { src: '5.jpg' },
    { src: '6.jpg' }
  ]
});

3. Make the background slideshow fullscreen.

html, body, .backgroundTransition, .backgroundTransition .image-top, .backgroundTransition .image-bottom {
  height: 100%;
  width: 100%;
}

body { margin: 0; }

body .backgroundTransition {
  position: relative;
  overflow: hidden;
  background-size: cover;
}

body .backgroundTransition .image-bottom, body .backgroundTransition .image-top {
  position: absolute;
  left: 0;
  top: 0;
  background-size: cover;
}

body .backgroundTransition .image-bottom { z-index: -2; }

body .backgroundTransition .image-top {
  z-index: -1;
  display: none;
}

#image-download { display: none; }

4. All configuration options with default settings.

$('.backgroundTransition').backgroundTransition({

  //  CSS Selectors
  classNameBottomImage: "image-bottom",
  classNameTopImage: "image-top",
  idNameDownloadImage: "image-download",

  // an array of image objects
  backgrounds: [],

  // the delay between image transition
  transitionDelay: 10,

  // animation speed
  animationSpeed: 1000
  
});

---

This awesome jQuery plugin is developed by mattyrichards. For more Advanced Usages, please check the demo page or visit the official website.