Behind The Scenes Of Nike Better World

Advertisement

Perhaps one of the most talked about websites in the last 12 months has been Nike Better World1. It’s been featured in countless Web design galleries, and it still stands as an example of what a great idea and some clever design and development techniques can produce.

In this article, we’ll talk to the team behind Nike Better World to find out how the website was made. We’ll look at exactly how it was put together, and then use similar techniques to create our own parallax scrolling website. Finally, we’ll look at other websites that employ this technique to hopefully inspire you to build on these ideas and create your own variation.

Nike Better World

screenshot2

Nike Better World is a glimpse into how Nike’s brand and products are helping to promote sports and its benefits around the world. It is a website that has to be viewed in a browser (preferably a latest-generation browser, although it degrades well) rather than as a static image, because it uses JavaScript extensively to create a parallax scrolling effect.

A good deal of HTML5 is used to power this immersive brand experience and, whatever your views on Nike and its products, this website has clearly been a labor of love for the agency behind it. Although parallax scrolling effects are nothing new, few websites have been able to sew together so many different design elements so seamlessly. There is much to learn here.

An “Interactive Storytelling Experience”

In our opinion, technologies are independent of concept. Our primary focus was on creating a great interactive storytelling experience.

– Wieden+Kennedy

Nike turned to long-time collaborator Wieden+Kennedy (W+K), one of the largest independent advertising agencies in the world, to put together a team of four people who would create Nike Better World: Seth Weisfeld3 was the interactive creative director, Ryan Bolls produced, while Ian Coyle4 and Duane King5 worked on the design and interaction.

screenshot

I started by asking the team whether the initial concept for the website pointed to the technologies they would use. As the quote above reveals, they in fact always start by focusing on the concept. This is a great point. Too many of us read about a wonderful new technique and then craft an idea around it. W+K walk in the opposite direction: they create the idea first, and sculpt the available technologies around it.

So, with the concept decided on, did they consciously do the first build as an “HTML5 website,” or did this decision come later?

There were some considerations that led us to HTML5. We knew we wanted to have a mobile- and tablet-friendly version. And we liked the idea of being able to design and build the creative only once to reach all the screens we needed to be on. HTML5 offered a great balance of creativity and technology for us to communicate the Nike Better World brand message in a fresh and compelling way.

— W+K

HTML5 is still not fully supported in all browsers (read “in IE”) without JavaScript polyfills, so just how cross-browser compatible did the website have to be?

The primary technical objectives were for the site to be lightweight, optimized for both Web and devices, as well as to be scalable for future ideas and platforms.

— W+K

To achieve these goals, the website leans on JavaScript for much of the interactivity and scrolling effects. Later, we’ll look at how to create our own parallax scrolling effect with CSS and jQuery. But first, we should start with the template and HTML.

The Starting Boilerplate

It’s worth pointing out the obvious first: Nike Better World is original work and should not be copied. However, we can look at how the website was put together and learn from those techniques. We can also look at other websites that employ parallax scrolling and then create our own page, with our own code and method, and build on these effects.

I asked W+K if it starts with a template.

We started without a framework, with only reset styles. In certain cases, particularly with experimental interfaces, it ensures that complete control of implementation lies in your hands.

— W+K

If you look through some of the code on Nike Better World, you’ll see some fairly advanced JavaScript in a class-like structure. However, for our purposes, let’s keep things fairly simple and rely on HTML5 Boilerplate as our starting point.

Download HTML5 Boilerplate6. The “stripped” version will do. You may want to delete some files if you know you won’t be using them (crossdomain.xml, the test folder, etc.).

As you’ll see from the source code (see the final code7 below), our page is made up of four sections, all of which follow a similar pattern. Let’s look at one individual section:

<section class="story" id="first" data-speed="8" data-type="background">
 <div data-type="sprite" data-offsetY="950" data-Xposition="25%" data-speed="2"></div>
 <article>
  <h2>Background Only</h2>
  <div>
   <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
  </div>
 </article>
</section>

I’m not sure this is the best, most semantic use of those HTML5 tags, but it’s what we need to make this effect work. Normally, a section has a heading, so, arguably, the section should be a div and the article should be a section. However, as W+K points out, the HTML5 spec is still young and open to interpretation:

HTML5 is still an emerging standard, particularly in implementation. A lot of thought was given to semantics. Some decisions follow the HTML5 spec literally, while others deviate. As with any new technology, the first to use it in real-world projects are the ones who really shape it for the future.

— W+K

This is a refreshing interpretation. Projects like Nike Better World are an opportunity to “reality check” an emerging standard and, for the conscientious among us, to provide feedback on the spec.

In short, is the theory of the spec practical? W-K elaborates:

We use the article tag for pieces of content that can (and should) be individually (or as a group) syndicated. Each “story” is an article. We chose divs to wrap main content. We took the most liberty with the section tag, as we feel its best definition in the spec is as chapters of content, be it globally.

— W+K

As an aside (no pun intended!), HTML5 Doctor has begun a series of mark-up debates called Simplequizes8, which are always interesting and illustrate that there is rarely one mark-up solution for any problem. Make sure to check them out.

In style.css, we can add a background to our section with the following code:

section { background: url(../images/slide1a.jpg) 50% 0 no-repeat fixed; }

We should also give our sections a height and width, so that the background images are visible:

.story { height: 1000px; padding: 0; margin: 0; width: 100%; max-width: 1920px; position: relative; margin: 0 auto; }

I’ve set the height of all our sections to 1000 pixels, but you can change this to suit your content. You can also change it on a per-section basis.

We have also made sure that the maximum width of the section is the maximum width of the background (1920 pixels), and we have specified a relative position so that we can absolutely position its children.

Here’s the page before adding JavaScript9. It’s worth digging into the source code to see how we’ve duplicated the sections in the HTML and CSS.

screenshot

