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