Catégories
Astuces et Design

Créer un effet de défilement de parallaxe simple dans la section des héros à l'aide de CSS pur

Dans ce didacticiel, vous apprendrez à créer un simple effet de défilement de parallaxe CSS pur dans la section des héros de votre page de destination. Le défilement de parallaxe est un effet où différents éléments visuels sur la page se déplacent à différentes vitesses lorsque l'utilisateur fait défiler. Cela crée un effet 3D ajoutant un sentiment de profondeur et améliorant l'expérience du visiteur. Ce GIF montre ce que vous pourrez créer à la fin de ce tutoriel.

Pure CSS Parallax - Exemple

Vous devez avoir des connaissances de base en HTML et CSS pour commencer. Nous allons plonger dans quelques sujets CSS avancés tels que perspective et transform vers la fin. Commençons.

Nous allons diviser ce tutoriel en deux parties. Dans la première partie, nous obtiendrons à peu près le même aspect et la même sensation que la page, à l'exception de l'effet de parallaxe. Autrement dit, il n'y aura pas d'effet 3D. Défilement simple. Si vous savez déjà comment procéder, vous pouvez rapidement vous précipiter Partie 1. Dans la deuxième partie, nous apprendrons les concepts CSS avancés requis et créerons l'effet de défilement de parallaxe.

Des millions de polices, de thèmes et de graphiques: à partir de SEULEMENT 16,50 $ par mois

Polices Web
Thèmes WordPress

Thèmes WordPress

1 200+ thèmes

Éléments graphiques

Éléments graphiques

Plus de 32 000 graphiques

TÉLÉCHARGER MAINTENANT

Envato Elements

Partie 1: sans parallaxe

En regardant le GIF, vous pouvez voir que nous avons une section d'en-tête avec une image d'arrière-plan occupant la largeur et la hauteur de la fenêtre d'affichage, suivie d'une section de texte. Créons cette étape par étape.

Mise en place

Créez un document HTML vierge et nommez-le index.html. Ajoutez le squelette HTML de base. Si vous utilisez Visual Studio Code, il vous suffit de taper «!» et appuyez sur Entrée. Vous vous retrouverez avec ça.




   
   
   Document

 



J'ai utilisé la police «Roboto» pour le titre et «Lato» pour les paragraphes. Ajoutez donc la ligne suivante sous la balise de titre pour les intégrer à l'aide des polices Google.


Créez votre feuille de style et nommez-la style.css. Liez la feuille de style à votre document HTML sous le lien CDN Font Awesome à l'aide de


Vous pouvez télécharger l'image d'arrière-plan utilisée dans la démo depuis Pexels ou choisir d'inclure la vôtre. Mais n'oubliez pas de le nommer bg.jpg.

HTML

Ajoutez le code HTML suivant dans body pour l'en-tête:

Parallax Scrolling Effect

Create this simple parallax effect using pure CSS

Ajoutez la section de texte en dessous.

Some cool title here

Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores harum veritatis nemo magni odio reprehenderit atque, esse animi porro suscipit vero nobis modi quis. Exercitationem quasi beatae, assumenda officia illum sunt. Cum voluptas maiores vitae eius hic inventore deleniti placeat perferendis quam ut nostrum maxime optio voluptatibus ab laboriosam, quia consectetur atque minus?

Adipisci amet aut sint voluptates delectus aperiam? Veniam ab illum enim in libero nihil culpa explicabo perspiciatis veritatis non repellendus architecto excepturi nostrum porro voluptatem aperiam animi asperiores, a voluptatibus temporibus minima voluptas ipsa! Recusandae nostrum, aut, voluptates est error iusto, eaque excepturi soluta quas maiores amet.

Tout le reste est désormais pris en charge par CSS.

CSS

Dans style.css, commencez par quelques styles communs pour tous les éléments:

* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}

Ajoutez ces styles à html et body:

html {
   width: 100%;
   height: 100%;
}
body {
   width: 100%;
   height: 100%;
   /* Text styles */
   font-family: 'Lato',sans-serif;
   font-size: 18px;
   font-weight: 300;
   color: #212121;
}

Faire le header occupent la largeur et la hauteur de la fenêtre d'affichage.

header {
   width: 100%;
   min-height: 100vh;
   position: relative;
}

Créons le ::before pseudo-élément pour l'en-tête et ajouter l'image d'arrière-plan.

header::before {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   display: block;
   background: url('bg.jpg');
   background-size: cover;
   z-index: 0;
}

Vous pouvez maintenant voir votre image en plein écran. Maintenant, mettons le texte en avant et donnez-lui le style requis:

header div {
   position: absolute;
   z-index: 1;
   top: 50%;
   padding: 0 30px;
   font-family: 'Roboto Condensed', sans-serif;
}
header h1 {
   font-size: 4.5rem;
   font-weight: 700;
   color: #009688;
}
header h2 {
   font-size: 2.2rem;
   font-weight: 300;
}

Vous pouvez maintenant voir ceci:

Pure CSS Parallax - Jusqu'à présent

Ajoutez-les pour styliser la section de texte:

