Parallax effect | html et css

Défilement Parallaxe

CSS est souvent plus puissant que ce que les gens lui attribuent. Un certain nombre de tâches courantes, qui reposent généralement sur des bibliothèques JavaScript, peuvent souvent être implémentées en CSS sans trop d'effort. Un bon exemple de cela est l’effet de parallaxe actuellement en vogue. (Où les images d'arrière-plan défilent plus lentement que le contenu de la page pour donner une illusion de distance.)

Le problème avec les implémentations JavaScript

Il existe de nombreuses bibliothèques JavaScript qui tentent d'obtenir un effet similaire. Malheureusement, pour les cas d'utilisation minimale sur le Web, elles peuvent être mal mises en œuvre et sans performances. Ces implémentations JavaScript écouteraient l'événement de défilement et modifieraient directement les éléments du DOM. Ceux-ci peuvent provoquer des repeints inutiles et peuvent introduire Jank s’ils ne sont pas mis en œuvre correctement.

L’avantage principal de l’utilisation de CSS pur non seulement décharge tous les dessins supplémentaires dans le DOM, mais permet également une accélération matérielle et un effet soyeux qui ne fera pas que votre processeur augmente.

Comment implémenter un effet de parallaxe minimal


Commençons par définir notre balise HTML.

<div class="MainContainer">

  <div class="ParallaxContainer">
    // Headlines for the page
  </div>

  <div class="ContentContainer">
    <div class="Content">
      // Put the rest of my page content here
    </div>
  </div>
</div>

Et voici quelques CSS de base pour le démarrer:

.MainContainer {
  perspective: 1px;
  transform-style: preserve-3d;
  height: 100vh;
  overflow-x: hidden;
  overflow-y: scroll;
}

.ParallaxContainer {
  display: flex;
  flex: 1 0 auto;
  position: relative;
  height: 100vh;
  transform: translateZ(-1px) scale(2);
  z-index: -1;
}

.ContentContainer {
  display: block;
  position: relative;
  background-color: white;
  z-index: 1;
}

La magie est dans la perspective et transforme les règles. Nous définissons notre MainContainer avec perspective. Cela ouvre la voie à nos règles de transformation. Dans notre ParalaxContainer, nous le transformons pour pousser fondamentalement cette division en arrière-plan à l'aide de translateZ (-1px). Les éléments et le texte de ce conteneur auront la moitié de leur taille, car nous les avons mis à l'arrière-plan. Pour compenser cela, nous ajoutons une échelle. Il redimensionnera le contenu de l'arrière-plan à sa taille d'origine, mais l'effet de défilement est comme s'il était toujours à l'arrière-plan.

Ce qui est cool avec ça, c’est que vous avez la possibilité de jouer avec la profondeur. Vous pouvez modifier la distance qui vous sépare de l'arrière-plan en modifiant les règles de translation et d'échelle. Cela vous permet de changer la vitesse de défilement de votre arrière-plan.

Par exemple, essayez ceci pour un effet plus subtil:
transform: translateZ(-5px) scale(6);

Les éditeurs de text

DOWNLOAD

Sublime Text 

  Atom

Webstorm

SHARE

Author

Hi, Its me Yassine. A webdesigner, blogspot developer and UI/UX Designer. I am a certified Themeforest top Author and Front-End Developer. I'am business speaker, marketer, Blogger and Javascript Programmer.

• 
• 
• 
• 
•