Utilisez CSS3 pour obtenir un effet de parallaxe de défilement

Cet article présente principalement le tutoriel d'utilisation de CSS3 pour obtenir l'effet de parallaxe de défilement. Il utilise principalement l'attribut background-attachment. Les amis dans le besoin peuvent s'y référer

L'effet "parallax (parallax)" est. maintenant de plus en plus populaire sur Internet. Si vous n’avez pas entendu parler de l’effet de parallaxe, il s’agit en fait d’un effet produit en utilisant des images pour former différents calques et en les déplaçant à différentes vitesses et directions. Cela produira un merveilleux effet visuel qui pourra efficacement attirer l’attention du spectateur.

Dans la conception Web, le moyen le plus courant d'obtenir un effet de parallaxe est d'utiliser le plug-in jQuery. Mais cette approche présente certains inconvénients. La plupart de ces plug-ins placent les écouteurs sur l'événement scroll de l'objet window. Cela obligera JavaScript à gérer un grand nombre de déclencheurs d'événements (la gestion des événements de défilement peut facilement entraîner des problèmes de performances du navigateur, vous devez donc être très prudent lorsque vous l'utilisez.) Déplacer différents calques, calculer la position de l'arrière-plan et définir les propriétés. de l'image causent tous beaucoup de problèmes de manipulation du DOM.

En bref, utiliser JavaScript pour obtenir des effets de parallaxe entraînera des problèmes de performances et des retards dans le défilement de la page.

Révision des attributs de fixation d'arrière-plan
background-attachment -- Définit la façon dont l'image d'arrière-plan se déplace avec l'axe de défilement
Valeurs : scroll | L'image d'arrière-plan se déplacera à mesure que la page défile
corrigé : L'image d'arrière-plan ne bougera pas à mesure que la page défile
hérite : hérite
valeur initiale : défilement
héritage : non
applicable Dans : Tous elements
background: background.attachment: attachment.
Exemple

body    
{   
 background-image:url('list-orange.png');   
 background-attachment:fixed;   
 background-repeat:repeat-x;   
 background-position:center center;   
}

L'image d'arrière-plan de l'écran est une ligne orange Lorsque l'axe de défilement se déplace, l'orange. color La position visuelle de la ligne reste inchangée.

Exemple de propriété CSS background-attachment

Utiliser background-attachment:fixed pour obtenir un effet de parallaxe

Pourquoi seulement un Un petit nombre de personnes le savent, cet effet peut en fait être obtenu avec CSS.

Afin d'obtenir l'effet de parallaxe, plusieurs images d'arrière-plan doivent être placées sur différents éléments. Ces images d’arrière-plan doivent être définies comme background-attachment:fixed. En définissant background-attachment, nous pouvons modifier l'effet et la position de l'image d'arrière-plan.

La valeur par défaut de background-attachment est scroll, ce qui signifie que la position de l'image d'arrière-plan et du contenu est relativement statique. Nous l'avons tous vu : lorsque nous faisons défiler une page Web de haut en bas, l'arrière-plan et le contenu défilent ensemble.

Les choses deviennent intéressantes lorsque la pièce jointe en arrière-plan est définie sur fixe. Fixe signifie que l'image d'arrière-plan ne défile pas avec le contenu, mais reste immobile avec la fenêtre. Autrement dit, lorsque vous faites glisser la barre de défilement, l'image d'arrière-plan ne change pas. Cela crée un bel effet de parallaxe.

Laissez-moi voir une implémentation pratique :

<!-- Four containers for setting the background images -->   
<p class="parallax">   
  <p class="bg__foo">foo</p>   
  <p class="bg__bar">bar</p>   
  <p class="bg__baz">baz</p>   
  <p class="bg__bazz">bazz</p>   
</p>   
// setting base styles to image containers   
[class*="bg__"] {   
  height: 50vh;   
  text-indent: -9999px;   
  /* fix background */
  background-attachment: fixed;   
  /* center it */
  background-position: center center;   
  /* Scale it nicely to the element */
  background-size: cover;   
  /* just make it look a bit better  */
  &:nth-child(2n) {   
    box-shadow: inset 0 0 1em #111;   
  }   
}   
.bg__foo {   
  background-image: url(   
    http://www.webhek.com/wordpress/wp-content/uploads/2014/07/parallax1.jpg   
  );   
}   
.bg__bar {   
  background-image: url(   
    http://www.webhek.com/wordpress/wp-content/uploads/2014/07/parallax2.jpg   
  );   
}   
.bg__baz {   
  background-image: url(   
    http://www.webhek.com/wordpress/wp-content/uploads/2014/07/parallax3.jpg   
  );   
}   
.bg__bazz {   
  height: 100vh;   
  background-image: url(   
    http://www.webhek.com/wordpress/wp-content/uploads/2014/07/parallax1.jpg   
  );   
}

Concernant la compatibilité des navigateurs de cette technologie, vous pouvez vous référer ici, en gros, aux navigateurs modernes et à la prise en charge de tous les navigateurs IE9+ il.

Personnellement, je préfère l'effet de parallaxe obtenu avec la technologie CSS plutôt que l'utilisation de JavaScript. Il est implémenté en CSS et est pris en charge nativement par le navigateur. Il n'y a aucune logique de programmation ni aucune opération supplémentaire sur le DOM, ce qui rend l'ensemble de la solution très simple et esthétique.

Même l'effet de parallaxe implémenté par CSS mettra un fardeau sur le navigateur.

background-attachment:fixed entraînera un rendu plus important du navigateur et affectera également l'efficacité du défilement du navigateur. Par conséquent, vous devez effectuer davantage de tests pendant le développement pour déterminer l’effet en fonction des performances.

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

Introduction à l'utilisation de l'effet de rotation CSS3 3D

Analyse du flottement CSS et du positionnement

Comment utiliser CSS3 pour définir une ligne de séparation de liste sans bords supérieur et inférieur

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!