Even with this code alone, we already have a pleasing effect as we scroll down the page. We’re on our way.

The HTML5 Data Attribute

Before looking at parallax scrolling, we need to understand the new data attribute, which is used extensively throughout the HTML above.

Back in the good old days, we would shove any data that we wanted to be associated with an element into the rel attribute. If, for example, we needed to make the language of a story’s content accessible to JavaScript, you might have seen mark-up like this:

<article class='story' id="introduction" rel="en-us"></article>

Sometimes complex DOM manipulation requires more information than a rel can contain, and in the past I’ve stuffed information into the class attribute so that I could access it. Not any more!

The team at W+K had the same issue, and it used the data attribute throughout Nike Better World:

The data attribute is one of the most important attributes of HTML5. It allowed us to separate mark-up, CSS and JavaScript into a much cleaner workflow. Websites such as this, with high levels of interaction, are almost application-like behind the scenes, and the data attribute allows for a cleaner application framework.

— W+K

screenshot

So, what is the data attribute? You can read about it in the official spec10, which defines it as follows:

Custom data attributes are intended to store custom data private to the page or application, for which there are no more appropriate attributes or elements.

— W+K

In other words, any attribute prefixed with data- will be treated as storage for private data; it does not affect the mark-up, and the user cannot see it. Our previous example can now be rewritten as:

<article class='story' id="introduction" data-language="en-us"></article>

The other good news is that you can use more than one data attribute per element, which is exactly what we’re doing in our parallax example. You may have spotted the following:

<div data-type="sprite" data-offsetY="100" data-Xposition="50%" data-speed="2"></div>

Here, we are storing four pieces of information: the x and y data offsets and the data speed, and we are also marking this element as a data type. By testing for the existence of data-type in the JavaScript, we can now manipulate these elements as we wish.

Parallax Scrolling

On our page, three things create the parallax scrolling illusion:

  • The background scrolls at the slowest rate,
  • Any sprites scroll slightly faster than the background,
  • Any section content scrolls at the same speed as the window.

With three objects all scrolling at different speeds, we have created a beautiful parallax effect.

screenshot

It goes without saying that we don’t need to worry about the third because the browser will take care of that for us! So, let’s start with the background scroll and some initial jQuery.

$(document).ready(function(){
 // Cache the Window object
 $window = $(window);
// Cache the Y offset and the speed
$('[data-type]').each(function() {
  $(this).data('offsetY', parseInt($(this).attr('data-offsetY')));
  $(this).data('speed', $(this).attr('data-speed'));
});
// For each element that has a data-type attribute
 $('section[data-type="background"]').each(function(){
  // Store some variables based on where we are
  $(this).data('speed', parseInt($(this).attr('data-speed')));
   var $self = $(this),
   offsetCoords = $self.offset(),
   topOffset = offsetCoords.top;
   $(window).scroll(function(){
    // The magic will happen in here!
   }); // window scroll
 });  // each data-type
}); // document ready

First, we have our trusty jQuery document ready function, to ensure that the DOM is ready for processing. Next, we cache the browser window object, which we will refer to quite often, and call it $window. (I like to prefix jQuery objects with $ so that I can easily see what is an object and what is a variable.)

We also use the jQuery .data method to attach the Y offset (explained later) and the scrolling speed of the background to each element. Again, this is a form of caching that will speed things up and make the code more readable.

We then iterate through each section that has a data attribute of data-type="background" with the following:

