We are building the website for our own Start-up. We have foreseen right after our Hero-Section a place to show a “Image Carousel” of 4 screenshots of our app.
Our inspiration is the homepage of www.sketch.com. After their hero image, they have put a very nice way of showing their screenshots.
Question: How can did they do this? They seem to do 2 things:
- Screenshot #1 starts in focus, whereas Screenshot #2, Screenshot#3 and Screenshot 4 are blurred out, and stacked behind. >> OK! I can manage that.
- They have a automatic timed animation that spins the screenshots. >> OK: I have setup a timed trigger on page load.
- Now: they also move screenshot #2 (which was first behind screenshot 2), to be in front of screenshot #1. >> Not sure how they do that.
I tried putting the two same screenshots on the same z-index, and that play with 3D transformation and depth, but this doesn’t change stacking order.
Here is my public share link: Webflow - ClimateCamp
Here is live website: https://climatecamp.webflow.io/
Screenshot from Sketch Website: