⚡
✌️
Schaffung eines Fixierungseffekts
Unser Ziel ist es, zwei Objekte so zu fixieren, dass das erste sofort in der Mitte der Seite haften bleibt, während das zweite in dem Moment erstarrt, in dem es das erste berührt. Etwa so:
1
Überblick über die Einstellungen
FIXING
Hiermit wird der Fixierungsbereich des Objekts festgelegt. Dies bezieht sich auf den Bereich des Bildschirms (oben, in der Mitte oder unten), in dem der Fixierungseffekt beginnt. Beachten Sie, dass die Formen in diesem Beispiel in der Mitte des Bildschirms fixiert sind.
TRIGGER OFFSET
Dies ist der Ausgangspunkt für die Fixierung des Objekts in Bezug auf die gewählte Einstellung: Fenster oben / Fenster Mitte / Fenster unten.
DISTANZ
Dies bezieht sich auf die Entfernung in Pixeln, die das Objekt in einem festen Modus passieren muss.
Wie man den Effekt erzeugt
1
Einstellen der Elementparameter
1. Fügen Sie der Seite einen Zero Block aus der Blockbibliothek hinzu und gehen Sie zu den Blockeinstellungen. Platzieren Sie 2 Objekte im Arbeitsbereich, vertikal, nacheinander.
2. Stellen Sie die Objekte so ein, dass sie denselben Fixierungsbereich haben - in unserem Fall WINDOW CENTER. Beide Objekte werden in der Mitte des Bildschirms fixiert bleiben.
3. Es ist besser, die endgültige Größe aller Elemente und den Abstand zwischen ihnen in einem Schritt festzulegen. Die Größe der einzelnen Elemente wirkt sich auf die Parameter der Animation aus.
Die Größe der Formen ist 100x100 px. Der Abstand zwischen ihnen beträgt 300px. Abstand = Einzug des zweiten Objekts - Höhe des ersten
Tipp: Wenn Sie kein klares Größenziel haben, verwenden Sie ganze oder dezimale Werte, wenn Sie die Größe und den Abstand eines Elements eingeben, um Ihre Berechnungen zu vereinfachen.
2
Einrichten von Animationsparametern
1. Beginnen wir mit der Einstellung des Trigger-Offsets / Animationsstartpunkts.
Der Punkt wird relativ zum gewählten Bereich, Window Center, gezählt.
Beginnen Sie mit dem obersten Objekt, da dies die Berechnung der Startpunkte für die Animation der übrigen Formen erleichtert. Der Startpunkt ist 0px, was bedeutet, dass das erste Objekt genau in der Mitte des Bildschirms bleibt.
Das untere Objekt sollte einfrieren, wenn es das obere Objekt berührt. Das bedeutet, dass sein Animationsstartpunkt genau um die Höhe des ersten Objekts niedriger sein wird. Setzen wir den Einzug hier auf 100px.
Der Punkt wird relativ zum gewählten Bereich, Window Center, gezählt.
Beginnen Sie mit dem obersten Objekt, da dies die Berechnung der Startpunkte für die Animation der übrigen Formen erleichtert. Der Startpunkt ist 0px, was bedeutet, dass das erste Objekt genau in der Mitte des Bildschirms bleibt.
Das untere Objekt sollte einfrieren, wenn es das obere Objekt berührt. Das bedeutet, dass sein Animationsstartpunkt genau um die Höhe des ersten Objekts niedriger sein wird. Setzen wir den Einzug hier auf 100px.
2. Stellen Sie den Abstand ein.
Dies ist der Abstand, den das Objekt im festen Modus passieren soll. Passen Sie die Animationseinstellungen an, beginnend mit dem unteren Objekt. Das erleichtert die Berechnung des "klebenden" Abstands.
Dies ist der Abstand, den das Objekt im festen Modus passieren soll. Passen Sie die Animationseinstellungen an, beginnend mit dem unteren Objekt. Das erleichtert die Berechnung des "klebenden" Abstands.
Quadrat. Wenn Sie sich das Beispiel noch einmal ansehen, werden Sie feststellen, dass das Quadrat im fixierten Modus keine Distanz zurücklegt - es bleibt unter dem Kreis eingefroren. Das bedeutet, dass wir den Abstand auf 0 Pixel festlegen müssen.
Kreis. Der Kreis legt den Abstand zum Quadrat im fixierten Modus zurück. Danach verschwindet der Fixierungseffekt und beide Formen scrollen wie gewohnt weiter.
Im Wesentlichen muss der Kreis die Position des Quadrats erreichen und höher stehen bleiben, um neben ihm einzufrieren.
Das bedeutet 400px - 100px (Höhe des Quadrats) = 300px
Im Wesentlichen muss der Kreis die Position des Quadrats erreichen und höher stehen bleiben, um neben ihm einzufrieren.
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.
War dieser Leitfaden hilfreich, um zu verstehen, wie der Klebeeffekt funktioniert?
