A clever new take on parallax scrolling

Whizz-bang parallax scrolling effects have been done to death. Here's a site that takes a more subtle approach.

L’Atelier's new site makes subtle use of parallax scrolling

Parallax scrolling is clearly a trend that's here to stay. But just because it's a popular technique doesn't mean you have to use it. And even if you do, there's no reason to go over the top with it.

A great example of how subtle scrolling effects can be more effective and eye-catching than explosive ones is the new site of Montreal agency L'Atelier. Navigating around the site you may not even notice the effects, but they are there and give a nuanced atmosphere of sophistication and depth to the agency's online presence.

Room effect

"My partner and I wanted to create a room effect, which would represent L'Atelier (it means 'The Workshop' in English)," explains designer Hubert Meffe. "Each room presents objects moving at different speed depending on their depth, which is illustrated with shadows and blur."

The parallax effects were created via a custom made script that uses CSS3 3D transform, HTML5 data attributes and JavaScript.

"A lot of textures and natural objects, such as wood and feathers, are used to represent the handmade brand and personnalized services of L’Atelier," Meffe adds. A lot of photo manipulation was required to obtain the result we wanted."


Tom May is a freelance writer and editor specialising in design and technology. He was previously associate editor at Creative Bloq and deputy editor at net magazine, the world’s best-selling magazine for web designers. Over two decades in journalism he’s worked for a wide range of mainstream titles including The Sun, Radio Times, NME, Heat, Company and Bella. Follow him on Twitter @tom_may.