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

MotionRevealSlideshow_featured  - MotionRevealSlideshow featured - Motion Reveal Slideshow | Codrops

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 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  - MotionRevealSlideshow 01 - Motion Reveal Slideshow | Codrops

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  - MotionRevealSlideshow2 - Motion Reveal Slideshow | Codrops

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  - MotionRevealSlideshow 02 - Motion Reveal Slideshow | Codrops

- advertisement - Motion Reveal Slideshow | Codrops

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

References and Credits


Source link


Please enter your comment!
Please enter your name here