Verwenden Sie die Komponente "Parallaxe", um mithilfe verschiedener Bildebenen einen Tiefeneffekt zu erzielen. Wenn der Betrachter die Seite auf einem Mobilgerät nach oben oder unten scrollt, bewegen sich die Bilder im Vorder- und Hintergrund mit unterschiedlichen Geschwindigkeiten.
Diese Komponente ist nur für die Verwendung in Parallaxen-Creatives in Display & Video 360 vorgesehen.
So fügen Sie Ihrem Projekt die Komponente "Parallaxe" hinzu:
- Öffnen Sie den Bereich Komponenten und dann den Ordner Interaktion.
- Ziehen Sie die Komponente Parallaxe
in den Anzeigebereich.
- Klicken Sie doppelt auf die Komponente, um den Bearbeitungsmodus für Komponenten aufzurufen.
- Ziehen Sie Bilddateien aus Ihrem Dateisystem in den Anzeigebereich oder in den Bereich Ebenen (nur Windows oder Mac), um Ebenen hinzuzufügen. Alternativ können Sie unten im Bereich Ebenen auf die Schaltfläche Bilder hinzufügen
klicken. Es können nur Bilder als Ebenen hinzugefügt werden.
- Positionieren Sie die Ebenen mithilfe der Tabs Anfang und Ende dort, wo sie zu Beginn und zum Ende der Animation erscheinen sollen. Sie können die Ebenen an die gewünschte Position ziehen oder im Bereich Eigenschaften die Positionsfelder Anfang und Ende verwenden. Sie können auch einen mittleren Status hinzufügen, indem Sie den Mauszeiger über den Tab Anfang bewegen und auf die Schaltfläche
klicken.
- Legen Sie bei Bedarf weitere Konfigurationsoptionen fest.
- Sie können sich eine Vorschau anzeigen lassen, während Sie an der Komponente arbeiten. Wenn Sie mit der Komponente zufrieden sind, klicken Sie auf Speichern. Sie kehren dann zur normalen Google Web Designer-Benutzeroberfläche zurück.
klicken. Es können nur Bilder als Ebenen hinzugefügt werden.
klicken.Konfigurationsoptionen
Klicken Sie im Anzeigebereich doppelt auf die Komponente oder wählen Sie sie aus und klicken Sie im Bereich Eigenschaften auf Einstellungen… .
Ebenen hinzufügen
Es gibt zwei Möglichkeiten, um eine Ebene hinzuzufügen:
- Ziehen Sie eine Datei aus Ihrem Dateisystem (nur Windows oder Mac) oder aus der Mediathek in den Anzeigebereich oder den Bereich Ebenen.
- Klicken Sie unten im Bereich Ebenen auf die Schaltfläche Bilder hinzufügen
Bei den Ebenen in der Komponente "Parallaxe" muss es sich um Bilder handeln.
Ebenen verschieben
- Wählen Sie die Ebene aus, die Sie verschieben möchten.
- Wählen Sie den Tab Anfang, Mitte oder Ende aus. Sie können einen mittleren Status hinzufügen, falls Sie dies noch nicht getan haben.
- Positionieren Sie die Ebene mithilfe einer der folgenden Methoden:
- Ziehen Sie die Ebene an die neue Position.
- Verwenden Sie die Pfeiltasten, um die Ebene Pixel für Pixel zu verschieben. Halten Sie die Umschalttaste gedrückt und drücken Sie eine Pfeiltaste, um die Ebene um zehn Pixel in die entsprechende Richtung zu verschieben.
- Legen Sie auf dem Tab Eigenschaften der Ebene die Positionseigenschaft Anfang, Mitte oder Ende fest. Sie können nur die Eigenschaften bearbeiten, die im aktuellen Tab enthalten sind. Verwenden Sie die Schaltflächen An Startposition angleichen, An mittlere Position angleichen oder An Endposition angleichen
, um die jeweils andere Position zu kopieren.
Wechseln Sie zu einem anderen Tab, um die Position der Ebene an einer anderen Stelle in der Animation anzupassen.
Bilder tauschen
- Klicken Sie mit der rechten Maustaste auf das Bild im Anzeigebereich, das Sie austauschen möchten, und wählen Sie im Pop-up-Menü Bild tauschen... aus.
- Wählen Sie ein Bild in der Fotogalerie aus oder klicken Sie auf die Schaltfläche Dateien importieren
Das neue Bild ersetzt das Originalbild. Wenn Sie das Bild, das Sie ausgetauscht haben, zuvor geändert haben, werden für das neue Bild auch die geänderten Abmessungen verwendet. Haben Sie nichts geändert, werden für das neue Bild die natürlichen Abmessungen verwendet.
Ebenen neu anordnen
Ziehen Sie im Steuerfeld Ebenen eine Ebene an eine neue Position in der Liste.
Anhand der Reihenfolge wird festgelegt, an welcher Position die Ebenen angezeigt werden. Ebenen, die oben in der Liste aufgeführt sind, erscheinen vor den Ebenen, die weiter unten in der Liste stehen.
Ebenen löschen
- Wählen Sie die Ebene aus, die Sie löschen möchten.
- Klicken Sie unten im Bereich Ebenen auf die Schaltfläche Löschen
oder drücken Sie auf die Taste Entf.
Größe der Ebenen anpassen
- Wählen Sie die Ebene aus, deren Größe Sie anpassen möchten.
- Legen Sie im Bereich Eigenschaften der Ebene die Breite und Höhe der Ebene in Pixel fest.
- Klicken Sie auf die Schaltfläche Seitenverhältnis beibehalten
, um festzulegen, ob das Seitenverhältnis zwischen Breite und Höhe beibehalten werden soll.
- Klicken Sie auf die Schaltfläche Seitenverhältnis beibehalten
Die Ebene wird für die gesamte Dauer der Animation an die angegebene Größe angepasst.
Ebenendeckkraft ändern
- Wählen Sie die Ebene aus, die Sie ändern möchten.
- Legen Sie im Steuerfeld Eigenschaften der Ebene die Anfangs- oder Enddeckkraft auf einen Wert zwischen 0 und 1 fest. 0 ist transparent und 1 ist undurchsichtig.
Easing der Ebenenanimation ändern
- Wählen Sie die Ebene aus, die Sie ändern möchten.
- Wählen Sie im Bereich Eigenschaften der Ebene aus dem Drop-down-Menü Easing einen Easing-Typ aus.
Benutzerdefiniertes Easing ist nicht verfügbar.
Mittleren Status zuweisen
Für eine genauere Steuerung der Animation für die Komponente "Parallaxe" können Sie an dieser Stelle einen mittleren Status zuweisen und die Ebeneneigenschaften ändern.
- Bewegen Sie den Mauszeiger auf den Tab Anfang und klicken Sie auf die Schaltfläche
- Standardmäßig befindet sich der mittlere Status in der Mitte zwischen Beginn und Ende der Animation. Sie können das Timing der Animation anpassen.
- Wechseln Sie zum Tab Mitte, um die Ebeneneigenschaften an dieser Stelle festzulegen.
Um den mittleren Status zu entfernen, bewegen Sie den Mauszeiger auf den Tab Mitte und klicken Sie auf X.
Timing der Animation ändern
Das Timing der Animation für die Komponente "Parallaxe" hängt davon ab, wie weit sie bereits in die Seite oder aus der Seite gescrollt wurde. Standardmäßig beginnt die Animation, wenn der obere Rand der Komponente auf der Seite sichtbar wird (0 %), und sie endet, wenn der untere Rand oben auf der Seite verschwindet (100 %). Wenn Sie einen mittleren Zustand hinzugefügt haben, können Sie auch anpassen, wann er während der Animation auftritt. Es gibt zwei Möglichkeiten, das Timing der Animation anzupassen:
- Ziehen Sie im Steuerfeld Animations-Timing die Anfangs-, Mittel- und Endfelder oder setzen Sie den Schieberegler auf den gewünschten Prozentsatz.
- Geben Sie im Bereich Animations-Timing in die Felder die Anfangs-, Mittel- und Endprozentsätze ein.
Ebenen ein- und ausblenden
Klicken Sie im Steuerfeld Ebenen unter der Schaltfläche Alle Ebenen ausblenden auf das Kästchen neben der Miniaturansicht der Ebene.
Sie können alle Ebenen ein- oder ausblenden. Klicken Sie hierfür auf Alle Ebenen ausblenden .
Wenn Sie eine Ebene ausblenden, können Sie einfacher an einer anderen Ebene arbeiten, da die ausgeblendete Ebene nicht in der Konfigurationsvorschau angezeigt wird. Dies hat jedoch keine Auswirkungen auf die Browser-Vorschau oder das veröffentlichte Creative.
Inaktive Elemente ein- und ausblenden
- Wählen Sie eine Ebene aus.
- Klicken Sie im Bereich Eigenschaften der Ebene unter Erweiterte Eigenschaften auf Inaktiven Status anzeigen.
Ein inaktiver Status ist eine durchscheinende Version einer Ebene an einer Position, die Sie derzeit nicht bearbeiten. Auf diese Weise können Sie die Start- und Endpositionen visuell miteinander vergleichen. Der inaktive Status dient lediglich der Referenz und wird in der Vorschau oder veröffentlichten Datei nicht angezeigt.
Eigenschaften
Komponenteneigenschaften
Komponenteneigenschaften sind im Steuerfeld "Eigenschaften" sichtbar. Hierzu müssen Sie den Bearbeitungsmodus für Komponenten beenden.
| Eigenschaft | Beschreibung |
|---|---|
| Name | Der Name der Komponente "Parallaxe". |
| Scroll-Faktor | Eine Zahl zwischen 0 und 1. Diese Zahl gibt an, wie weit der Betrachter gescrollt hat. Diese Eigenschaft wird nur für die Anzeige im Anzeigebereich von Google Web Designer verwendet. Der Standardwert ist 0,5. |
Eigenschaften der Ebene
Im Bearbeitungsmodus für Komponenten können Sie die Eigenschaften der Ebenen ansehen und bearbeiten.
| Eigenschaft | Beschreibung |
|---|---|
| Name | Der Name der Ebene. Diese Eigenschaft kann nicht bearbeitet werden. |
|
Start |
Der Abstand der Ebene zur linken Seite und zum oberen Rand der Komponente, wenn die Komponente das erste Mal zu sehen ist, d. h., wenn der obere Rand der Komponente sich am unteren Rand des Darstellungsbereichs befindet, gemessen in Pixeln oder als Prozentsatz. Diese Eigenschaft kann bearbeitet werden, wenn der Tab Anfang ausgewählt ist. |
| Mitte | Der Abstand der Ebene zur linken Seite und zum oberen Rand der Komponente im mittleren Status der Animation, gemessen in Pixeln oder als Prozentsatz. Diese Eigenschaft kann bearbeitet werden, wenn der Tab Mitte ausgewählt ist. |
| Ende | Der Abstand der Ebene zur linken Seite und zum oberen Rand der Komponente, wenn die Komponente kurz davor ist, den Darstellungsbereich zu verlassen, d. h., wenn der untere Rand der Komponente sich am oberen Rand des Darstellungsbereichs befindet, gemessen in Pixeln oder als Prozentsatz. Diese Eigenschaft kann bearbeitet werden, wenn der Tab Ende ausgewählt ist. |
| Größe | Breite und Höhe der Ebene. Diese Eigenschaft wirkt sich für die gesamte Dauer der Animation auf die Ebene aus. |
| Deckkraft | Die Anfangs- und Enddeckkraft der Ebene, dargestellt durch eine Zahl zwischen 0 (transparent) und 1 (undurchsichtig). |
| Easing | Der Easing-Typ für die Animation der Ebene. Benutzerdefiniertes Easing ist nicht verfügbar. |
| Inaktiven Status anzeigen | Wenn diese Eigenschaft aktiviert ist, wird eine durchscheinende Version der Ebene an inaktiven Positionen angezeigt, die Sie derzeit nicht bearbeiten. |
Ereignisse
Mithilfe von Ereignissen können andere Aktionen in Ihrer Anzeige ausgelöst werden. Die Komponente "Parallax" sendet das folgende Ereignis:
| Ereignis | Beschreibung |
|---|---|
| Parallaxe geladen | Wird gesendet, wenn die Komponente angezeigt werden kann. |
Vorschau
Während der Konfiguration
Sie können sich während der Bearbeitung der Komponente "Parallax" eine Vorschau anzeigen lassen:
- Wenn Sie den Bearbeitungsmodus für Komponenten aufrufen möchten, klicken Sie doppelt auf die Komponente im Anzeigebereich.
- Klicken Sie oben auf den Tab Vorschau.
- Scrollen Sie nach oben und unten, um sich anzusehen, wie die sichtbaren Ebenen in einem Probelayout für Mobilgeräte funktionieren. Ausgeblendete Ebenen werden nicht angezeigt.
- Sie können die Komponente während der Vorschau nicht bearbeiten. Klicken Sie auf den Tab Anfang, Mitte oder Ende, nehmen Sie die gewünschten Änderungen vor und klicken Sie noch einmal auf den Tab Vorschau, um diese Änderungen anzusehen.
Im Browser
Wenn Sie für die Komponente eine Vorschau in Ihrem Browser anzeigen lassen möchten, beenden Sie den Bearbeitungsmodus für Komponenten und klicken Sie in Google Web Designer auf Vorschau. Auf der Vorschauseite wird emuliert, wie die Anzeige auf einer Webseite zu sehen ist. Hierbei ist ausreichend Inhalt sichtbar, damit Sie über und unter die Komponente scrollen können.
Sie können aus den folgenden Optionen für den Vorschaumodus auswählen:
- Gerät: Wählen Sie ein Mobilgerät oder Benutzerdefiniert aus.
- Gerät drehen
: Zwischen Hoch- und Querformat wechseln
- Größe des Darstellungsbereichs: Wenn Sie für das Gerät die Option Benutzerdefiniert auswählen, können Sie eine neue Größe festlegen. Hierfür bearbeiten Sie entweder dieses Feld oder ziehen die Ziehpunkte der Vorschau.
: Zwischen Hoch- und Querformat wechselnFür Anzeigen mit der Komponente "Parallaxe" wird im Browser immer der Vorschaumodus "Parallaxe" verwendet.