search

dynamicweb / swiffy-slider

Super fast carousel and slider with touch for optimized websites running in modern browsers.
MIT License
250 stars 29 forks source link

better fade effect #15

Closed jklue closed 2 years ago

jklue commented 2 years ago

Instead of fading to a color between slides during fade, would there be a way to fade one slide into another. I wonder if it could be a brief overlap then opacity goes to 0 for the exiting slide? Here are a few examples (but it is hard to see in the screen recording)...

This was an old slider with a nice fade opacity effect...

https://user-images.githubusercontent.com/5399943/150580637-57b91049-eaa5-49ba-86bc-60958c816f13.mov

This is the same slider with the swiffy fade using a light gray in between...

https://user-images.githubusercontent.com/5399943/150581000-50e57056-6127-4232-b86b-88330d3da312.mov

nicped commented 2 years ago

Have looked into this to see what would be possible.

Swiffy slider is a scrollable div - and I guess you have made nodelay fadein to achieve the fading effect, something like this: https://swiffyslider.com/configuration/?slider-nav-scrollbar=slider-nav-scrollbar&slider-nav-nodelay=slider-nav-nodelay&slider-nav-animation=slider-nav-animation&slider-nav-animation-style=slider-nav-animation-fadein&preview-style=preview-images

So when Swiffy shows next/previous slide, it actually scrolls the div - you can see that in the configuration I made above where it shows scrollbars. So when animation happens, it first scroll to the new location and then fade in the new slide - and since the old slide has scrolled out of the view, what it fades from is the background of the new slide container (which is probably your background color).

Other more old school sliders will use JS to move a new div in the sliding area - and can place them on top of each other - which is not how Swiffy works (and why it is so simple and small).

So to achieve something like you are looking for, you would have to take the content of your old slide and place under neath the new slide (using js). Relatively simple for an image slider - but if the slides are with other types of markup, it is more difficult.

So I do not think this is a feature I can make a simple addon for. I have not been able to figure out how - without adding too much js to handle it.