Motion Reveal Slideshow

A simple image slideshow with a motion reveal effect when navigating between slides and a fullscreen details view.
MotionRevealSlideshow_featured

From our weekly sponsor: Design every part of your website with the brand new Divi Theme Builder. Try it for free.

Today we’d like to share another slideshow with you. The idea is to have a bit more of motion when navigating between the slides and showing another preview part with a fullscreen image. The inspiration for the effect comes from Louis Ansa’s beautiful design, “Paradis – Reprise”. The animations are powered by TweenMax.

The demo is kindly sponsored by monday.com: The visual project management tool for designers. If you would like to sponsor one of our demos, find out more here.

Attention: Note that we use modern CSS properties that might not be supported in older browsers.

The slideshow shows a medium sized image in the center of the page. The title is also prominently placed in the center:

MotionRevealSlideshow_01

When navigating to the next slide, we cover the current image with a reveal element that’s of the same color like the background of the page. The next image, which is initially covered, will be revealed. We add some translations to the elements to create a bouncy motion.

MotionRevealSlideshow2

When the details arrow is clicked below the image, we slide the respective fullscreen image with its content up in the same uncovering fashion.

MotionRevealSlideshow_02

We hope you like this little slideshow and find it useful!

References and Credits

Tagged with:

Mary Lou

ML is a freelance web designer and developer with a passion for interaction design. She studied Cognitive Science and Computational Logic and has a weakness for the smell of freshly ground peppercorns.

http://www.codrops.com

Stay up to date with the latest web design and development news and relevant updates from Codrops.

CSS Reference

Learn about all important CSS properties from the basics with our extensive and easy-to-read CSS Reference.

It doesn't matter if you are a beginner or intermediate, start learning CSS now.