How to create a layered parallax effect on your site

layered parallax effect
(Image credit:

Parallax motion, the concept of moving layers at different speeds, has been used for years in animation. The official website of Bear Grylls (one of our favourite parallax scrolling sites), takes the effect in new and interesting directions. The background mountains scale down into position, while fading up so that they become fully opaque, and in the background of the page, the text ‘adventure’ rises up into place behind the mountains as it fades in.

For more inspiring motion effects, check out our guide to the best CSS animations and how to code them.

Thank you for reading 5 articles this month* Join now for unlimited access

Enjoy your first month for just £1 / $1 / €1

*Read 5 free articles per month without a subscription

Join now for unlimited access

Try first month for just £1 / $1 / €1

Web Designer staff

Web Designer is the premier magazine for aspiring online creatives and industry professionals. The monthly title offers cutting-edge practical projects spanning XHTML, CSS, Flash and WordPress as well as hosting features and interviews with the web community’s most influential people. Each issue also has a dedicated Industry section covering news and views from the trade, website showcases featuring the finest design talent and a free CD of valuable resources.