Parallax design is a technique where background and foreground images move at different speeds, giving an illusion of depth and creating a 3D effect as you scroll. In most cases, the parallax scrolling effect is added to background images and videos. It can be vertical or horizontal, although vertical scrolling is most common.
This technique has been around for quite some time in the Web design community before its recent rise to a trending style. When used sparingly, it can provide a nice, subtle element of depth that enhances user engagement.
Parallax scrolling effects are slowly being implemented on many sites across the Web. Since it's still not a standard technique, you increase your chance to achieve a "wow" effect. Because different layers of a website move at different speeds, people get immersed into a more engaging and vibrant user experience.
It also creates harmony with other design elements within a Web page. For example, one of the most popular contemporary trends is long-scrolling web pages. In an environment where a user scrolls rather than clicks, the parallax scrolling technique creates the desired illusion of depth. By integrating this effect in the backgrounds, you grow the chances of keeping the audience more interested, thus increasing visit times.
Things to consider when implementing parallax scrolling into your design:
Today we'd like to share a fun parallax scrolling Christmas card, a demo of this tutorial. It is built with CSS and skrollr.js, a stand-alone Javascript parallax scrolling library. A few highlights of the tutorial are outlined below.
Using skrollr.js
Skrollr.js allows you to animate the CSS properties of an element depending on the horizontal scrollbar position. It is implemented with the use of HTML5 “data-” attributes, so you can easily add scrolling effects to your site without even touching the Javascript!
The Images
7 images were used: three background images, two repetitive patterns (red diagonal stripes, snowflakes), a transparent PNG (blue snowflakes), and an SVG containing two paths (left and right parts) of a simple ribbon bow.
Methods
The parallax effect was implemented by Repeat Pattern, where scrolling displays over a repeated background, and by Raster Parallax, which is used to give an optical illusion of movement.
What about mobile?
Because position:fixed does not work well on many mobile devices, we have provided an alternative solution for mobile phones. A script was added to detect mobile browsers (767px and smaller) and redirect their users to the mobile version of the page. For the purpose of this tutorial, the mobile page is only a basic static HTML page. It works great on tablets, though. Check it out!
The Final Result
A link to the scrolling Christmas card demo is provided below. Take a look at the source code and adapt it for your own project!
When used properly, the parallax scrolling effect can significantly enhance the visual appeal of a website and engage the user with a captive storytelling experience. Use the parallax effect to your benefit (and avoid the most widespread mistakes) to achieve a "wow" effect on your site.
We hope you have enjoyed this tutorial and have learned a few interesting things in the process! Until next time, happy coding!
Projects
