Use jquery to fade backgrounds until it's white in between
I have this script to disable background images in one div and I would like it to fade in and out; however I don't want white in between. I have done several searches; however they all use list items instead of a single div. I would like it to just transition from one background image to another. Here is my current script:
<script>
$(window).load(function() {
var i =0;
var images = ['http://www.example.com/images/homepage/slider-2.jpg','http://www.example.com/images/homepage/slider-3.jpg','http://www.example.com/images/homepage/slider-1.jpg'];
var image = $('#mainimage');
//Initial Background image setup
image.css('background-image', 'url(http://www.example.com/images/homepage/slider-1.jpg)');
//Change image at regular intervals
setInterval(function(){
image.fadeOut(1000, function () {
image.css('background-image', 'url(' + images [i++] +')');
image.fadeIn(1000);
});
if(i == images.length)
i = 0;
}, 5000);
});
</script>
Here is my current css:
#mainimage {
background: url('http://www.example.com/images/homepage/slider-1.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height:98.5%;
min-height: 400px;
border-bottom:15px solid #77951c;
}
HTML:
<div id="mainimage">
<div id="searchwrapper">
<div id="hometitlewrapper">
<h1>Cabins & Cottages <span>for Sale</span></h1>
</div>
<div id="searchboxwrapper">
<input id="state" class="autocomplete" type="search" placeholder="Search by Location" results />
</div>
</div>
here fiddle
source to share
Probably the easiest way to do this, by only changing one element, is to pass the transition to the css layer. Use classes to customize background images.
Another benefit of updating the class instead of doing all this in jquery / js is that you can integrate custom controls more easily in the future if you want to include start, stop, fast forward / rewind at some point.
demo
Image for CSS only Preload violin
JS Image Preload and Deferred Script - Thanks Terry
There are many ways to preload images and loops, this is just a quick post, so do what makes sense to you.
Code entry
CSS
I went with a cubic bezier, mostly inverted ease-in-out
for a smoother transition, but you can just as easily use ease
, linear
or any other transition.
Add a prefix, based on your support, must be at transition
and background-size
. Please note that IE8 and below do not support background-size:cover
, read this article for possible workarounds
/* preload images (css only) -- remove if you're using a js method*/
body:after{
display:none;
content:url(http://placehold.it/400x400/4fa/222)
url(http://placehold.it/500x500/fa4/222)
url(http://placehold.it/600x600/4af/222)
url(http://placehold.it/700x700/af4/222)}
/* background defaults*/
#mainimage{
background-position:center center;
background-repeat:no-repeat;
background-size:cover;
width:100vw;
height:100vh;
transition:background-image 1s cubic-bezier(.44,.75,.38,.73)}
/* background image(s) */
.stage0{background-image:url(http://placehold.it/400x400/4fa/222)}
.stage1{background-image:url(http://placehold.it/500x500/fa4/222)}
.stage2{background-image:url(http://placehold.it/600x600/4af/222)}
.stage3{background-image:url(http://placehold.it/700x700/af4/222)}
JQuery
Then just update the class with different background images at the spacing you want ... This can be done literally any way you choose, I just update the class with a simple count here.
var counter = 0;
setInterval(function(){
$("#mainimage").prop("class", "stage" + counter);
if (counter === 3){
counter = 0;
} else {
counter++;
}
}, 2000);
Html
Add a base class to the element #mainimage
, I recommend using a class instead of an ID to ease any problems with specificity.
<div id="mainimage" class="stage0">
<div id="searchwrapper">
<div id="hometitlewrapper">
<h1>Cabins & Cottages <span>for Sale</span></h1>
</div>
<div id="searchboxwrapper">
<input id="state" class="autocomplete" type="search" placeholder="Search by Location" results />
</div>
</div>
</div>
... and, my pet, use &
for "&" ...
source to share
Have a little question about extending this
var counter = 0;
setInterval(function(){
$("#main_banner").prop("class", "background"+ counter);
if (counter === 3){
counter = 0;
} else {
counter++;
}
}, 7000);
})
How would I go about adding more than just one class to the main_banner div? This works fantastic, except I have 3 classes for this div and when it is executed it erases all classes and only adds a new background class.
source to share