Triple Panel Reveal Slideshow

Publikováno: 26.6.2018

A fullscreen image slideshow with lateral image previews and a reveal animation using TweenMax.

Triple Panel Reveal Slideshow was written by Mary Lou and published on Codrops.

Celý článek

Today we’d like to show you a little slideshow design with a “triple panel” layout. The infinite slideshow shows a preview of the next and previous slide on both sides of the page. When navigating we use a reveal effect for all three images and animate the titles. 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 image slideshow has two lateral previews and a main image in the center. When hovering over the “Explore” link, the main image will zoom in a bit:

RevealSlideshow_01

When navigating, we animate a reveal element that covers each image. Depending on which direction we are navigating, we make the revealer appear from bottom or from the top. All title elements have an animation except for the “Explore” link.

RevealSlideshow

We hope you enjoy this demo and find it useful!

References and Credits

Triple Panel Reveal Slideshow was written by Mary Lou and published on Codrops.

Nahoru
Tento web používá k poskytování služeb a analýze návštěvnosti soubory cookie. Používáním tohoto webu s tímto souhlasíte. Další informace