Background Image Transition Effects jQuery bgChange - Download Cool Background Image Transition Effects - jQuery bgChange

Download Cool Background Image Transition Effects – jQuery bgChange

By Posted on

This time I will share jQuery Plugin and tutorial about Cool Background Image Transition Effects – jQuery bgChange, hope it will help you in programming stack.

Background Image Transition Effects jQuery bgChange - Download Cool Background Image Transition Effects - jQuery bgChange

File Size: 17.1 KB
Views Total: 8177
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Demo Download

bgChange is a small jQuery background slideshow plugin that automatically switches between background images with a cool configurable transition effect.

How to use it:

1. First you need to load the latest version of jQuery library in the document.

view source
1 <script src="//code.jquery.com/jquery.min.js"></script>

2. Download and load the bgChange plugin’s files in the document. Note that the JavaScript file ‘bgChange.js’ must be loaded after jQuery library.

view source
1 <link rel="stylesheet" href="changContain.css">
2 <script src="bgChange.js"></script>

3. Basic usage:

  • imagearray: an array of images to switch between
  • options: plugin options
view source
1 $('.container').bgChange(imageArray,options);

4. Advanced usage:

view source
01 /* image array */
02 var data = ['1.jpg', '2.jpg', '3.jpg', '4.jpg'];
03  
04 function bg<a href="https://www.jqueryscript.net/animation/">Animation</a>(init, interval) {
05  
06     var ele = $(init.ele);
07  
08     $.preLoad(data).then(function () {
09  
10         var imgChange = ele.bgChange(data, init);
11         imgChange.change();
12         var timer = interval(imgChange);
13         var changeFlag = false;
14  
15         /* switch background images on click */
16  
17         ele.on('click', function () {
18             if (changeFlag)return;
19             changeFlag = true;
20             clearInterval(timer);
21             imgChange.change();
22  
23             /* clear interval */
24             clearInterval(timer);
25             timer = interval(imgChange);
26         });
27  
28         /* events */
29         ele.on('changeStart', function () {
30             changeFlag = true;
31         });
32         ele.on('changeEnd', function () {
33             changeFlag = false;
34         });
35  
36     });
37 }
38  
39 function interval(time) {
40     return function (changeEle) {
41         return setInterval(function () {
42             changeEle.change();
43         }, time);
44     }
45 }
46  
47 bgAnimation({ele: '.container'}, interval(10000));

5. Default plugin options

view source
01 $('.container').bgChange(imageArray,{
02  
03   // how many rows to generate
04   row: 7,
05  
06   // how many columns to generate
07   col: 9,
08  
09   // import external SCSS
10   scss: true
11    
12 });

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

source : jqueryscript.net

Related posts: