Layer Motion Slideshow

A CSS Grid-based slideshow template with a layer motion effect on the main image and title.
LayerMotionSlideshow_featured

From our monthly sponsor: Automate manual QA and catch visual bugs with Percy’s all-in-one visual testing and review platform.

Today we’d like to share yet another CSS Grid-powered slideshow with you. The idea is to show and hide images with a reveal effect and add a parallax like effect to the main image and the title. For the title we’ve added two copied layers with an outline style which creates an interesting motion effect. For the animations we use TweenMax.

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

The initial view of the slideshow looks as follows:

LayerMotionSlideshow_01

For each slide we have a custom grid layout with one main image that spans the full height of the page. When we go next, the images will be hidden with a sliding motion and the title letters disappear randomly. The new slide will reveal its images and the title in a similar fashion.

When moving the mouse, we move copied layers of the main image and the title to create a trail-like effect.

Once the plus after the excerpt is clicked, we show the content of the slide and change the background color:

LayerMotionSlideshow_02

We hope you like this slideshow and find it useful!

References and Credits

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.

http://www.codrops.com

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

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.