This simple experiment uses a single CMS collection list and a single interaction to create this effect. Upon scrolling these “photo cards” grow when near the center of the page and shrink as they exit. The photo inside the card is fixed as is the background photo. The two work together for a nice visual transition that keeps the eye focused on the central card.
Would love to hear thoughts and suggestion on how to smooth out the interaction. The effect is close but it could use some refinement. Clone away and see what you can do with it.
I’m always on a quest to make the web feel more app-like with animations and micro-interactions. This was inspired from a Dribbble shot by Kévin Gautier. I chose to focus on the scrolling card interaction for now.