Catégories
Astuces et Design

Une collection d'effets de parallaxe intéressants

Les effets de parallaxe dans la conception de sites Web existent depuis un certain temps, et bien que certains puissent dire qu'ils ont dépassé leur apogée, nous les trouvons toujours utilisés partout sur Internet. Dans le post d’aujourd’hui, nous avons compilé des exemples assez intéressants d’effets de parallaxe de CodePen pour que vous puissiez les consulter pour trouver de l’inspiration, des idées et tirer des leçons. Nous espérons que vous apprécierez ces exemples!

Votre boîte à outils Designer
Téléchargements illimités: plus de 500 000 modèles Web, jeux d'icônes, thèmes et éléments de conception


Firewatch Parallax dans CSS

Un effet cinématographique très fluide avec des images en couches qui se déplacent à différentes vitesses lors du défilement.

Voir la parallaxe Pen Firewatch en CSS par Sam Beckham (@samdbeckham) sur CodePen.dark

Parallaxe d'en-tête / pied de page

Un en-tête, un contenu, une disposition de pied de page quelque peu basiques, mais l'en-tête a un effet d'arrière-plan subtil qui coïncide avec l'effet de parallaxe standard.

Voir l'effet de parallaxe d'en-tête / pied de page du stylo par Hudson Marinho (@hudsonmarinho) sur CodePen.dark

Transitions de curseur

Un curseur très impressionnant avec des transitions de parallaxe.

Voir les transitions Pen Slider de Mirko Zorić (@fluxus) sur CodePen.dark

Fond d'étoile de parallaxe dans CSS

Pure CSS timide plein d'étoiles qui s'animent de manière réaliste.

Voir l'arrière-plan de Pen Parallax Star dans CSS par Saransh Sinha (@saransh) sur CodePen.dark

Exemple de parallaxe Sass

Un autre exemple qui n'a pas besoin de JavaScript pour y arriver.

Voir l'exemple de parallaxe Pen Sass par Scott Kellum (@scottkellum) sur CodePen.dark

La technique de parallaxe «élément racine»

Définissant toutes les positions et les mouvements de parallaxe dans CSS, cette technique minimise les manipulations DOM à une seule – sur l'élément `html` – augmentant les performances globales, bien que certainement pas mieux que l'utilisation de transformations 3D.

Voir la technique de parallaxe «élément racine» Pen par Adam Mustill (@amustill) sur CodePen.dark

Cartes de profondeur de parallaxe

Contrairement à la plupart des autres exemples de parallaxe, ces effets se produisent en survol.

Voir les cartes Pen Parallax Depth par Andy Merskin (@andymerskin) sur CodePen.dark

Horizon de parallaxe de toile

Animation horizontale déclenchée par les mouvements de la souris – intéressante!

Voir le Pen Canvas Parallax Skyline de Jack Rugile (@jackrugile) sur CodePen.dark

Effet de défilement de parallaxe jQuery simple

Un effet de parallaxe de défilement plus traditionnel avec SCSS et jQuery.

Voir l'effet de défilement de parallaxe Pen Simple jquery (mis à jour le 12 avril 2017) par Hendry Sadrak (@hendrysadrak) sur CodePen.dark

Curseur de glissement plein écran avec parallaxe

Un curseur horizontal propre qui incorpore un effet de transition de parallaxe.

Voir le curseur de glissement Pen Plein écran avec parallaxe de Nikolay Talanov (@suez) sur CodePen.dark

Ciel défilant

J'adore les graphismes à l'ancienne utilisés dans ce ciel défilant avec des nuages, des ballons et plus encore.

Voir le défilement de la parallaxe du stylo de Marcel Schulz (@MarcelSchulz) sur CodePen.dark

Avions

Voici une animation sympa avec des effets de parallaxe sur le défilement.

Voir les avions Pen. de Steve Gardner (@ ste-vg) sur CodePen.dark

Que pensez-vous des effets de parallaxe?

Que vous soyez fan ou non, les effets de parallaxe dans la conception Web ne semblent pas aller nulle part bientôt. Nous espérons que ces exemples vous ont donné des conseils et de l'inspiration pour vos propres projets. N'oubliez pas de consulter nos autres collections ici sur 1WD pour d'autres idées!

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *