Return to site

Parallax css only

broken image
broken image

Some of the most popular ‘wow’ websites will use parallax in ingenious ways to draw the user’s attention and direct their journey through the site. When done properly *, parallax looks superb and adds engaging movement and dynamism to an otherwise static medium.

broken image

There are currently 252 packages for parallax live on NPM – so perhaps it is a little overdone… 😉 That amount of interest does however indicate its popularity. This effect is a big deal in the web design world, and doesn’t seem to be going away any time soon. Parallax is an web design effect where the background content (usually imagery) moves at a different pace from the content in front of it when the user scrolls. So, what are our options for adding a basic parallax style effect without any of the baggage? What is parallax? Sadly though, parallax implementations often suffer from being JS heavy and poorly optimised, and can introduce performance problems.

broken image

Parallax is a popular scrolling effect used on many modern websites, and when done well can look fantastic.

broken image