Slide Show Stack Fade to White?

Unfortunately you’re too late to submit feature requests. That deadline has passed and RefinedSlider 2 has already been released. Other users appear to generally be pleased with the update. The free demo version provided has promoted lots of interest. The announcement can be found here:

You’ll come to find that just about every slideshow plugin available uses cross-fade transitions. Why? Because most sliders work on the basis of changing the opacity or z-index of slides as they transition. It’s very rare there is ever any ‘white’ behind the current slide to display; as one image fades out and another fades into view. Also I regret to inform you that you’re in the minority of users wanting slides fading to white - a majority of people want attractive slideshow effects and don’t want solid blocks of colour between slides. In other words there’s no money to be made in slideshows that fade to white between images!

It would not be difficult to set the transition speed in RefinedSlider to 0ms and use CSS code to apply animations on the images, in this instance fading the RefinedSlider images to white every 4.5 seconds, .5 seconds before the image changes:

.nivoSlider img {
animation-duration: 500ms;
animation-delay: 4500ms;
animation-iteration-count: infinite;
animation-name: fadetowhite;	

-moz-animation-duration: 500ms;
-webkit-animation-delay: 4500ms;
-moz-animation-iteration-count: infinite;
-moz-animation-name: fadetowhite;

-webkit-animation-duration: 500ms;
-webkit-animation-delay: 4500ms;
-webkit-animation-iteration-count: infinite;
-webkit-animation-name: fadetowhite;
}

@-keyframes fadetowhite {
from {
opacity: 1.00;
}    
to {
opacity: 0;
}
}
    
@-moz-keyframes fadetowhite {
from {
opacity: 1.00;
}    
to {
opacity: 0;
}
}
    
@-webkit-keyframes fadetowhite {
from {
opacity: 1.00;
}
to {
opacity: 0;
}
}

If you fiddle with the CSS animation timings, you should be able to get these to sync-up to the Javascript animations used in the slider. I was able to without much difficulty. But this does not take into account of someone hovering their mouse cursor over the slider to pause it or captions. And the fact the CSS and Javascript are running separately, eventually you’ll find one starts to outrun the other and they become out-of-sync. So I would not rate this solution highly, unless you’re building really simple sliders.

Really you need to start from scratch. Find a simple jQuery slideshow plugin that is not doing opacity or z-indexing on images. Something like this one. Paste it into my Builder stack and if you tweak the Javascript settings you can get the images to fade to white between each other. Example attached.

https://dl.dropboxusercontent.com/u/422052/FadeToWhiteSlider.rw6.zip

1 Like