Inspiration : 40 exemples étonnants de Scrolling Parallaxe

Un concept relativement récent et populaire dans le web design est l’utilisation des défilements horizontaux et verticaux également appelés défilements « parallaxe« .

Le défilement Paralaxe est une technique qui rompt avec la navigation dite traditionnelle entre les pages Web à l’aide de menus et de liens statiques. Au lieu de cela, les utilisateurs peuvent révéler et d’accéder à de nouveaux contenus en utilisant simplement la molette de la souris ou en cliquant sur un lien pour aller directement vers certaines sections et créant une expérience utilisateur unique et agréable.

Surfer sur un site Web, qu’il soit horizontal ou vertical peut ne pas sembler particulièrement excitant à première vue, mais quand vous creusez et regarder comment certaines techniques ont été mis en oeuvre, vous vous rendrez compte à quel point le scrolling parallaxe peut être puissant. D’une certaine manière, il vous permet de soutenir les belles histoires que vous racontez sur votre marque, vos produits et services en ajoutant quelques effets subtils.

Dans les grandes lignes, le défilement parallaxe déplacent différente couches d’images en arrière-plan à une vitesse plus lents que les images en avant-plan créant ainsi un effet 3D. Souvent, ces sites occupent toute la zone du navigateur. Les éléments de conception tels que les couleurs, les formes et la typographie de taille différente peuvent aider à créer une mise en page qui peut, dans certains cas, vraiment couper le souffle.

Les exemples que nous allons voir ci dessous regroupent certaines des plus impressionnantes expériences utilisateurs que j’ai pu voir.

Tous les exemples utilisant le défilement parallaxe énumérés dans cet article utilisent la puissance de l’HTML5 pour créer ces effets étonnants.

 

Hexaedro

Hexaedro

Risarodil

Risarodil

Piccsy

Piccsy

Mba Multimedia

Mba-Multimedia

Design By Nuff

Design-By-Nuff

Fleksy

Fleksy

SuperBot Entertainment

Superbot-Entertainment

Nike

Nike

Jess Andruss

Jess-Andruss

Bake Agency

Bake-Agency

Splash

Splash

Nowaydaddio

No-Way-Daddio

Ray Canderson Foundation

Ray-Canderson-Foundation

Cloud 330 Experience

Cloud330experience

Resolutionim

Resolutionim

Anu

Anu

NH Hotels

NH-Hotels

Manufacturedessai

Manufacturedessai

Hotel Businessclass

Hotel-Businessclass

Vondutch

Vondutch

Dueminutiperemergency

Dueminutiperemergency

The Futurology

The-Futureology

Tokyu Agency Recruit

Tokyu-Agency-Recruit

Steelpark

Steelpark

Cantilever

Cantilever

Caava Design

Caava-Design

Contrast Rebellion

Contrast-Rebellion

Thismanslife

This-Mans-Life

Chamane energydrink

Chamane-Energydrink

This Is Now Exhibition

This-Is-Now-Exhibition

Whiteboard

Whiteboard

Samjay Heaton

Samjay-Heaton

Your Local Security

Your-Local-Security

Mobydigital

Moby-Digital

The Unique Horn

The-Unique-Horn

One Potato

One-Potato

Mdot App

Mdot-App

Verisigninc

Verisigninc

HSJ

HSJ

Goldenprophets

Goldenprophets

Drugtreatment

Drugtreatment

Jalxob

Jalxob

Silkaloe

Silkaloe