Glitch Effect Slideshow

After playing with an experimental CSS Glitch Effect for images and text, one of the first questions we got was “how can this be used in a slideshow”? The animations we used for the glitch effect were tuned to run infinitely, so the keyframes were adjusted to that. In a slideshow we have a different scenario: we want to apply the glitch effect at a specific moment and exchange the image with the new one of the next slide. This kind of animation can also be used for hover effects.

This slideshow does exactly that: it transitions to the next slide using the glitch effect. Under the hood, it exchanges the glitch layers one by one and stops glitching once the last image is switched.

The demo is kindly sponsored by: GitLab 10.1 which now allows you to manage your visual assets like you manage your code. If you would like to sponsor one of our demos, find out more here.

Attention: Please note that the CSS clip-path property does not work in IE or Edge.

GlitchSlideshow_01

GlitchSlideshow_02

GlitchSlideshow_03

We hope you enjoy this slideshow and find it useful!

References and Credits

Glitch Effect Slideshow was written by Mary Lou and published on Codrops.

Leave a Reply

Testimonials

"Kyle has helped our company’s image a lot by redesigning our logo, creating our new website and putting together some great, eye-catching ads. He’s very easy to work with and we were able to hit all of our deadlines."
Elliot Feder - Director of Business Development, SpringBoard Data Management
"Kyle has a natural talent for taking any idea I have and turning it into a visual work of art. He is a genius with layouts and overall concepts, the first person I call when I know a project needs to be done right."
Cheryl Bell, Executive Business Manager, Global Automotive Consultants