FIXIERUNG DES TEXTES BEIM SCROLLEN

Experimentieren Sie mit großer Typografie und erstellen Sie interaktive Nachrichten

Schaffung eines Fixierungseffekts

Unser Ziel ist es, zwei Objekte so zu fixieren, dass das erste sofort in der Mitte der Seite "kleben" bleibt, während das zweite an dem Punkt stehen bleibt, an dem es auf das erste Objekt trifft. Etwa so:

Erforderliche Einstellungen

FIXING

Einstellung des Fixierungsbereichs des Objekts. Dies bezieht sich auf den Bereich des Bildschirms (oben, in der Mitte oder unten), in dem der Fixierungseffekt beginnt. Beachten Sie, dass die Formen im Beispiel in der Mitte des Bildschirms fixiert sind.

TRIGGER OFFSET

Dies ist der Startpunkt der Objektfixierung in Bezug auf die Auswahlmöglichkeit: Fenster oben / Fenster Mitte / Fenster unten.

DISTANZ

Dies ist der Abstand in Pixeln, den das Objekt im festen Modus passieren muss.

Wie man es einrichtet

Einrichten von Objektparametern

1. Fügen Sie der Seite ein Zero Block aus der Blockbibliothek hinzu und wechseln Sie zum Blockeditor. Platzieren Sie zwei Objekte im Arbeitsbereich, vertikal hintereinander.

2. Stellen Sie die Objekte so ein, dass sie denselben Fixierungsbereich haben. Wir stellen als Beispiel WINDOW CENTER ein - beide Objekte werden in der Mitte des Bildschirms fixiert.

3. Es ist besser, die endgültige Größe aller Elemente und den Abstand zwischen ihnen zu Beginn festzulegen. Die Größe der einzelnen Elemente hat Auswirkungen auf die Parameter der Animation.

Die Größe der Formen ist 100x100 px. Der Abstand zwischen den Figuren beträgt 300px. Abstand = Einzug des zweiten Objekts - Höhe des ersten

Tipp: Wenn Sie keine klare Zielgröße im Kopf haben, verwenden Sie ganze oder dezimale Werte bei der Einstellung der Elementgrößen und -abstände, um Ihre Berechnungen zu erleichtern.

Einstellen der Animationsparameter

1. Beginnen wir mit der Einstellung des Trigger-Offsets / Animationsstartpunkts.

Der Punkt wird relativ zu unserem gewählten Bereich - der Fenstermitte - gezählt.

Beginnen Sie mit dem Objekt, das sich oben befindet. Das macht es einfacher, die Startpunkte für die Animation der übrigen Objekte zu berechnen. Das oberste Objekt hat 0px als Startpunkt für die Animation festgelegt. Das bedeutet, dass es genau in der Mitte des Bildschirms stehen bleibt.

Das untere Objekt sollte stehen bleiben, wenn es das obere Objekt berührt. Das bedeutet, dass sein Animationsstartpunkt um die Höhe des ersten Objekts niedriger ist. Legen wir einen Einzug von 100px fest.

2. Legen Sie den Abstand fest.

Dies ist der Abstand, den das Objekt im fixierten Modus passieren soll. Beginnen Sie beim Einrichten der Animation mit dem unteren Objekt, so können Sie den "klebenden" Abstand besser berechnen.

Quadrat. Wenn Sie sich das Beispiel noch einmal ansehen, werden Sie feststellen, dass das Quadrat im fixierten Modus keinen Abstand zurücklegt - es bleibt einfach unter dem Kreis fixiert. Das bedeutet, dass wir den Abstand auf 0px setzen müssen.

Kreis. Der Kreis im fixierten Modus legt die Strecke zurück, um das Quadrat zu erreichen. Der Fixierungseffekt verschwindet danach, und beide Figuren können wie gewohnt gescrollt werden.

Im Wesentlichen muss der Kreis die Position des Quadrats erreichen, aber er hält etwas höher an, um daran zu haften.

Das bedeutet 400px - 100px (Höhe des Quadrats) = 300px

Speichern Sie die Einstellungen und veröffentlichen Sie die Seite. Die Änderungen werden im Vorschaumodus oder nach der Veröffentlichung der Seite sichtbar.