I recently heard about the release of a great looking web app, Colorful, and was intrigued by a parallax box on their launch site, so Daniele and I started wondering if it could be recreated in Sparkle.
This is what is looks like on the colorful website:
So multiple columns of items, each subtly scrolling in different directions.
I’m sure it took quite a bit of custom coding to build that, so I wasn’t expecting it to be a three checkbox deal. But after all we have a similar effect on our current home page, so I was confident it could be done.
All in all it wasn’t a huge amount of effort, a couple hours start to finish, including finding a few suitable stock images.
I duplicated the page every so often, so you can sort of see the progression steps.
Step 1: so I first started out by adding a bunch of images on the page, placing them in a group, rotating them, and placing a reference box for where I expect the images to be visible.
Step 2: next I downloaded a bunch of stock images using the built-in stock image picker, and used the background remover to isolate the image. A couple abstract backgrounds (also from stock images) complete the picture, one behind the highlighted image, the other behind everything.
Step 3: here I converted all images to boxes, to be able to set a background color, with rounding. I also tidied up the layer names and grouped the three image columns.
Step 4: here I added shadows to create some depth.
Step 5: here I tiding up the layout a bit and added parallax effects to the three columns. Somewhat unintuitively the downwards motion of the center column is achieved by slowing down scrolling compared to the page, not by setting a negative speed.
Step 6: finally I tweaked the layout some more, changing the rotation slightly and tightening up the spacing, and added some masking boxes, to cover the “non visible” parts of the layout. While this is horrifying on some level, the concept of hiding/occlusion is absolutely the norm in constructing all sorts of animations, games, movie special effects and even website content.
You can view the published version of final step here:
You are welcome to download the completed project with the different steps.