Parallax Overview - Google Web Designer

Hallo, mein Name ist Nivesh und ich bin
Entwickler für Google Web Designer.

In diesem Video möchte ich

die Komponente "Parallaxe"

für Animationen vorstellen.

Wenn ich auf der Seite
hoch- oder runterscrolle,

werden die Bilder
im Vorder- und Hintergrund

unterschiedlich schnell bewegt
und erzeugen eine Tiefenwirkung.

Dazu werden von der Website
des Anzeigen-Publishers

Scroll-Ereignisse weitergeleitet.

Als Reaktion darauf

animiert die Komponente die Bilder.

Weitere Beispiele für Parallax-Animationen

gibt es unter "Datei"
> "Neu aus Vorlage..."

in der Kategorie
"Parallax für Display & Video 360".

So sehen die Parallax-Beispiele
dann im Browser aus.

Das Bild wird vertikal

und horizontal verschoben,
wenn ich auf der Seite scrolle.

Jetzt erstellen wir
eine eigene Parallax-Animation.

Dazu klicke ich auf "Datei" und "Neu".

Als Umgebung muss
"Display & Video 360" ausgewählt sein.

Um die Komponente hinzuzufügen,

klicke ich auf den Bereich "Komponenten"

und ziehe die Komponente

vom Ordner "Interaktion"
auf den Anzeigebereich.

Ich kann sie auch konfigurieren.

Dazu klicke ich auf "Eigenschaften"

und dann auf "Bilder".

Oder ich doppelklicke auf die Komponente.

Zuerst füge ich Bilder
für die Animation hinzu.

Dazu ziehe ich Dateien

aus dem Dateisystem auf den Anzeigebereich

oder in den Bereich "Ebenen".

Alternativ kann ich auch
auf das Plussymbol unter "Ebenen" klicken

und Bilder aus dem Dateisystem einfügen.

Die Reihenfolge der Ebenen lässt sich

im Bereich "Ebenen"
per Drag-and-Drop ändern.

Die Anordnung der Ebenen
bestimmt die Reihenfolge:

Die höheren Ebenen werden
vor den anderen eingeblendet.

Wenn ich Bilder ein-
oder ausblenden möchte,

klicke ich neben die Miniaturansichten.

Mit dem Augensymbol

kann ich alle Bilder ein- oder ausblenden.

Manchmal hilft es,
eine Ebene vorerst auszublenden.

Ich blende jetzt alle Ebenen aus,

außer dem Produkt,
dem Text und dem großen Blatt.

Oben gibt es drei Tabs:

"Start", "Ende" und "Vorschau".

Für die Parallax-Animation

verschiebe ich jede Ebene
an die gewünschte Stelle

am Anfang oder Ende der Animation.

An der Startposition
erscheint die Komponente auf der Webseite.

Hier ist sie zum ersten Mal zu sehen.

Die Endposition ist der Punkt,

an dem sie den Anzeigebereich
soeben verlassen hat.

Wir konfigurieren zuerst die Startposition.

Ich blende das große Blatt aus
und verschiebe dieses Bild

mit dem Mauszeiger in die Mitte.

Ich kann auch die Pfeiltasten verwenden

oder die Umschalttaste gedrückt halten,

um es um je 10 Pixel zu verschieben.

Ich kann die Zahlen auch
direkt im Bereich "Ebenen" eingeben.

Um die Werte von der Startposition
schnell für die Endposition zu kopieren,

klicke ich auf die Schaltfläche
"An Startposition angleichen".

Jetzt positioniere ich das große Blatt
für die Start- und die Endposition.

Wenn ich die Umschalttaste gedrückt halte,
sind die Möglichkeiten beschränkt,

wenn ich das Bild mit dem Mauszeiger ziehe.

Ich ziehe das Blatt bis an die Endposition.

Unter "Erweiterte Eigenschaften" aktiviere
ich "Inaktive Elemente anzeigen".

um ein durchsichtiges Bild
für den anderen Tab einzublenden,

auf dem ich gerade nicht arbeite.

Inaktive Elemente dienen nur als Referenz

und erscheinen weder in der Vorschau
noch in der veröffentlichten Datei.

Sehen wir uns jetzt die Vorschau an.

Wenn ich nach oben und unten scrolle,

sehe ich, wie die sichtbaren Ebenen
auf Mobilgeräten eingeblendet werden.

Wenn ich die Animation ändern möchte,
klicke ich oben auf "Start" oder "Ende".

Ich möchte das Easing
zu "Ease-In-Out" ändern.

Die Deckkraft des Textes
soll langsam von 0,3 auf 1 steigen.

Sehen wir uns das Ergebnis an.

Ich kann auch Höhe
und Breite der Ebene festlegen.

Für die Breite des Blattes
wähle ich 250 Pixel aus.

Da das Seitenverhältnis gesperrt ist,

wird die Höhe automatisch angepasst.

Die Angaben für die Ebene

werden für Start-
und Endposition übernommen.

Die Größe wird also nicht geändert.

Ich bin mit der Animation zufrieden,

klicke auf "Speichern" und

kehre zu Google Web Designer zurück.

Damit wir etwas Zeit sparen,
wähle ich jetzt die Vorlage aus,

in der die Animation schon konfiguriert ist.

Im Bereich "Eigenschaften"

gehe ich zur Option "Scroll-Faktor".

Er gilt nur für den Anzeigebereich
in Google Web Designer.

Um zu sehen, wie die Anzeige
mit unterschiedlichen Faktoren aussieht,

aktualisiere ich diesen Wert.

Ich kann mir auch eine Vorschau
für den Browser ansehen.

In der Browser-Vorschau

wird die Anzeige
wie auf einer Webseite dargestellt

und ich kann weit nach oben
oder unten scrollen.

Hier sehe ich die Parallax-Animation

für die gesamte Anzeige,

mit CTA-Schaltfläche und Exit-Aktionen.

Vielen Dank fürs Zusehen.