Die Parallax-Komponente – Google Web Designer-Hilfe [gg-webdesigner-en]

Die Parallax-Komponente

Verwenden Sie die Parallaxenkomponente, um mit Bildebenen die Illusion von Tiefe zu erzeugen. Wenn der Betrachter auf einem Mobilgerät auf der Seite nach oben oder unten scrollt, bewegen sich die Vorder- und Hintergrundbilder mit unterschiedlicher Geschwindigkeit.

Diese Komponente ist nur für die Verwendung in Display & Video 360 Parallax-Creatives vorgesehen.

So fügen Sie Ihrem Projekt die Parallax-Komponente hinzu:

1. Öffnen Sie das Bedienfeld „Komponenten" und dann den Ordner „Interaktion" .
2. Ziehen Sie die Parallaxe Komponente auf die Bühne.
3. Doppelklicken Sie auf die Komponente, um in den Komponentenbearbeitungsmodus zu gelangen.
4. Fügen Sie Ebenen hinzu, indem Sie Bilddateien aus Ihrem Dateisystem auf die Bühne oder das Ebenenbedienfeld ziehen (nur Windows oder Mac) oder indem Sie auf Bilder hinzufügen klicken Schaltfläche unten im Ebenenbedienfeld . Als Ebenen können nur Bilder hinzugefügt werden.
5. Positionieren Sie jede Ebene mithilfe der Registerkarten „Start " und „Ende " dort, wo sie am Anfang und am Ende der Animation erscheinen soll. Sie können die Ebene an die gewünschte Stelle ziehen oder die Felder Start- und Endposition im Eigenschaftenfenster verwenden. Sie können auch einen mittleren Status hinzufügen, indem Sie den Mauszeiger rechts neben der Registerkarte „Start" bewegen und auf klicken Taste.
6. Legen Sie nach Bedarf zusätzliche Konfigurationsoptionen fest.
7. Wenn Sie mit der Komponente zufrieden sind (Sie können eine Vorschau anzeigen, während Sie daran arbeiten), klicken Sie auf Speichern . Sie kehren zur normalen Benutzeroberfläche von Google Web Designer zurück.

Parallaxenübersicht

Einstellmöglichkeiten

Um die Komponente zu konfigurieren, doppelklicken Sie auf der Bühne darauf oder wählen Sie sie aus und klicken Sie auf „Einstellungen…". im Eigenschaftenfenster .

Fügen Sie Ebenen hinzu

Es gibt zwei Möglichkeiten, eine Ebene hinzuzufügen:

• Ziehen Sie eine Datei aus Ihrem Dateisystem (nur Mac oder Windows) oder aus der Bibliothek auf die Bühne oder das Ebenenbedienfeld .
• Klicken Sie auf Bilder hinzufügen Schaltfläche unten im Ebenenbedienfeld .

Ebenen in der Parallax-Komponente müssen Bilder sein.

Ebenen verschieben

1. Wählen Sie die Ebene aus, die Sie verschieben möchten.
2. Wählen Sie die Registerkarte „Start" , „Mitte " oder „Ende" . (Sie können einen mittleren Status hinzufügen, falls Sie dies noch nicht getan haben.)
3. Positionieren Sie die Ebene mit einer der folgenden Methoden:
   • Ziehen Sie die Ebene an ihre neue Position.
   • Verwenden Sie die Pfeiltasten, um die Ebene um jeweils ein Pixel zu verschieben. Halten Sie die Umschalttaste gedrückt und drücken Sie gleichzeitig eine Pfeiltaste, um die Ebene um 10 Pixel in diese Richtung zu verschieben.
   • Legen Sie die Eigenschaften „Start" , „Mitte " oder „Ende" auf der Registerkarte „Ebeneneigenschaften" fest. Sie können nur die Eigenschaften bearbeiten, die mit der aktuellen Registerkarte übereinstimmen. Verwenden Sie „Anfangsposition abgleichen" , „Mittelposition abgleichen " oder „Endposition abgleichen". Tasten, um die andere Position zu kopieren.

Wechseln Sie zu einer anderen Registerkarte, um die Position der Ebene an einer anderen Stelle in der Animation anzupassen.

Bilder austauschen

1. Klicken Sie mit der rechten Maustaste auf das Bild auf der Bühne, das Sie austauschen möchten, und wählen Sie im Popup-Menü die Option Bild austauschen... aus.
2. Wählen Sie ein Bild aus der Bibliothek aus oder klicken Sie auf Dateien importieren Klicken Sie auf die Schaltfläche, um eine Bilddatei von Ihrem Computer auszuwählen.

Das neue Bild ersetzt das Originalbild. Wenn Sie zuvor die Größe des ausgetauschten Bilds geändert haben, verwendet das neue Bild auch die geänderten Abmessungen. Ansonsten verwendet das neue Bild seine natürlichen Abmessungen.

Ebenen neu anordnen

Ziehen Sie im Ebenenbedienfeld eine Ebene an ihre neue Position in der Liste.

Die Reihenfolge der Ebenen bestimmt, welche Ebenen voreinander angezeigt werden. Höher aufgeführte Ebenen werden vor niedriger aufgeführten Ebenen angezeigt.

Ebenen löschen

1. Wählen Sie die Ebene aus, die Sie löschen möchten.
2. Klicken Sie auf Löschen Klicken Sie unten im Ebenenbedienfeld auf die Schaltfläche oder drücken Sie die Entf- Taste.

Ebenengröße ändern

1. Wählen Sie die Ebene aus, deren Größe Sie ändern möchten.
2. Legen Sie im Bedienfeld „Ebeneneigenschaften" die Breite und Höhe der Ebene in Pixel fest.
   • Klicken Sie auf „Seitenverhältnis beschränken". Klicken Sie auf die Schaltfläche, um umzuschalten, ob das Seitenverhältnis zwischen Breite und Höhe fest ist.

Die Ebene wird für die gesamte Dauer der Animation auf die angegebene Größe skaliert.

Deckkraft der Ebene ändern

1. Wählen Sie die Ebene aus, die Sie ändern möchten.
2. Legen Sie im Bedienfeld „Ebeneneigenschaften" die Anfangs- oder Enddeckkraft auf einen Wert zwischen 0 und 1 fest. (0 ist transparent und 1 ist undurchsichtig.)

Ändern Sie die Beschleunigung der Ebenenanimation

1. Wählen Sie die Ebene aus, die Sie ändern möchten.
2. Wählen Sie im Bedienfeld „Ebeneneigenschaften" aus der Dropdown-Liste „ Beschleunigung " einen Beschleunigungstyp aus.

Benutzerdefinierte Erleichterung ist nicht verfügbar.

Fügen Sie einen mittleren Zustand hinzu

Für mehr Kontrolle über die Animation der Parallax-Komponente können Sie einen mittleren Zustand hinzufügen und die Ebeneneigenschaften an dieser Stelle ändern.

1. Bewegen Sie den Mauszeiger rechts neben der Registerkarte „Start" und klicken Sie auf Taste. Die Registerkarte „Mitte" wird angezeigt.
2. Standardmäßig tritt der mittlere Zustand auf halbem Weg zwischen dem Start und dem Ende der Animation auf. Sie können das Animations-Timing anpassen .
3. Wechseln Sie an dieser Stelle zur Registerkarte „Mitte" , um die Ebeneneigenschaften festzulegen.

Um den mittleren Status zu entfernen, bewegen Sie den Mauszeiger auf die rechte Seite der Registerkarte „Mitte" und klicken Sie auf das „X" .

Animations-Timing ändern

Das Animations-Timing der Parallax-Komponente wird dadurch bestimmt, wie weit sie auf die Seite oder von der Seite gescrollt wurde. Standardmäßig beginnt die Animation, wenn der obere Rand der Komponente auf der Seite sichtbar wird (0 %), und endet, wenn der untere Rand vom oberen Rand der Seite verschwindet (100 %). Wenn Sie einen Mittelzustand hinzugefügt haben , können Sie auch anpassen, wann dieser während der Animation auftritt. Es gibt zwei Möglichkeiten, das Animations-Timing anzupassen:

• Ziehen Sie im Animations-Timing- Bedienfeld die Start-, Mittel- und Endfelder oder den Schieberegler auf den gewünschten Prozentsatz.
• Geben Sie die Anfangs-, Mittel- und Endprozentsätze in die Felder im Animationszeitfenster ein.

Ebenen ein- und ausblenden

Klicken Sie im Bedienfeld „Ebenen" auf das Kästchen neben der Miniaturansicht der Ebene (unter „ Alle Ebenen ausblenden") Taste).

Sie können alle Ebenen ausblenden oder anzeigen, indem Sie auf Alle Ebenen ausblenden klicken Taste.

Das Ausblenden einer Ebene kann die Arbeit an einer anderen Ebene erleichtern und verhindert, dass die ausgeblendete Ebene in der Konfigurationsvorschau angezeigt wird, hat jedoch keine Auswirkungen auf die Browservorschau oder das veröffentlichte Creative.

Geister ein- und ausblenden

1. Wählen Sie eine Ebene aus.
2. Klicken Sie im Bedienfeld „Ebeneneigenschaften" unter „Erweiterte Eigenschaften" auf die Schaltfläche „Geister anzeigen" .

Der Geist ist eine durchscheinende Version der Ebene an den Positionen, die Sie gerade nicht bearbeiten, sodass Sie die Start-, Mittel- und Endpositionen visuell vergleichen können. Ghosts dienen nur Ihrer Referenz und werden nicht in der Vorschau oder in der veröffentlichten Datei angezeigt.

