One page website. Once in a while, something new shows up that has the power to shake the world and stimulate all people to keep moving instead of stay still, this quote applies for practically every instance in life and business. A while ago, Nike released an astonishing website named “Nike Better World” to support all the athletes around the world; the design itself was brilliant and it generated a lot of positive reviews, but the real breakthrough came thanks to the navigation system that these guys made, a fantastic vertical Parallax system.
On this tutorial we’re going to undress the structure of this website and then we’re going to create something inspired by Nike’s website using jQuery and CSS. View Demo Download Source This tutorial is a practical exercise, created with the only intention of explore the functionality behind the “Nike Better World” website, all the credits belong entirely to Nike. How does it work? Understanding the “Nike” effect Step 1: Insert the HTML Step 2: Working with jQuery. Zoom sur l'effet parallaxe. Après avoir abordé les arrière-plans extensibles (full background) nous allons continuer avec l'effet parallaxe.
Cet effet graphique étant facile à comprendre et à mettre en place, vous allez pouvoir créer rapidement un site original. Ce tutoriel va utiliser jQuery ainsi que le plug-in jQuery-Parallax. Qu'est-ce que l'effet parallaxe ? Il s'agit d'un terme générique correspondant au déplacement de plusieurs éléments sur des couches et à des vitesses différentes. Au scroll (défilement de la vue) ou en fonction des coordonnées de la souris, les positions des différents fonds (ou éléments à animer) vont changer, ce qui va générer un effet de profondeur. Des exemples Utilisant le positionnement de la souris digitalhands.net bikingboss.com Utilisant le niveau du scroll nikebetterworld.com ok-studios.de driver-club Principe et théorie Grâce à l'utilisation de JavaScript, il est possible de déplacer les éléments par rapport à la position de la souris ou du niveau de défilement (scroll).
En pratique. Parallax Scrolling and Its Usage in Web Design. The parallax effect, also called parallax scrolling, is a special technique used in computer graphics at first, where background images move by the camera slower than foreground images.
This is the actual concept where websites with parallax scrolling started. It was widely used in the gaming industry more than 10-15 years ago and it is still used today in different domains. In the past years the parallax effect started to be used widely in web design. Its popularity went through the clouds when Nike redesigned their website based on this concept. Their example can be seen in the showcase below the conclusion. The design concept started to be used because it is actually quite cool. Parallax Scrolling Examples Although this is usually the case, utilizing the parallax scrolling effect doesn’t have to limit you to a fake 3D effect. When they see it for the first time, people use to think that the effect is nice. Performance Issues New age technologies The idea behind it is simple. Exemples de site Internet avec défilement Parallax.
L’utilisation de l’effet de parallaxe ou effet de défilement parallaxe dans les sites Internet peuvent ajouter une belle illusion de profondeur trois dimensions pour la conception de site web et donc rendre la visite de l’internaute très intéressante.
Dans la conception web, l’effet de parallaxe est une tendance relativement nouvelle. L’effet de la parallaxe est la technique qui comporte des images en couches, qui se déplacent autour du site par différentes vitesses et perspectives afin de créer une illusion agréable et intéressant 3D. Voici donc une sélection de site Internet utilisant l’effet parallaxe : cultural solutions uk Campaign Monitor is Hiring International Watch Co Nike Better World Old Pulteney Row to the Pole Webdesign Karlsruhe YEBO Creative Head2Heart Len M. Building a parallax scrolling storytelling framework.