20 exemples étonnants de Scrolling Parallaxe [Inspiration]

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 "parallaxes".

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.

CSS Piffle

Stop at Never

Kinvara

Mezcal Buen Viaje

Tokio Lab

Air Jordan 2012

We Believe

Unfold

Whiteboard

Discover Bagigia

Krystalrae

Lois Jeans

Anna Safroncik

Ap-O

Super Chemical

Ikayzo

Nel giardino segreto

Imp3RiuM

Fishy

n3rdb1rd

SuperBot

Angry Bird