Eigenschaften

Komponenteneigenschaften

Komponenteneigenschaften sind im Eigenschaftenfenster sichtbar. (Sie müssen den Komponentenbearbeitungsmodus verlassen.)

Eigentum	Beschreibung
Name	Der Name der Parallax-Komponente.
Scrollfaktor	Eine Zahl zwischen 0 und 1, die angibt, wie weit der Betrachter gescrollt hat. Wird nur zur Anzeige auf der Google Web Designer-Bühne verwendet. Der Standardwert ist 0,5.

Ebeneneigenschaften

Sie können Layer-Eigenschaften anzeigen und bearbeiten, wenn Sie sich im Komponentenbearbeitungsmodus befinden.

Eigentum	Beschreibung
Name	Der Name der Ebene. (Nicht editierbar.)
Start	Der Abstand der Ebene von der linken Seite und der Oberseite der Komponente, wenn die Komponente zum ersten Mal angezeigt wird (dh der obere Rand der Komponente befindet sich am unteren Rand des Ansichtsfensters), gemessen in Pixeln oder als Prozentsatz. Bearbeitbar, wenn die Registerkarte „Start" ausgewählt ist.
Mitte	Der Abstand der Ebene von der linken Seite und der Oberseite der Komponente im mittleren Zustand der Animation, gemessen in Pixeln oder als Prozentsatz. Bearbeitbar, wenn die Registerkarte „Mitte" ausgewählt ist.
Ende	Der Abstand der Ebene von der linken Seite und der Oberseite der Komponente, wenn die Komponente gerade nicht mehr sichtbar ist (d. h. der untere Rand der Komponente befindet sich am oberen Rand des Ansichtsfensters), gemessen in Pixeln oder als Prozentsatz. Bearbeitbar, wenn die Registerkarte „Ende" ausgewählt ist.
Größe	Die Breite und Höhe der Ebene. Wirkt sich auf die Ebene für die gesamte Dauer der Animation aus.
Opazität	Die Anfangs- und Endopazität der Ebene, dargestellt durch eine Zahl zwischen 0 (transparent) und 1 (undurchsichtig).
Lockerung	Der Beschleunigungstyp für die Animation der Ebene. Benutzerdefinierte Erleichterung ist nicht verfügbar.
Geist anzeigen	Wenn diese Option aktiviert ist, wird an inaktiven Positionen (Positionen, die Sie derzeit nicht bearbeiten) eine durchsichtige Version der Ebene angezeigt.

Veranstaltungen

Ereignisse können verwendet werden, um andere Aktionen in Ihrer Anzeige auszulösen. Die Parallax-Komponente sendet das folgende Ereignis:

Fall	Beschreibung
Parallax geladen	Wird gesendet, wenn die Komponente zur Anzeige bereit ist.

Vorschau

Während der Konfiguration

Sie können eine Vorschau der Parallax-Komponente anzeigen, während Sie daran arbeiten:

1. Um in den Komponentenbearbeitungsmodus zu gelangen, doppelklicken Sie auf der Bühne auf die Komponente.
2. Klicken Sie oben auf die Registerkarte Vorschau .
3. Scrollen Sie nach oben und unten, um zu sehen, wie sich die sichtbaren Ebenen in einem Beispiellayout für ein Mobilgerät verhalten. (Ausgeblendete Ebenen werden nicht angezeigt.)
4. Sie können die Komponente während der Vorschau nicht bearbeiten. Klicken Sie auf die Registerkarte „Start ", „Mitte " oder „Ende" , nehmen Sie Ihre Änderungen vor und klicken Sie dann erneut auf die Registerkarte „Vorschau" , um diese Änderungen anzuzeigen.

Im Browser

Zeigen Sie eine Vorschau der Komponente in Ihrem Browser an, indem Sie den Komponentenbearbeitungsmodus verlassen und die Schaltfläche „Vorschau" in Google Web Designer verwenden. Die Vorschauseite emuliert, wie die Anzeige auf einer Webseite angezeigt wird, die genügend Inhalt enthält, damit Sie über und unter der Komponente scrollen können.

Sie können aus den folgenden Vorschaumodusoptionen wählen:

• Gerät – Wählen Sie ein mobiles Gerät oder Benutzerdefiniert aus.
• Gerät drehen - Wechseln Sie zwischen Hoch- und Querformat.
• Größe des Ansichtsfensters – Wenn Sie „Benutzerdefiniert" für das Gerät auswählen, können Sie eine neue Größe festlegen, indem Sie dieses Feld bearbeiten oder die Größenänderungsgriffe der Vorschau ziehen.

Parallax-Anzeigen verwenden immer den Parallax-Vorschaumodus im Browser.