section{
   width: 100%;
   background: white;
}
.container {
   margin: auto; /* To center the text horizontally */
   max-width: 1000px; /* Limiting the width for extra large screens */
   padding: 80px 40px;
}
.container h3 {
   font-family: 'Roboto Condensed', sans-serif;
   font-weight: 700;
   font-size: 3rem;
}
.container p {
   padding-top: 30px;
   line-height: 1.8;
}

Jusqu'à présent, nous n'avons encore rien fait d'excitant. Voyons Partie 2 où nous créons la magie réelle (avec seulement 8 autres lignes de CSS).

Partie 2: Ajout d'un effet de parallaxe

Pour créer un effet de parallaxe, nous devons créer un sentiment de profondeur en introduisant une 3ème dimension. La propriété CSS perspective nous aide à faire exactement cela. Disons que nous ajoutons perspective:20px à un élément. Cela donne une profondeur de 20 pixels à cet élément. Cela signifie qu'un espace 3D est créé, de sorte que les éléments enfants peuvent être transformés pour les faire apparaître comme étant placés près ou loin du spectateur, créant un sentiment de profondeur.

Alors ajoutons perspective à notre body élément avec overflow Propriétés.

body {
   /* Existing styles here */
   perspective: 4px; /* The depth */
   overflow-x: hidden;
   overflow-y: scroll;
}

le overflow-x est masqué car nous ne voulons pas de barre de défilement horizontale résultant de l'espace 3D créé.

Nous devons également définir overflow: hidden à l'élément racine.

html {
   /* Existing styles here */
   overflow: hidden;
}

Si vous vérifiez votre navigateur maintenant, rien n'a encore changé. C'est parce que nous venons de créer l'espace 3D mais que nous n'avons transformé aucun objet à l'intérieur.

L'effet de parallaxe se produit lorsque deux éléments ou plus sont placés à des distances différentes du spectateur. Pour cela, nous utilisons le CSS transform et "traduire" les objets le long de l'axe z. Transformons donc l'image d'arrière-plan et div dans l'en-tête.

header::before {
   /* Existing styles here */
   transform: translateZ(-4px);
}
header div {
   /* Existing styles here */
   transform: translateZ(-2px);
}

Nous déplaçons l'image d'arrière-plan 4px loin du spectateur et des titres 2px une façon. Ainsi, lorsque vous faites défiler vers le bas, ils semblent se déplacer à des vitesses différentes. Vérifiez votre navigateur maintenant. Toujours rien?

Lorsque nous voulons que les objets soient transformés dans un espace 3D, nous avons besoin d'un transform-style propriété. Lorsqu'elle est appliquée à un élément, cette propriété détermine si les enfants de cet élément sont positionnés dans l'espace 3D ou aplatis.

Pour comprendre la perspective, les transformations et tout cela plus en profondeur, vous pouvez vous référer au guide détaillé des transformations 3D avec CSS.

Pour l'instant, ajoutez cette propriété à l'en-tête:

header {
   /* Existing styles here */
   transform-style: preserve-3d;
}

Regardez maintenant le résultat dans votre navigateur. Vous êtes surpris de voir que votre image de fond et vos titres ont rétréci? Gardez cela de côté pendant un moment, faites défiler vers le bas et vous verrez que l'effet de parallaxe est réellement créé! Pourquoi ces deux éléments se sont-ils rétrécis? C'est parce qu'ils se sont éloignés de toi, tu te souviens? Les objets qui se déplacent plus loin semblent plus petits. Facile. Mais comment y remédier? Il y a un scale facteur à ajouter avec translateZ pour corriger la taille. Cet article Google nous donne une formule pour calculer la scale postuler.

scale = (perspective - distance) / perspective

Pour notre image de fond, perspective est 4px et la distance (translateZ) est -4px. Calculer:

scale = (4 - (-4))/4 = 8/4 = 2

De même, pour header div, l'échelle est de 1,5. Incluons-les. Changer la transform propriétés des deux éléments à inclure scale.

header::before {
   transform: translateZ(-4px) scale(2);
}
header div {
   transform: translateZ(-2px) scale(1.5);
}

Cela le corrige. Maintenant, faites défiler vers le bas. Voyez-vous l'effet? Le seul problème est que notre section de texte est chevauchée par l'en-tête. La solution à cela est de fixer un z-index à la section (avec un position propriété, sinon z-index ne fonctionnera pas).

section{
   /* Existing styles here */
   position: relative;
   z-index: 2;
}

Et voilà! Un simple effet de défilement de parallaxe soigné pour notre section de héros est obtenu.

Développez cette compétence nouvellement acquise et créez de magnifiques sites Web de défilement de parallaxe CSS. Mais attention à ne pas en faire trop. Si vous êtes coincé quelque part entre les deux et que vous n’avez pas pu obtenir la sortie souhaitée, voici le code source complet.

TÉLÉCHARGER LE CODE SOURCE

Cet article peut contenir des liens affiliés. Voir notre divulgation sur les liens d'affiliation ici.

Laisser un commentaire

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