javascript – Fragen Sie nach der Implementierung des Seitenparallaxeneffekts

Question

Seiteneffekt:

Jingzhe

Über die Nachahmung dieses Effekts:

Ich habe zum ersten Mal auf Zhihu von einer Bibliothek namens skrollr.js erfahren und sie auf meine eigene Seite angewendet. Da es sich bei meiner Seite nicht um einen statischen Knoten wie den oben genannten handelt, werden Artikel und Bilder angefordert und Schritt für Schritt erstellt request basiert auf dem onload-Ereignis von img, um eine Reihe von Vorlagen (Artikel + Hintergrundbild) zu rendern und an die Seite anzuhängen. Die anfängliche Implementierung besteht darin, alle Hintergrundbilder auf dem Bildschirm mit fester Positionierung zu stapeln und mithilfe von skrollr CSS-Attributstatusänderungen basierend auf Referenzobjekten vorzunehmen, um den Effekt zu erzielen. Aber selbst wenn keine Effekte geschrieben werden, funktioniert es auf dem Android-Computer nicht, solange es eine Initialisierungsfunktion von skrollr.js gibt. Der Autor von skrollr.js wies auch darauf hin, wie unten gezeigt:

Später beobachtete ich sorgfältig die Wirkung der Jingzhe-Seite oben und fand:

1. Jeder übergeordnete Block innerhalb des Containers ist absolut positioniert und links: 0 oben: 0 rechts: 0 unten: 0

2. Der Container verwendet eine ähnliche kinetische Bibliothek, um Berührungsereignisse zu verwenden und zu übersetzen, um das Scrollen zu simulieren. . . Effektdemo: Demo

Frage:

1. Wie er den Parallaxeneffekt erreicht, obwohl wir das Z-Index-Attribut sehen

2. Seine Übersetzung entfernt im Grunde die Höhe eines Bildschirms, und dann werden die folgenden Seiten angezeigt. . . Wie das geht, erklären Sie bitte im Detail

Answer 1

全部绝对定位，右边的滚动条是模拟的。在同样的z-index高度下，后面的元素会自动的覆盖前面的元素。

所以只要把根据滚动状态来把后面的translate改变就行了，你可以理解成一个卡片覆盖另一个卡片。

简单来说，最开始滚动时把第二屏的元素往上移动，知道超过一屏则开始第二屏，以此类推。

后面就是一些背景图放大缩小之类的效果了。