From our sponsor: Chromatic - Visual testing for Storybook, Playwright & Cypress. Catch UI bugs before your users do.
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.
Have a look at the demo screenshots:
Tiny break: 📬 Want to stay up to date with frontend and trends in web design? Subscribe and get our Collective newsletter twice a tweek.
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
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
@Samuel
Awesome effect. Is there any reference to how it was built?
Thanks!
@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.
@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.
@Reza @Samuel That’s a pretty nifty approach. Thanks a lot!
love it!
Very nice Mary Lou, Thank you!
just for you!
Very cool approach! CSS is rocking man. Seems we don’t need photoshop and all to bring out such effects. Like it:)
Very nice…how can run this auto play??
Good afternoon! Tell me, please, how to pass URL to the address bar?
How can we make it rotate automatically after a said time interval?
Like… right I have to click on “New York”, “London” or “Paris” to switch between the slides. I want it switch automatically.
Any help?