parallax scroll in the theatre - tis pity opera fantasia

Web design trends we love – parallax scroll

When I am surfing the web in my day to day business, I am always on the look out for web design techniques that really pop out of the screen and look great. One of these techniques, that I have noticed recently and loved – when it is done well – is parallax scroll. When you scroll down a page and the background moves at a different speed or direction to the foreground, creating a 3D effect and creates a dynamic effect on the web page.

It is best to use this technique sparingly, as overuse can be overwhelming on a web page.

Examples of parallax scroll

You can see an example of what I mean on the Jess and Russ website:

parallax background scroll - jess and russ website

Incidentally, the Jess and Russ website is the most romantic and sophisticated wedding invitation I have ever seen! What a legacy!

Another example is the Garden Studio:


This is a mix of techniques, but subtle enough not to be overwhelming. It also shows the flip side to this technique, when the background remains static and the foreground scrolls up over the background image.

Fixed background – foreground scroll

I also really like that technique of keeping the background fixed, while the foreground moves up over the background. You can see the effect more clearly here on the Krystalrae website:

parallax scroll, fixed background, moving foreground

It is also a very clever use of parallax, to show the model’s clothing change on the scroll, lower down the page.

Is it easy to get this effect on your website?

It is important to utilise parallax scroll in a way that translates to responsive design on mobiles and tablets. Parallax scroll should also not be used for the sake of it. It can be used very effectively for story telling and to add depth and interest to a website.

It might be right for your project! Get in touch to discuss the possibilities today!

No Comments

Post A Comment