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; }
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 ); }
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!