javascript - Renseignez-vous sur la mise en œuvre de l'effet de parallaxe des pages

Question

Effet de page :

Jingzhe

À propos de l'imitation de cet effet :

J'ai d'abord découvert une bibliothèque appelée skrollr.js sur Zhihu, puis je l'ai apprise et appliquée à ma propre page. Puisque ma page n'est pas un nœud statique comme celui ci-dessus, les articles et les images sont demandés et étape par étape. request s'appuie sur l'événement onload de img pour restituer un ensemble de modèles (article + image d'arrière-plan) et les ajouter à la page. L'implémentation initiale consiste à empiler toutes les images d'arrière-plan sur l'écran en utilisant un positionnement fixe et à utiliser skrollr pour apporter des modifications à l'état des attributs CSS en fonction des objets de référence afin d'obtenir l'effet. Mais en fait, même si aucun effet n'est écrit, tant qu'il y aura une fonction d'initialisation de skrollr.js, cela ne fonctionnera pas sur la machine Android. L'auteur de skrollr.js l'a également souligné, comme indiqué ci-dessous :

Plus tard, j'ai soigneusement observé l'effet de la page Jingzhe à l'étage et j'ai trouvé :

1. Chaque bloc parent à l'intérieur du conteneur est positionné de manière absolue et à gauche : 0 en haut : 0 à droite : 0 en bas : 0

2. Le conteneur utilise une bibliothèque cinétique similaire pour utiliser les événements tactiles et traduire pour simuler le défilement. . . Démo d'effet : démo

Question :

1. Comment obtient-il l'effet de parallaxe, même s'il voit l'attribut z-index

2. Sa traduction supprime essentiellement la hauteur d'un écran, puis les pages suivantes apparaissent. . . Comment faire cela, veuillez expliquer en détail

Answer 1

Le tout positionné de manière absolue, la barre de défilement à droite est simulée. À la même hauteur d'index z, les éléments suivants couvriront automatiquement les éléments précédents.

Il suffit donc de modifier la traduction suivante en fonction de l'état de défilement. Vous pouvez la comprendre comme une carte recouvrant une autre carte.

Pour faire simple, lorsque vous faites défiler pour la première fois, déplacez les éléments du deuxième écran vers le haut. Lorsqu'il atteint plusieurs écrans, démarrez le deuxième écran, et ainsi de suite.

Voici quelques effets tels que le zoom avant et arrière sur l'image d'arrière-plan.