Parallax scrolling is a technique that has generally been used in generating computer graphics, where the foreground objects and background images move at different speeds. This creates a 2D type feel and provides depth to the screen. More recently this technique has been employed by some cutting edge web designers, that have used the effect to create interest and a more engaging experience for a visitor to a website.
Parallax scrolling can be used to tell a story or to aesthetically display content. It is a pleasing effect in the sense that it keeps things in perspective by leaving at least one element, or layer, of the website static. Visitors are also given control over the scrolling, which results in an interactive experience.
Successful Parallax Scrolling Designs
Two major web campaigns by American sporting goods manufacturing giant Nike feature parallax scrolling. Both the Nike Better World and Air Jordan 2012 campaigns feature complex scrolling in various directions, providing an impressive feel to the sites.
The official Nintendo page for the Mario Kart Wii game prompts visitors to use their cursor keys to scroll from checkpoint to checkpoint, just like in a Mario Kart race. There is a bit of a legacy factor at play here, whereby Mario fans may remember parallax scrolling from older two-dimensional platform games like Super Mario Brothers.
The Range Rover Evoque Special Edition website combines impressive asynchronous scrolling and digital photography to improve on the old Flash picture slide shows. Visitors can only scroll up or down, but the direction and speed of the content varies while always displaying an attractive background.
How Parallax Scrolling is Achieved in Web Design
In the early 1980s, video game designers used a combination of layer, sprite and raster animations to achieve parallax scrolling. Web designers have a couple of options available to them to create this effect; the first being HTML5. The main problem with HTML5 is that it is not yet fully supported by all browsers, and the parallax scrolling effect may consume too many resources from older devices or be rendered ineffective. Scrolling in different directions may present an optimal experience for touchscreen users of mobile devices, but the technology still needs some catching up to do before it can be used to it’s full potential.
As an alternative to HTML5, web designers can combine the power of CSS and JavaScript to design their own parallax scrolling techniques. Less experienced designers may find jQuery plugins, such as Stellar and Scrolldeck, ideal for this purpose.
Whether using HTML5, JavaScript or jQuery plugins, the mechanics of the parallax effect remain the same: The background is either static or scrolls very slowly; Sprites scroll faster than the background; Sections of content scroll faster than sprites and background.
To achieve the full effect the designed must arrange the objects on the page to scroll at different speeds. The scrolling motion can be programmed to take place on the x or y axis for horizontal or vertical directions.
The Future of Parallax Design
Judging by the success of the Nike web campaigns, it is safe to assume that parallax scrolling will soon be a part of many web designers’ portfolios. The highly-responsive touchscreens of tablets and smartphones make parallax scrolling websites an enticing proposition, but only if developers work on reducing the constraints of HTML5 on some mobile systems. When properly implemented, parallax animations can enhance storytelling and engage website visitors.
Nicola Byrne writes for Calverton Finance, a UK company specialising in invoicefactoring and payroll finance.