Diagonal parallax

[duncan]

Hey everybody,

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:

https://sparkleapp.com/demo/diagonal/step-6.html

You are welcome to download the completed project with the different steps.

https://sparkleapp.com/demo/diagonal.sparkle

[PPEmail]

Very Cool!..

Now to figure out how to organically integrate

[MiWe]

Thank you so much Duncan, that is great.
We would love to see more tipps/tutorials like that, if I may speak for others too.

[Nathan]

Whenever I come across a website with amazing effects, I wonder if it can be recreated with Sparkle, and the answer in my head is usually ‘Yes!’ The Sparkle Approach is the best one I’ve seen from any website builder: simple to use and giving design freedom, with almost all effects working seamlessly on top of each other. The recent addition of buttons inside a popup opening another popup opened up a lot of design and function freedom.

[iVivid]

That is super cool and going to be fun to play with for sure!

[Tomki]

Great job, Duncan. Thank you so much!