Back to Fluid Thinking
Nike use Parallax Scrolling for Air Jordan Campaign
Nike has run with the momentum gained from their last burst of web creativity and launched a new promotion for their Air Jordan range, again utilizing the parallactic scrolling effect used on their Nike Better World microsite. You can see the site here: http://www.nike.com/jumpman23/aj2012/. Go and have a look and then come back and read my post! (See you in an hour).
Nike is a premium brand, and they are promoting a premium product retailing around £110. Nike’s previous effort – http://www.nikebetterworld.com/about – was based on a campaign promoting Nike’s green credentials and charitable M.O. but their new site is aimed at directly marketing a product range. As a Developer, it’s great to see technical demonstrations like this from large companies that get people without any technical knowledge to go “Wow!”, get people within the web industry to go “How?” and ultimately still achieve the underlying goal of promoting and selling a product. The sites are a brilliant marriage between marketing, design, photography and development and set a high benchmark for everyone within the creative industry.
How to Wow – The Technical Bit
So how is it done? I’ve thrown around the word “Parallax” a few times; “the effect whereby the position or direction of an object appears to differ when viewed from different positions, e.g. through the viewfinder and the lens of a camera”.
Both of Nike’s sites depend on the user scrolling through the page, a typical user interaction on a website. However, the result is atypical to what you would expect. The parallactic effect is caused by different elements on the page scrolling at different speeds. Say, for example, the user scrolls down 500px – some of the elements will move by 500px but others will move at an atypical rate, meaning they will have moved by more or less distance than their counterparts. The simplistic way of achieving this is to alter an element’s properties using ratios and offsets. If we applied a ratio of 1.5 to an element it would mean that once the page has scrolled by 500px, our element will move by 750px. An offset would then add or subtract a set value to this, allowing us to delay or push forward when the element appears on screen. So adding an offset of -250px would bring our element back to its normal position at that point.
Nike’s effects are more complex than these and incorporate what I will call “Calculation Ranges”, where properties are altered according to how far the user has scrolled the page. Between 0px-1000px the element may be disabled, but between 1000px-2000px the element may have a rate of 2 and an offset of -1000px, resulting in the element passing the screen at twice the speed it usually would. You could also fix the position at a certain range, making an element static on a page. You can see this in practice with the three product montages that comprise of a Jet Plane, a Sports Car and a Tank (comprised of parts of the shoes that remain static momentarily).
There are also other techniques at play such as Easing, where an elements’ properties are altered in a non-linear fashion causing them to speed up and slow down, key-frame animations where different frames of an animation/video are displayed based on the amount of scroll and an innovative way of displaying the user’s progress through the site (the three circles on the right hand side replacing the traditional scroll bar). However, all of the techniques used will essentially define the properties and position of given elements on a page based on the amount the user has scrolled.
Practice makes Perfect
There are several improvements between the new Air Jordan site and the previous Better World site.
- Prompts: There is now a message prompting the user to “Scroll to Control” which has enabled them to remove the traditional scroll-bar.
- Indicators: The previous site was split up into 11 sections, each represented by a small circle icon on the right-hand side of the page, which became green when the current section was in focus. There are now only 3 sections, each of which is represented by a different coloured circle. These expand at the beginning of the section, contract at the end of the section and have an arc to indicate how far through the section the user is.
- Complexity: This site is far more complex, abandoning the paginated layout of the previous site, introducing horizontal and diagonal movement in addition to vertical and incorporating the previously mentioned features such as easing and animations.
I want a go
Since the original site launched, there have been many clones spotted around the web – “Imitation is the best form of flattery”. If you are a developer there are many libraries such as jQuery Parallax and Scrollorama that can help out. If you are interested in something similar, or web design in general, for your business then get in touch with Fluid Creativity and we’ll be happy to help.