$('section[data-type="background"]').each(function(){}

Already we can see how useful data attributes are for storing multiple pieces of data about an object that we wish to use in JavaScript.

Inside the .each function, we can start to build up a picture of what needs to be done. For each element, we need to grab some variables:

// Store some variables based on where we are
var $self = $(this),
    offsetCoords = $self.offset(),
    topOffset = offsetCoords.top;

We cache the element as $self (again, using the $ notation because it’s a jQuery object). Next, we store the offset() of the element in offsetCoords and then grab the top offset using the .top property of offset().

Finally, we set up the window scroll event, which fires whenever the user moves the scroll bar or hits an arrow key (or moves the trackpad or swipes their finger, etc.).

We need to do two more things: check that the element is in view and, if it is, scroll it. We test whether it’s in view using the following code:

// If this section is in view
if ( ($.Window.scrollTop() + $.Window.height()) > ($offsetCoords.top) &&
( ($offsetCoords.top + $self.height()) > $.Window.scrollTop() ) ) {
}

The first condition checks whether the very top of the element has scrolled into view at the very bottom of the browser window.

The second condition checks whether the very bottom of the element has scrolled past the very top of the browser window.

You could use this method to check whether any element is in view. It’s sometimes useful (and quicker) to process elements only when the user can see them, rather than when they’re off screen.

So, we now know that some part of the section element with a data-type attribute is in view. We can now scroll the background. The trick here is to scroll the background slower or faster than the browser window is scrolling. This is what creates the parallax effect.

Here’s the code:

// Scroll the background at var speed
// the yPos is a negative value because we're scrolling it UP!
var yPos = -($window.scrollTop() / $self.data('speed'));

// If this element has a Y offset then add it on
if ($self.data('offsetY')) {
  yPos += $self.data('offsetY');
}

// Put together our final background position
var coords = '50% '+ yPos + 'px';

// Move the background
$self.css({ backgroundPosition: coords });

The y position is calculated by dividing the distance that the user has scrolled from the top of the window by the speed. The higher the speed, the slower the scroll.

Next, we check whether there is a y offset to apply to the background. Because the amount that the background scrolls is a function of how far the window has scrolled, the further down the page we are, the more the background has moved. This can lead to a situation in which the background starts to disappear up the page, leaving a white (or whatever color your background is) gap at the bottom of each section.

The way to combat this is to give those backgrounds an offset that pushes them down the page an extra few hundred pixels. The only way to find out this magic offset number is by experimenting in the browser. I wish it was more scientific than this, but this offset really does depend on the height of the browser window, the distance scrolled, the height of your sections and the height of your background images. You could perhaps write some JavaScript to calculate this, but to me this seems like overkill. Two minutes experimenting in Firebug yields the same result.

The next line defines a variable coords to store the coordinates of the background. The x position is always the same: 50%. This was the value we set in the CSS, and we won’t change it because we don’t want the element to scroll sideways. Of course, you’re welcome to change it if you want the background to scroll sideways as the user scrolls up, perhaps to reveal something.

(Making the speed a negative number for slower scrolling might make more sense, but then you’d have to divide by -$speed. Two negatives seems a little too abstract for this simple demonstration.)

Finally, we use the .css method to apply this new background position. Et voila: parallax scrolling!

Here’s the code in full:

// Cache the Window object
$window = $(window);

// Cache the Y offset and the speed of each sprite
$('[data-type]').each(function() {
  $(this).data('offsetY', parseInt($(this).attr('data-offsetY')));
  $(this).data('speed', $(this).attr('data-speed'));
});

// For each element that has a data-type attribute
$('section[data-type="background"]').each(function(){

// Store some variables based on where we are
var $self = $(this),
    offsetCoords = $self.offset(),
    topOffset = offsetCoords.top;

$(window).scroll(function(){

// If this section is in view
if ( ($window.scrollTop() + $window.height()) > (topOffset) &&
( (topOffset + $self.height()) > $window.scrollTop() ) ) {

  // Scroll the background at var speed
  // the yPos is a negative value because we're scrolling it UP!
  var yPos = -($window.scrollTop() / $self.data('speed'));

  // If this element has a Y offset then add it on
  if ($self.data('offsetY')) {
    yPos += $self.data('offsetY');
  }

  // Put together our final background position
  var coords = '50% '+ yPos + 'px';

  // Move the background
  $self.css({ backgroundPosition: coords });

  }; // in view

}); // window scroll

}); // each data-type

Of course, what we’ve done so far is quite a bit simpler than what’s on Nike Better World. W+K admits that the parallax scrolling threw it some challenges:

The parallax scrolling presented a few small challenges in cross-browser compatibility. It took a little experimenting to ensure the best scrolling experience. In the end, it was less about the actual parallax effect and more about synchronized masking of layers during transitions.

— W+K

W+K also reveals how it maintained a fast loading and paint speed by choosing its tools wisely:

The key to maintaining faster speeds is to use native CSS where possible, because DOM manipulation slows down rendering, particularly on older browsers and processors.

— W+K

For example, the “More” button below spins on hover, an effect achieved with CSS3. In browsers that don’t support CSS3 transforms, the purpose of the graphic is still obvious.

screenshot

Adding More Elements

Of course, one of the other common features of parallax scrolling is that multiple items on the page scroll. So far, we have two elements that move independently of each other: the first is the page itself, which scrolls when the user moves the scroll bar, and the second is the background, which now scrolls at at slower rate thanks to the jQuery above and the background-position CSS attribute.

For many pages, this would be enough. It would be a lovely effect for the background of, say, a blog. However, Nike and others push it further by adding elements that move at a different speed than that of the page and background. To make things easy — well, easier — I’m going to call these new elements sprites.

Here’s the HTML:

<div id="smashinglogo" data-type="sprite" data-offsetY="1200" data-Xposition="25%" data-speed="2"></div>

Put this just before the closing </article> tag, so that it appears behind the contents of <article>. First, we give the div an id so that we can refer to it specifically in the CSS. Then we use our HTML5 data attribute to store a few values:

  • The status of a sprite,
  • A y (vertical) offset of 1200 pixels,
  • An x (horizontal) position as a percentage,
  • A scrolling speed.

We give the x position of the sprite a percentage value because it is relative to the size of the viewport. If we gave it an absolute value, which you’re welcome to try, there’s a chance it could slide out of view on either the left or right side.

Now about that y offset…

Inception

This is the bit that’s going to mess with your noodle and is perhaps the hardest part of the process to grasp.

Thanks to the logic in the JavaScript, the sprite won’t move until the parent section is in view. When it does move, it will move at (in this case) half the speed. You need the vertical position, then, to account for this slower movement; elements need to be placed higher up if they will be scrolling more slowly and, therefore, moving less on the y axis.

We don’t know how far the user has to scroll before the section appears at the bottom of the page. We could use JavaScript to read the viewport size and then do some calculations based on how far down the page the section is positioned. But that is already sounding too complicated. There is an easier way.

What we do know is how far the user has scrolled before the current section is flush with the top of the viewport: they have scrolled the y offset of that particular section. (Put another way, they have scrolled the height of all of the elements above the current one.)

So, if there are four sections, each 1000 pixels high, and the third section is at the top of the viewport, then the user must have scrolled 2000 pixels, because this is the total height of the preceding sections.

If we want our sprite to appear 200 pixels from the top of its parent section, you’d figure that the total vertical offset we give it should be 2200 pixels. But it’s not, because this sprite has speed, and this speed (in our example) is a function of how far the page has been scrolled.

Let’s assume that the speed is set as 2, which is half the speed at which the page is scrolling. When the section is fully in view, then the window has scrolled 2000 pixels. But we divide this by the speed (2) to get 1000 pixels. If we want the sprite to appear 200 pixels from the top, then we need to add 200 to 1000, giving us 200 pixels. Therefore, the offset is 1200. In the JavaScript, this number is inverted to -1200 because we are pushing the background-position down off the bottom of the page.

Here’s a sketch to show this in action.

This is one of those concepts that is easier to understand when you view the page and source code and scroll around with the console open in Firebug or Developer Tools.

The JavaScript looks like this:

// Check for other sprites in this section
$('[data-type="sprite"]', $self).each(function() {

  // Cache the sprite
  $sprite = $(this);

  // Use the same calculation to work out how far to scroll the sprite
  var yPos = -($.Window.scrollTop() / $sprite.data('speed'));
  var coords = $sprite.data('Xposition') + ' ' + (yPos + $sprite.data('offsetY')) + 'px';
  $sprite.css({ backgroundPosition: coords });
}); // sprites

HTML5 Video

One criticism levelled at Nike Better World is that it didn’t use HTML5 video. HTML5 is still not fully supported across browsers (I’m looking at you, Internet Explorer), but for the purposes of this article, we’ll embrace HTML5 video, thanks to the lovely folks at Vimeo11 and Yum Yum London12.

But we can’t set a video as a background element, so we have a new challenge: how to position and scroll this new sprite?

Well, there are three ways:

  1. We could change its margin-top property within its parent section;
  2. We could make it a position: absolute element and change its top property when its parent section comes into view;
  3. We could define it as position: fixed and set its top property relative to the viewport.

Because we already have code for the third, let’s grab the low-hanging fruit and adapt it to our purposes.

Here’s the HTML we’ll use, which I’ve placed after the closing </article> tag:

<video controls width="480" width="320" data-type="video" data-offsetY="2500" data-speed="1.5">
  <source src="video/parallelparking.theora.ogv" type="video/ogg" />
  <source src="video/parallelparking.mp4" type="video/mp4" />
  <source src="video/parallelparking.webm" type="video/webm" />
</video>

First, we’ve opened our HTML5 video element and defined its width and height. We then set a new data-type state, video, and defined our y offset and the speed at which the element scrolls. It’s worth nothing that some experimentation is needed here to make sure the video is positioned correctly. Because it’s a position: fixed element, it will scroll on top of all other elements on the page. You can’t cater to every viewport at every screen resolution, but you can play around to get the best compromise for all browser sizes (See “Bespoke to Broke” below).

The CSS for the video element looks like this:

video { position: fixed; left: 50%; z-index: 1;}

I’ve positioned the video 50% from the left so that it moves when the browser’s size is changed. I’ve also given it a z-index: 1. This z-index prevents the video element from causing rendering problems with neighbouring sections.

And now for the JavaScript! This code should be familiar to you:

// Check for any Videos that need scrolling
$('[data-type="video"]', $self).each(function() {

  // Cache the sprite
  $video = $(this);

  // Use the same calculation to work out how far to scroll the sprite
  var yPos = -($window.scrollTop() / $video.data('speed'));
  var coords = (yPos + $video.data('offsetY')) + 'px';

  $video.css({ top: coords });

}); // video

And there you have it! A parallax scrolling HTML5 video.

Bespoke or Broke

Of course, every design is different, which means that your code for your design will be unique. The JavaScript above will plug and play, but you will need to experiment with values for the y offset to get the effect you want. Different viewport sizes means that users will scroll different amounts to get to each section, and this in turn affects how far your elements scroll. I can’t control it any more than you can, so you have to pick a happy medium. Even Nike Better World suffers when the viewport’s vertical axis stretches beyond the height of the background images.

I asked W+K how it decides which effects to power with JavaScript and which are better suited to modern CSS techniques:

Key points that required complex interaction relied on JavaScript, while visual-only interactivity relied on CSS3. Additionally, fewer browsers support native CSS3 techniques, so items that were more important to cross-browser compatibility were controlled via JavaScript as well.

— W+K

This is a wonderful example of “real-world design.” So often we are bamboozled with amazing new CSS effects, and we make websites that sneer at older browsers. The truth is, for most commercial websites and indeed for websites like Nike Better World that target the biggest audience possible, stepping back and considering how best to serve your visitors is important.

W+K explains further:

We started by creating the best possible version, but always kept the needs of all browsers in mind. Interactive storytelling must balance design and technology to be successful. A great website usable in one or two browsers ultimately fails if you want to engage a wide audience.

— W+K

And Internet Explorer?!

IE was launched in tandem with the primary site. Only IE6 experienced challenges, and as a deprecated browser, it gracefully degrades.

— W+K

The Final Code

The code snippets in this piece hopefully go some way to explaining the techniques required for a parallax scrolling effect. You can extend them further to scroll multiple elements in a section at different speeds, or even scroll elements sideways!

Feel free to grab the full source code from GitHub13, and adapt it as you see fit. Don’t forget to let us know what you’ve done, so that others can learn from your work.

Of course, remember that manipulating huge images and multiple sprites with JavaScript can have huge performance drawbacks. As Keith Clark recently tweeted14:

screenshot

Test, test and test again. Optimize your images, and be aware that you may have to compromise to support all browsers and operating systems.

Tell A Story

Above and beyond the technical wizardry of parallax websites — some of the best of which are listed below — the common thread that each seems to embody is story. That’s what makes them great.

I asked W+K what it learned from the project:

That a strong voice, simplicity and beauty are integral to a great interactive storytelling experience. We often hear things like “content is king, and technology is just a tool to deliver it,” but when you’re able to successfully combine a powerful message with a compelling execution, it creates an experience that people really respond to and want to spend time with.

— W+K

We really have just scratched the surface of the work that goes into a website like Nike Better World. The devil is in the details, and it doesn’t take long to see how much detail goes into both the design and development.

However, if you have a compelling story to tell and you’re not afraid of a little JavaScript and some mind-bending offset calculations, then a parallax website might just be the way to communicate your message to the world.

More Examples

Nike wasn’t the first and won’t be the last. Here are some other great examples of parallax scrolling:

Manufacture d’essai15

screenshot16

Yebo Creative17

18

TEDx Portland19

screenshot20

Ben the Bodyguard21

screenshot22

Campaign Monitor Is Hiring23

screenshot24

Nizo App25

screenshot26

7 Best Things of 201027

screenshot28

If you’ve seen or built a great parallax website, please let us know about it in the comments.

… If you need any more encouragement to create a website as compelling as these, here’s what the team at W+K used to put together Nike Better World: MacBook Air 13″, Canon 5D Mark II, Coda, Adobe Photoshop and Adobe Illustrator.

Thanks

Putting together this article took the cooperation of a number of people. I’d like to thank Seth, Ryan, Ian and Duane for answering my questions; Katie Abrahamson at W+K for her patience and for helping coordinate the interview; and Nike for allowing us to dissect its website so that others could learn.

(al)

Footnotes

  1. 1 http://www.nikebetterworld.com
  2. 2 http://www.nikebetterworld.com/
  3. 3 http://twitter.com/#!/seth_weisfeld
  4. 4 http://www.iancoyle.com/
  5. 5 http://twitter.com/#!/duaneking
  6. 6 http://html5boilerplate.com/
  7. 7 #finalcode
  8. 8 http://html5doctor.com/html5-simplequiz-6-zeldmans-fat-footer/
  9. 9 http://www.richardshepherd.com/smashing/parallax/background.html
  10. 10 http://dev.w3.org/html5/spec/elements.html#embedding-custom-non-visible-data-with-the-data-attributes
  11. 11 http://vimeo.com/14592941
  12. 12 http://www.yumyumlondon.com/
  13. 13 https://github.com/richardshepherd/Parallax-Scrolling
  14. 14 http://twitter.com/#!/keithclarkcouk/status/86367151585378304
  15. 15 http://www.manufacturedessai.it/en/
  16. 16 http://www.manufacturedessai.it/en/
  17. 17 http://yebocreative.com/
  18. 18 http://yebocreative.com/
  19. 19 http://tedxportland.com/
  20. 20 http://tedxportland.com/
  21. 21 http://benthebodyguard.com/
  22. 22 http://benthebodyguard.com/
  23. 23 http://www.campaignmonitor.com/hiring/
  24. 24 http://www.campaignmonitor.com/hiring/
  25. 25 http://nizoapp.com/
  26. 26 http://nizoapp.com/
  27. 27 http://www.davegamache.com/sandbox/best-of-2010/index.php
  28. 28 http://www.davegamache.com/sandbox/best-of-2010/

↑ Back to topShare on Twitter

Richard (@richardshepherd) is a UK based web designer and front-end developer. He loves to play with HTML5, CSS3, jQuery and WordPress, and currently works full-time bringing VoucherCodes.co.uk to life. He has an awesomeness factor of 8, and you can also find him at richardshepherd.com.

Advertising
  1. 1

    Great article !
    One of my problem with that NBW website is that is totally useless on a mobile …
    That’s a really bad point.
    Anyway, thanks for sharing that work around one of the most cited reference in HTML5 !

    0
  2. 2

    You might like to check out the tutorial I wrote for recreating the Nike Better World parallax effect: http://www.ianlunn.co.uk/blog/code-tutorials/recreate-nikebetterworld-parallax/

    0
    • 3

      Richard Shepherd

      July 12, 2011 1:03 pm

      Thanks for sharing, Ian. Great to see another take on the parallax effect!
      Richard

      0
      • 4

        Thanks for this awesome tutorial, I learned a lot. I have a question: Nike Better World works in IE 7. In the same IE 7 browser, the tutorial files go into quirks mode in IE 7. What is the difference between the Nike site and the tut files re: IE 7? I’ve tried adding the tag and some other things but I’m wondering how did Nike get this to work in IE 7? I’m using html5.js, etc. but no dice.

        0
    • 6

      Ian, sorry I am a rookie but how do you get the buttons to show rollover when you are on that section like the nike site.

      Thanks,
      Jay

      0
    • 7

      Ian, I used your tutorial as a starting point for our company website. At first I made small updates to the code for easier configuration and improved control over the effect. By the end I completely rewrote the script but couldn’t have figured out the technique without your tutorial. I really appreciate the work you put into it and guidance it provided.

      0
  3. 8

    Ian Lunn has recreated this perfectly with his demo at: http://www.ianlunn.co.uk/blog/code-tutorials/recreate-nikebetterworld-parallax/ but 6 months ago ;)

    Ian

    0
  4. 9

    Excelente, muchas gracias por la guia, es algo que esta muy de moda.

    0
  5. 12

    Thanks For sharing, I had seen the site before and had loved it, the 3d kind of effect the parallax is giving is awesome.

    I would probably implementing the idea in my coming projects

    Monit

    0
  6. 13

    My biggest problem with most of these sites is that the motion is jerky and horrible unless you use their menu, if you like to use the scrollwheel the sites are almost unusable.

    0
  7. 17

    6 months ago, I’ve built a website using the same parallax effect but with horizontal scrolling. It was a very very interesting challenge and for sure a lot of testing hours! Since then I’ve added more JavaScript in my projects than before as it made me realize how cool JS can be (as well as the extensions like JQuery, JQuery UI, …)

    The website is: http://eu.lee.com

    0
    • 18

      Alejandro Yanaculis

      November 30, 2011 12:24 pm

      Hey Ben! I visited the site a couple of weeks back, really awesome! I visited using both my PC and my iPad and it was working ok, however I visited on the iPad today and noticed that scrolling using the menu was not working anymore, just so you know

      0
    • 19

      I love the horizontal scroll! I have been trying to recreate the Nike example into a Horizontal site and I am having trouble! Any thoughts or ideas?

      0
  8. 20

    Some brilliant examples and a great little walkthrough. Thanks Richard!

    As an aside; the ‘Manufacture d’essai’ example runs like an absolute dog on my work laptop (Compaq 610) in Chrome.

    0
    • 21

      Richard Shepherd

      July 12, 2011 8:14 am

      Hi Thomas,

      Yep – performance is a real issue with these sites. It just comes with pushing the envelope a little too far ;)

      Richard

      0
  9. 22

    Wow. Scrolling and scrolling all the way down. What’s an idea. HTML5. Wow again. It matters so much for the end user. I like this website since it is using HTML… 5!

    Besides. The content is idiotic. Mass production means polluting of environoment, period. They can pretend that they take care of envirinoment exactly in the same way as Airlines claim that they care about passenger comfort (no Airlines, going from 20 to 25 cm space between seats is not enough).

    Pure marketing without any true meaning, not to mention any gain for environoment.

    Homeless world cup is the most stupid idea I’ve ever heard about. How about spending some money on making them not homeless, what’s next, homeless iPhone application, iPads for homeless?

    That will be probably the subject of the next Nike campaign.

    0
    • 23

      The Homeless World Cup is a phenomenal idea, and significantly improves the lives of players who are involved. I’d suggest you watch ‘Kicking It’ so that you can actually learn something about it, rather than coming across as ignorant.

      0
    • 24

      Is someone a bit jaded, or did you just return from a cramped flight?

      Go build something with a positive message (like saving the environment, tackling homelessness, etc) using a new design technique that isn’t HTML5 or Flash rather than being a downer.

      (Sorry.)

      Great article! And am looking forward to using similar techniques in the future!

      0
  10. 25

    Sequoia McDowell

    July 12, 2011 7:29 am

    Thanks for the write up. Regarding ‘caching the data- attributes for speed,’ jQuery does this internally, unless I’m way off. From the docs:
    “The data- attributes are pulled in the first time the data property is accessed and then are no longer accessed or mutated (all data values are then stored internally in jQuery).”
    (from http://api.jquery.com/data )

    I whipped up a little test to confirm this:
    http://jsfiddle.net/sequoia/xLTtg/

    My point in a nutshell: This:
    $(this).data(‘speed’, parseInt($(this).attr(‘data-speed’)));
    is redundant. jQuery already stores the value and does NOT check the data-attrib each time.

    Please set me straight here if I’m missing something. Thanks!

    0
    • 26

      Tomek Sułkowski

      July 15, 2011 9:59 pm

      Afaik, it is redundand now, but at the time the Nike’s website was built, jQuery haven’t treated “data-” differently than any other attribute you could come up with.

      0
  11. 27

    One of the best articles I’ve read on Smashing for a while. Really inspiring stuff, and has given me a lot to think about with some personal projects I’m trying out.

    Ben the Bodyguard is a really classy piece of implementation!

    0
  12. 28

    Great article. However, you should know that $(this).data(‘speed’) already looks for an data-speed attribute and is equal to $(this).attr(‘data-speed’). IIRC, jQuery also caches the data returned from the attribute, so there’s no need to do that yourself.

    0
  13. 30

    Thanks for this article. It is very helpful for me as hobby web designer to see how such sites are built up and how certain effects are achieved. Personally I would like to see more such decomposing of web sites.

    0
    • 31

      Same here. Would love to see more articles like this that breakdown some of the more innovative websites out there.

      Great article!

      0
  14. 32

    Great Article! thanks for showing the in depth work that went into it.

    0
  15. 33

    Joachim Löfstedt

    July 12, 2011 10:04 am

    This is an awesome writeup, thanks!

    0
  16. 34

    For the relaunch of newzealand.com we took inspiration from Nike Better World and turned the parallax idea on it’s head. What if we took the idea of scrolling through a vertical environment and did it for real with a giant 48 meter motion control scroll bar. Built using HTML5 canvas with a Flash fall back for IE 7-8.

    http://www.newzealand.com/int/

    0
    • 35

      Richard Shepherd

      July 12, 2011 1:07 pm

      WOW!

      Mark, that is a beautiful site and – dare I say – better than NBW ;)

      Congratulations on an extraordinary achievement!

      Richard

      0
    • 37

      Awesome website, seen it before and couldnt take my hand of the scroller.

      0
    • 38

      Amazing work Mark!
      defiantly better than Nike Better World…so beautiful and excellent use of CSS3.

      0
    • 39

      Mark,
      Great job on the website looks great! How were you guys able to have the image slider to scale in the selected area? I am trying to do something similar with my portfolio site and can’t seem to replicate what you guys have done. I’m using FlexSlider to try and accomplish what you have. Any help would be greatly appreciated.

      0
  17. 40

    Jon R. Humphrey

    July 12, 2011 1:24 pm

    Thanks for a wonderful and illuminating article! Although it looks like there might be a rash of Paralax utilising sites in the near future, this faciltates the exact feature two of my clients have expressed interest in; my thanks goes to all who have worked on this past, present and future to make the web so much more interesting! Stay tuned for updates with links once I’ve scratched the surface…

    0
  18. 41

    Looks great on a PC – but runs like a dog (and really doesn’t look very nice) on a Samsung Galaxy unfortunately so I don’t know how much care was paid to mobile devices.

    0
  19. 42

    All that clever code and the Nike site didn’t set a background color, creative director fail, go sit in the naughty corner.

    0
  20. 43

    Awesome tutorial and fantastic example of parallax website!

    0
  21. 44

    Grégoire Lemaire

    July 12, 2011 11:29 pm

    very cool post with source, already 2 parts on webdesigner mag, also with sources ;)

    0
  22. 45

    Really cool article. I only hope that this concept doesnt become a style thats copied everywhere else otherwise we are going to get clients who as for sites like NBW like in the old days when they used to ask for flash sites :(

    Like they said in the article concept/idea should always come first, techinque second.

    0
  23. 46

    Stefan Reichert

    July 13, 2011 2:47 am

    Awesome article and great inspiration for my next project.
    I want more of these articles.

    0
  24. 48

    Great introduction to how to structure this kind of idea, but the example doesn’t seem to actually have any example of where another image would travel at a different speed?

    Am I missing something? The section you’ve called Sprite should be an image which will scroll at a different speed to that of the background yes?

    0
    • 49

      Richard Shepherd

      July 13, 2011 4:42 am

      In my example, the photograph is an image travelling at a different speed to the background and the scrollbar. But it doesn’t have to be an image, which is why I call them ‘sprites’.

      0
  25. 50

    Good Article, As quoted by W+K – Create the idea first, and sculpt the available technologies around it, That is how a process should be.
    All the kind of effects and new technologies mentioned here are no doubt great in enhancing a user’s experience but at the end of the day what matters most is the efficiency.
    So create an experience that is technically degradable in mediums that are less compatible and don’t have to compromise on the minimum basic information that a website has to display.

    0
  26. 51

    trevor o' brien

    July 13, 2011 6:39 am

    Another example just launched today http://rapidboot.com/us/#/home

    Optimized as much as possible for touch devices as well as desktop – more to come but shows the beginning of what can be done as these mobile devices become more powerful.

    Would like to start playing with multi dimensional scrolling to allow people to explore even more with their finger

    0
  27. 52
  28. 53

    Sweet! Love this idea. Think it’s a little ahead of it’s time though and would suit better for touch-screen devices!

    Also, wonder how a horizontal slider would look..

    0
  29. 54

    Hi, I’d like to share our team’s website which involved my part while creating the HTML and Javascript (mootools) for the graphics created by the graphicians :) Site utilises parallax effect widely and does autoscaling for different screen dimensions.

    Last but not least, the site URL: http://ux.digia.com

    0
  30. 55

    Another great example is http://rapidboot.com/us/#/home. Also has a cool video where they throw a ThinkPad out of a plane to see if it will boot and launch its own parachute before it hits the ground.

    0
  31. 56

    Tomek Sułkowski

    July 15, 2011 9:56 pm

    Afaik, it is redundand now, but at the time the Nike’s website was built, jQuery haven’t treated “data-” differently than any other attribute you could come up with.

    0
  32. 57

    Excellent article – well done – again – Smashing Magazine!

    0
  33. 58

    I just spent the last couple days before this article was published recreating this for a client *facepalm*

    0
  34. 59

    Thanks for the inspiration Richard, this is a great article for making the www a better place.
    Not sure if you come across the Disney video about the parallax invention in the field of animation http://www.youtube.com/watch?v=YdHTlUGN1zw&feature=player_embedded I think it’s great.

    0
  35. 60

    Nice design elements, but that opening advertisement (and that’s what it is) Frankly, I thought it’s a lot of self-righteous tripe. The overall petulant immaturity was annoying. But I suppose it appeals to the vanity within… and thus sells $2.00 sneakers made in sweatshops for 150.00.

    0
  36. 61

    Fantastic article! I particularly loved this bit:

    “This is a wonderful example of “real-world design.” So often we are bamboozled with amazing new CSS effects, and we make websites that sneer at older browsers. The truth is, for most commercial websites and indeed for websites like Nike Better World that target the biggest audience possible, stepping back and considering how best to serve your visitors is important.”

    This is extremely important. All too often I see web designers and developers kicking and screaming over older versions of IE, but the truth is it is not about you, it is about your audience. Listen to them and do right by them!

    0
  37. 62

    sushil bharwani

    July 30, 2011 4:06 am

    Thanks for sharing this. Nice tutorial

    0
  38. 63

    Inspired by NikeBetterWorld.com, we’ve used the excellent jquery plugin and tutorial made by Ian Lunn to update our Detox campaign landing page with a parallax effect:

    http://www.greenpeace.org/detox

    We’re challenging sportswear leaders Nike and Adidas to lead their industry towards a toxic-free future, following a year-long investigation into toxic water pollution in rivers in China. I think this really is a great design for storytelling, and a departure from what a campaigning landing page normally looks and feels like.

    (I work for Greenpeace International in Amsterdam, Netherlands)

    0
  39. 64

    Hi there,

    Very nice tutorial! Thank you.

    I have just a short question. I am playing with the style from the downloaded source and there is a border (I am sure it is no border, but it looks like) or something at the body around (it is a grey gradient). How do I delete this borderstyle?

    Simon

    0
  40. 65

    Thanks for this! Very much appreciated!

    CHALLENGE: How would you tweak this for a horizontal parallax effect? Simply change the ‘offsetY’ to ‘offsetX’?

    A nice example is HBOGO product tour: http://www.hbogo.com/product-tour/

    Any thoughts?
    ~D

    0
  41. 66

    Hey
    I just tried to use the Parallax scrolling effect as online portfolio.
    http://geoffrey-menissier.fr/
    Tell me what do you think. (I still have lot of problem with screens size, mobile version, IE.. but i’m trying my best to fix it)
    Thanks for this tutorial, and inspiration.

    Geoffrey

    0
  42. 67

    Yo !

    Un commentaire en français avec 2 autres exemples :

    http://www.bowling-powerball.fr/
    http://www.artisanat.info/jeunes#virus

    Merci pour ce super article !!

    0
  43. 68

    Just as we started developing a parallax website, thing article was published, perfect timing!

    We found some major improvements to make everything a much smoother experience (like only applying the paralax effect in the viewport) and we even got it working in IE7!

    See it here: fashion-instinct.com/

    0
    • 69

      alonzo-

      WOW! So incredibly impressed! This is seriously the first parallax I’ve seen that the images still appear on an iPhone, i realize the parallax doesn’t function, but at least the visitor isn’t missing any information! How did you do it? I can’t wait to get a min to check out your code. Please send me some advice or any tutorials you found if you have a minute. I’m working on my website now with a parallax function and it doesn’t show up on a mobile :( Thank you so much and awesome work! Looks terrific!

      Amanda

      0
  44. 70

    This is the easiest and simplest tutorial I got for my project developing a parallax website. I just have a question, how can I show two sprites on a single scene. The second sprite always doesn’t show. Thanks!

    0
  45. 71

    Check out Budons.com for another example for cute kids brand.

    0
  46. 72

    Fantastically in-depth article on Parallax & the team behind Better World. I wanted to contribute to the Parallax trend too so I built a WordPress theme for it, which I released a few weeks ago.

    There are already a few sites using it like Conka 3D.

    I hope it helps make it easy for non-developers to create a site with the same impact as Better World, Campaign Monitor and the other parallax sites you mentioned.

    0
  47. 73

    Excellent analysis! Thanks! :D

    One thing I noticed was that we didn’t see anything about the fancy dot navigation that Nike Better World used on theirs to the side of the page… :(

    Ah well, still great article!

    THANKS!

    0
  48. 74

    Richard, you are a super hero. Your article is really helpful and it’s an inspiration A-bomb, esp. the demo site your contributed, thank a million!!!

    0
  49. 75

    The animation in Firefox is not really smooth. The reason is mozilla bug #429997.

    Also it would be better to use background-attachment: scroll, but then it is not possible to use a percent-value for scrolling in Firefox and Opera, so using fixed was the only reasonable way to implement it.

    I have changed one line, as the old one was clearly incorrect:
    var yPos = ((topOffset-$window.scrollTop()) / $self.data(‘speed’));

    (This change requires that all offsetY in the HTML must be adapted)

    And one more thing: THANK YOU!!!

    0
  50. 76

    Hi, i’m trying to apply this tutorial to a webpage of mine, but I encounter some issues when I try to put more than one sprite in one section, only one sprite shows up, I tried to play with the offsetY and speed attributes but no luck.

    EDIT: Seems like the data-speed attribute is messing things up somehow…

    Anyone had the same problem? Any help?

    Thanks.

    0
  51. 77

    Hi Folks,

    Wondering if anyone knows of a work around for Safari… I see much of the conversation has been regarding IE. With the various posts you can just about get a site fine across all of them. However Safari doesnt scroll properly, it sticks and is not smooth when scrolling with the mouse… Wondering if anyone knows of any fixes?

    Thanks – and for anyone having issues in IE7 + IE8, as per @Justin’s post on 21st November 2011 if you include the following statement in the head tag you should address most of the issues you are having.

    0
  52. 78

    Thanks for the nice tutorial!!

    What does the script.js file do? I took out the js folder, everything look exactly the same…

    hmm..

    0
    • 79

      Same here….took out -

      Parrallax still on….so what is script.js?

      I put scrollTo and localScroll js for the navs, but nothing working…

      strange..

      0
  53. 80

    Hey all,

    Great article, very inspiring stuff. I came across this site today – which uses parallax scrolling but combines it with a video effect of driving down a street. Looking at it in Firebug it looks like they’re moving through a series of images each time the user scrolls which creates the video effect but how do they make it so smooth?

    It’s an amazing effect anyway.

    0
  54. 81

    Thx for sharing, I find the awesome effect here(http://www.nikebetterworld.com/product) Can somebody teach me how to make the landing / placing effect?( the shoe put down and stop)

    0
  55. 82

    Hello,

    How is it possible to late objects from left to right and right to left.
    For example the Nizo App website.

    Thanks!

    0
  56. 83

    Cool effect here: http://giza3d.3ds.com/fr-index.html#explore

    i search how to do the same background change, pretty cool when you work 3d stuff.

    0
  57. 84

    How do you add a ? What are the calculations?

    0
  58. 85

    Great post! I tried to find the font used by Nike for the numbers or in the phrase “Wage sport on war” but i didn’t managed to find it! Can anyone tell me the name of that font?

    0
  59. 86

    The design is really good. However, I think responsive design is going to be the future of web. It’s really silly that people still try to get iphone apps for their small business. This is what my company focuses on. Please check out my blog post on the benefits of responsive design. http://www.polarmass.com/understanding-responsive-design-and-its-benefits-to-your-business.html

    0
  60. 87

    Gandalf Bartholomäus

    February 28, 2013 4:44 am

    Richard, thanks a bunch for this great tutorial, i learned a lot!
    1,5 years have passed and I’m wondering if it’s still a good idea to do a parallax website.
    I’d really love to, but I’m having troubles with more than 1 sprite.

    Is your setup able to handle more than 1 sprite?
    In my case the second sprite gets positioned below the first one. Even though they are png-images they are still cropping each other off, it looks really weird.

    If someone could hint me to a site / tutorial, that shows how to do multiple sprites, I’d be very grateful.

    All best!

    0
  61. 88

    hey I noticed the question of multiple sprites in one section has been asked a couple of times with no answer

    I’m looking to add multiple sprites but whenever I duplicate and give each sprite their individual styles, only one should show. What am I missing here?

    Any help is greatly appreciated

    Chris

    0
  62. 89

    NIKE did an amazing job when it comes to design but they did very poor SEO. This is understandable granted that they are NIKE but we notice that lots of parallax scrolling sites ignore SEO.

    We created a tutorial that talks about SEO and Parallax Scrolling. You can see it here. It is in Spanish but the images really help. http://www.posicionamientowebenbuscadores.com/blog/tutorial-seo-parallax-scrolling-espanol/

    Our site is 100% SEO and it has parallax scrolling and lots more

    Thought you might be interested

    0
  63. 90

    Thank-you!
    Bookmarking this now! And thanks also for always making the great ‘best of ‘ lists!

    0
  64. 91

    Great tutorial! The site looks really good. The only issue I ran into was the video sprite. When you scroll down to the video, using the browsers scroll bar, and move off the scroll bar while still holding the mouse down, the page snaps to the top (which is normal), but if you do it while on the section with the video, the video stays on top of the content on all of the site until you scroll back down to the video.

    0
  65. 92

    Excellent analysis! Thanks! :D

    One thing I noticed was that we didn’t see anything about the fancy dot navigation that Nike Better World used on theirs to the side of the page… :(

    Ah well, still great article!

    0

↑ Back to top