I use cookies to give you the best possible website experience.
By using COIDEA, you agree to our Privacy Policy.OK, CLOSE

Today we’d like to share one more slideshow with you. The idea is to have a simple animation when navigating between the slides and showing another preview part with a fullscreen video and dynamically added info from data attributes. The inspiration for the effect comes from Alberto Conti’s beautiful design, “NYC”. The animations are powered by TweenMax.

COIDEA - Slideshow with Fullscreen Detail View

The slideshow shows medium sized images which are vertically centered in the viewport.

When navigating to the next slide, I cover the current image with a reveal element, the next image.

When the current image is clicked, I slide the fullscreen video with its content right and populate headline and description placeholders in fullscreen detail view with data from "data" attributes of the clicked item. At the same time, the navigation icon turns into X. Our new X icon is a trigger for closing fullscreen detail view.

I hope you enjoy this demo and find it useful!

References and Credits