Bubble Tutorial - Animationen bei Scrolling

In diesem Video geht es darum, wie man basierend auf der Scrolling Position der Maus oder des Touchscreens Elemente in Bubble animieren kann. Wir machen 3 Beispiele: - Navbar Farbe ändern - Einblendung von Bild und Text - Hintergrundfarbe der Webseite ändern.

Video-Transkript:
Hallo, mein Name ist Chris Strobl und ich zeige euch heute, wie wir Bubble dazu bringen, wenn wir eine Webseite scrollen, dass Animationen passieren, kennt das sicherlich von vielen Seiten.

Ich zeige euch heute, wie das auch im Bubble geht. Wenn bereits einige Elemente fertig ich zeige euch das mal im Element Street. Wir haben hier eine Floating Group. Dann haben wir das große Bild hier, ein Zeile mit Bild und Text und eine separate Linie. Wir liegen direkt mal los und nehmen jetzt die Floating hätte und wir legen hier ein Conditional fest, nämlich wenn. Current page Scrolling Position ist größer und ich habe das vorher schon ausprobiert, das probiert man am besten immer aus im Preview und kann das dann auch definieren, was die richtige Zahl ist. Aber wenn es größer 636 Pixel ist, dann ist der Background Style eine Flat Color und die Background Color ist weiß.

Anschließend nehmen wir nun hier diesen Kreis machen wiederum. Und. Machen die Background Color in dieses Blau das gleiche machen wir nur beim Text, hier können wir Copy Conditional formatieren. Und nehmen nun die von Kaller ebenfalls in diesem Blau. Und schließlich wir kopieren noch mal das conditional Format. Passen das und ändern hier auch die Icon Color im Blau, das heißt, den ersten Teil haben wir schon fertig. Wenn wir jetzt auf Preview gehen. Dann sehen wir Zunächst ist es transparent und wir scrollen. Und plötzlich ändert sich hier die Background kann auf weiß und die Farben auf blau. Und anschließend kümmern wir uns noch um diese Gruppe. Wir gehen einmal auf die Grube Image. Dieses Element ist visible Current page deaktivieren und wir gehen einmal in die Gruppe Text und machen ebenfalls das Element ist Homepage deaktiviert. Wir gehen jetzt in den Workflow tab sagen generell, wenn conditional true. Current page Scrolling Position ist größer. 300 dann. Element actions Animate.

Und wir nehmen die Grube im Netz. Und wir können nun hier in verschiedenen Animationen auswählen und wir wählen No bounce left in. Dass sie von links kommt. Wir kopieren einmal diesen Workflow tab und anstatt Group Image wählen wir Group Text. Und von der Transitions No bounce right in. Wir gehen jetzt einmal auf Preview, um uns das Ganze anzusehen. Wir scrollen und sehen nun, das einmal eingeblendet wird, nicht von links und von rechts. Und schließlich möchte ich noch die Hintergrundfarbe unserer ganzen Seite ändern, sobald wir hier bei diesem Separator ankommen. Unser Separator ist bei 1260 Pixel und abzüglich der Floating Group Header sind wir bei 1180 Pixel. Das heißt, ich gehe auf die Seite und mach Conditional, wenn. Current page Scrolling Position ist größer. 1180 dann bitte die Background Color. Auf 20 prozent von diesen Blau. Und wir gehen noch einmal ins Preview. Und nun, wenn wir scrollen, sehen wir, wie unsere Seite sich schrittweise ändert.

Wenn euch dieses Video gefallen hat, klickt gerne auf den Like-Button und script unseren Channel bei Fragen gerne in die Kommentare. Ich wünsche euch weiterhin viel Erfolg und auf bald.