L’effet de défilement Parallax prend d’assaut le monde du Web en tant que l’une des principales tendances de conception Web de 2014. Sur le Web, nous le voyons apparaître sur à peu près tous les types de sites Web. Qu’il s’agisse de B2B ou de B2C, cet effet de conception offre une excellente plate-forme aux marques pour raconter leurs histoires et maintenir l’engagement des utilisateurs.
Avant de creuser, il convient de noter que le défilement de parallaxe a une définition différente selon la personne à qui vous demandez. Rob Palmer a écrit un excellent article disséquant la tendance et définissant le « vrai » design de parallaxe. Les exemples ci-dessous sont basés sur sa notion de « vraie » parallaxe contenant trois niveaux : vous le spectateur, un objet et l’arrière-plan pour créer la notion de profondeur et de mouvement sur une page Web. Sans plus tarder, voici 7 exemples de sites Web à défilement parallaxe pour vous aider à inspirer votre prochain projet.
1. Sony : laissez-vous émouvoir
Ce microsite de Sony est un excellent exemple de la façon dont la parallaxe peut être utilisée pour l’art de la narration. Des effets de parallaxe absolument incroyables sont utilisés pour assembler les produits sous vos yeux lorsque vous faites défiler la page. C’est artistique, beau et l’un de mes favoris sur cette liste!
2. Aiguille spatiale de Seattle
Ce site touristique présente aux visiteurs la Space Needle de Seattle. Il diffère de nombreux sites de parallaxe en ce que vous faites défiler vers le haut plutôt que vers le bas lorsque vous vivez numériquement un voyage au sommet de la Space Needle. Ce site est à la fois fantaisiste et informatif et c’est un excellent exemple de la façon dont l’effet peut être utilisé pour juxtaposer la photographie et les éléments illustrés pour donner l’illusion de profondeur.
3. Rimmel Londres
Le site de Rimmel illustre comment la parallaxe peut être utilisée dans un contexte de commerce électronique. Au fur et à mesure que vous faites défiler, chaque section se concentre sur un ensemble de produits particulier. Avant la parallaxe, il est fort probable que cette grande section d’image supérieure ait pu être un curseur d’image. Mais je pense que l’effet de défilement est beaucoup plus efficace en termes d’engagement des utilisateurs. Dans cette conception, les utilisateurs contrôlent ce qu’ils voient et quand ils le voient au lieu d’avoir à attendre un temps d’animation pré-assigné pour déclencher le curseur.
4. Wipro : l’avenir de l’entreprise
Ce site de Wipro utilise la conception parallaxe pour présenter les données d’une manière esthétique et unique. C’est essentiellement une infographie géante qui bouge ! Ce site particulier montre comment l’effet de défilement de parallaxe peut être utilisé même pour le contenu le plus apparemment banal afin de le rendre plus utile et attrayant pour votre visiteur.
5. Université de Caroline du Sud
La page d’accueil de l’Université de Caroline du Sud met l’accent sur le programme d’engagement communautaire de l’université. Dans ce cas, le défilement de parallaxe est utilisé pour raconter visuellement l’histoire en combinant des données et des photos plutôt qu’une simple copie.
6. Von Dutch : Kenneth Howard
La marque Von Dutch utilise le défilement parallaxe pour raconter l’histoire de son fondateur Kenneth Howard. De nombreuses photographies et typographies sont incorporées dans ce site qui permet à la marque de présenter ses humbles débuts. La parallaxe en tant que technique de narration peut être un excellent outil marketing pour vendre votre image de marque plutôt que vos produits uniquement.
7 : NY Times : le blues des boîtes de tomates
Ce dernier est un ancien mais un goodie. Le New York Times a beaucoup expérimenté le défilement parallaxe en tant que technique de publication en ligne. Dans cet exemple, le site Web lui-même n’est pas entièrement parallaxe, mais au fur et à mesure que vous lisez l’histoire, les images de l’article sont d’excellents exemples d’une manière différente d’incorporer l’effet de défilement.
La conception Web Parallax est une nouvelle tendance en matière de conception Web qui peut être utilisée par votre marque de différentes manières. Si vous songez à mettre à jour votre site Web ou à effectuer une refonte complète de votre site Web, c’est une tendance à ne pas négliger!
