search

arielsalminen / ResponsiveSlides.js

Simple & lightweight responsive slider plugin (in 1kb)
http://responsiveslides.com
3.46k stars 1.52k forks source link

True Crossfade #186

Open JohannesMP opened 11 years ago

JohannesMP commented 11 years ago

Currently when the Slider fades between two items, it will fade both of them simultaneously, which means that halfway through the fade, the background will be 25% visible (50% of 50%) behind the two slides.

It would be nice to have the option of having a true crossfade, where the back slide remained at 100% opacity, preventing the background from being visible.

Here's an illustration of how fading currently works, and what I am suggesting: fade_example

Proper crossfading would be possible with the use of z-indexing to ensure that a lower image can fade over a higher one.

Not a high priority issue, but would be nice to have.

ws101 commented 10 years ago

I second this. Seeing 25% of the background can be really distracting in some scenarios.

dainiusbukauskas commented 7 years ago

I figured it out! Use a custom easing function so that they overlap enough to cover the background!

Use this: visible = {"float": "left", "position": "relative", "opacity": 1, "zIndex": 2, "-webkit-transition": "opacity " + fadeTime + "ms cubic-bezier(0.175, 0.885, 0.32, 1.275)", "transition": "opacity " + fadeTime + "ms cubic-bezier(0.175, 0.885, 0.32, 1.275)"}, hidden = {"float": "none", "position": "absolute", "opacity": 0, "zIndex": 1, "-webkit-transition": "opacity " + fadeTime + "ms cubic-bezier(0.6, -0.28, 0.735, 0.045)", "transition": "opacity " + fadeTime + "ms cubic-bezier(0.6, -0.28, 0.735, 0.045)"} ,

to replace this: visible = {"float": "left", "position": "relative", "opacity": 1, "zIndex": 2}, hidden = {"float": "none", "position": "absolute", "opacity": 0, "zIndex": 1},