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.
For responsive web designers —
Chris Coyier lays out three currently experimental methods for serving specific images to a website user, depending on the user’s device: mobile, tablet, desktop.
The three he names include:
- CSS3 Image Replacement
- PHP Cookie
Chris provides helpful links to more extensive discussions of these methods. It seems that each offers benefits and drawbacks. It will be interesting to watch this develop.
These are some very inspiring examples — some of the best of which combine scrolling with parallax. Check them out:
The Parallax effect or parallax scrolling in web design is the technique that features layered images that move around the website in different speeds/perspectives creating a nice and interesting 3D illusion. We gathered some examples of websites using the parallax effect to inspire you. This effect certainly makes scrolling around websites an interesting experience.
collecting all the shims, fallbacks, and polyfills in order to implant html5 functionality in browsers that don’t natively support them
A small script loader to help use feature detection to load exactly the scripts that your user needs, not just all the scripts that you think they might need.
Modernizr is a script that will detect native CSS3 and HTML5 features available in the current UA and provide an object containing all features with a true/false value, depending on whether the UA has native support for it or not.
In addition to that, Modernizr will add classes to the <html> element of the page, one for each cutting-edge feature. If the UA supports it, a class like cssgradients will be added. If not, the class name will be no-cssgradients. This allows for simple if-conditionals in CSS styling, making it easily to have fine control over the look and feel of your website.