Sliced Dual Image Layout

Some layouts with sliced background images, slideshow functionality and glitch effect.
DualSlicesLayout

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:

SlicedDualImageLayout_01

SlicedDualImageLayout_02

SlicedDualImageLayout_03

We hope you enjoy these layouts and find them 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

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.

Feedback 7

  1. 1

    Just FYI, one year ago I coded this website. Pretty much the same effect, but with some increased functionality like mouse and mobile device orientation interaction. It’s really fun on mobile devices, git it a try!
    http://catarinagarcia.com

    • 3

      @Gabe Deko

      its easy to implement. in the first layer its having a big horizontal picture and repeating it in the X axis. then when you move your mouse in that axis it changes the background position.

      on the top layer it has multiple divs with the same background image to. but different initial background position. and again when you move the mouse it changes the background position.

    • 4

      @Gabe Deko it’s pretty much what @Reza said, with the added functionality of mobile orientation doing the same thing as the mouse position would do. Check the source code, if you’re curious. Thank you for your comments, BTW.

Follow this discussion

Leave a Comment