Diagonal Slideshow

A slideshow with a "diagonal" look and three visible slides. A decorative background element expands to fullscreen when opening the content preview.
DiagonalSlideshow

Continuing with our exploration of slideshow ideas, we’d like to share another slideshow layout with you. This time we have a diagonal type of look where the current slide is in the center of the page and the previous and next images can be seen laterally, one in the top left corner and one in the bottom right corner of the page. When clicking on the current slide, the decorative background element expands to fullscreen, the image moves to the left side of the screen and the content animates in. The animations are powered by TweenMax.

The demo is kindly sponsored by HelloSign API: Because your time matters. 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 with the three visible slides looks as follows:

DiagonalSlideshow_01

When open, the content preview looks as follows:
DiagonalSlideshow_02

When we navigate, everything moves diagonally. We also have a subtle hover effect on the current slide. When clicking on the current slide, the deco element expands to fullscreen, the image moves to the left and the content appears.

DiagonalSlideshow

We hope you like this slideshow and find it useful!

References and Credits

Previous:
Next:

Tagged with:

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.

View all contributions by

Website: http://www.codrops.com

Related Articles

Receive our bi-weekly Collective or official newsletter right in your inbox.

Which newsletter would you like to receive?

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.