My page title

``` Use the plugin as below. Ensure to use ".backgroundTransition" as the plugin selector. ```javascript $(function() { $('.backgroundTransition').backgroundTransition({ backgrounds:[ { src: 'images/image1.jpg' }, { src: 'images/image2.jpg' }, { src: 'images/image3.jpg' }, ], transitionDelay: 5, animationSpeed: 500 }); }); ``` Options are: - `backgrounds` is an array of objects. Each object has a 'src' property followed by a relative path to an image. Please note that plugin requires at least 2 images. - `transitionDelay` is a value, in seconds, of the delay between image transition. Default value is 10. - `animationSpeed` is the speed at which the image will fade in (milliseconds). Default value is 1000. Finally, add a CSS rule to your own CSS file to ensure that a background image is loaded on page load before DOM Ready. Ensure this image is the same image as the first image passed into the plugin (in example above "images/image1.jpg") ```css .backgroundTransition { background-image: url('images/image1.jpg'); } ``` ### Customize It's possible to easily modify or extend the BackgroundTransition plugin source files. Simply download or clone the repository, the original plugin JavaScript and Sass files are located in the "src" folder. These files can be modified then viewed within the repo via "demo/index.html". Using Gulp (instructions below), the source Sass can be compiled/watched and final JS/CSS files minified for distribution. Install the NPM dependencies (assumes you already have NPM installed). Navigate to the project root and run: ```sh $ npm install ``` Install Gulp globally (if not already): ```sh $ npm install -g gulp ``` To compile the CSS file from Sass during development: ```sh $ gulp dev-sass ``` To watch the Sass file and compile CSS automatically when Sass is updated: ```sh $ gulp watch-sass ``` To build the minified distrubution version of CSS ("dist" folder): ```sh $ gulp dist-sass ``` To build the minified distrubution version of CSS and JS together: ```sh $ gulp build-dist ``` ## Credits BackgroundTransition was written by Matt Richards. The plugin is based on [Mark Dalgleigh's](http://markdalgleish.com/2011/05/creating-highly-configurable-jquery-plugins/) popular jQuery plugin design pattern (subsequently modified by [Addy Osmani](http://www.smashingmagazine.com/2011/10/essential-jquery-plugin-patterns/#a-highly-configurable-and-mutable-plugin)). Background images in the demo were sourced from [Pixabay](http://pixabay.com).