Adding Multiple Fading Images To A Background with jQuery
You can add multiple sliding/fading images to a background HTML element using the Backstretch jQuery plugin, this is great if you just want to alternate a number of images behind another web page element similar to a slider but without the overhead of using a slider plugin.
Generally you’ll want to optimize your images for the most average viewable size, so for example if it’s full screen desktop you’ll need to get a width at least between 1200px to 16oopx at a decent compression, say jpeg level 7 in Photoshop, if the background images are more abstract in nature and the image is less defined you can probably get that jpeg compression down to a level 3 of 4.
Setting up the jQuery Backstretch plugin
Download the latest version and file the backstretch.min.js in your theme’s js folder, you’ll also want to create an initialize file for the jQuery plugin, in this example called backstretch-init.js – then also move to your theme’s js folder.
The content of the backstretch-init.js file will apply the backstretch image effect to the element we are targeting, so in the code below…
Loading the Scripts
Now these files will need to be enqueued for WordPress to load them, so add this in your functions.php file
So here we are loading the backstretch files, when the initialise script backstretch-init.js is called it is calling for backstretch-min.js which in turn is calling for jQuery.
That’s it, load in as many images as required and adjust the fade and duration values to suit.
Further ref and ref
Leave all Comment