Sliced Dual Image Layout

Original Source: http://feedproxy.google.com/~r/tympanus/~3/lYNqXj8jWt4/

Today we’d like to share some layouts with a sliced image look with you. The idea is to show some text elements in a grid layout and change the content and images in a slideshow fashion. For the background image slices, we created a little plugin that has a couple of additonal options. For making an interesting transition, we use a glitch effect. This effect we also apply to some of the text.

This demo is kindly sponsored by: FullStory: See Every Click, Swipe, and Scroll.

Attention: We use a couple of new CSS properties, like CSS grid and clip-path which will only work in modern browsers.

Have a look at the demo screenshots:

We hope you enjoy these layouts and find them useful!

References and Credits

anime.js by Julian Garnier
Images by Unsplash.com
imagesLoaded by Dave DeSandro
Charming.js by Yuan Qing

Sliced Dual Image Layout was written by Mary Lou and published on Codrops.