Gebruik de component Parallax om een illusie van diepte te creëren via afbeeldingslagen. Als de kijker op een mobiel apparaat omhoog of omlaag scrollt op de pagina, bewegen de afbeeldingen op de voor- en achtergrond met verschillende snelheden.
Deze component is alleen bedoeld voor gebruik in parallax-advertentiemateriaal van Display & Video 360.
De component Parallax toevoegen aan uw project:
- Open het deelvenster Componenten en vervolgens de map Interactie.
- Sleep de component Parallax
naar het werkvlak.
- Dubbelklik op de component om de bewerkingsmodus voor componenten te openen.
- Voeg lagen toe door afbeeldingsbestanden van uw bestandssysteem naar het werkvlak of het deelvenster Lagen (alleen Windows of Mac) te slepen, of door onderaan het deelvenster Lagen op de knop Afbeeldingen toevoegen
te klikken. Alleen afbeeldingen kunnen als lagen worden toegevoegd.
- Positioneer elke laag op de plek waar deze moet worden weergegeven aan het begin en het einde van de animatie met behulp van het tabblad Begin en Einde. U kunt de laag naar de gewenste plek slepen of de velden voor de positie Begin en Einde in het deelvenster Eigenschappen gebruiken. U kunt ook een Midden-status toevoegen door de muisaanwijzer rechts van het tabblad Begin te plaatsen en op de knop
te klikken.
- Stel zo nodig aanvullende configuratieopties in.
- Als u tevreden bent met de component (u kunt een voorbeeld bekijken terwijl u eraan werkt), klikt u op Opslaan. U keert terug naar de reguliere Google Web Designer-interface.
Configuratieopties
Als u de component wilt configureren, dubbelklikt u op het werkvlak op de component of selecteert u de component en klikt u op Instellingen… in het deelvenster Eigenschappen.
Lagen toevoegen
U kunt op twee manieren een laag toevoegen:
- Sleep een bestand van uw bestandssysteem (alleen Mac of Windows) of vanuit de bibliotheek naar het werkvlak of het deelvenster Lagen.
- Klik onderaan het deelvenster Lagen op de knop Afbeeldingen toevoegen
.
Lagen in de component Parallax moeten afbeeldingen zijn.
Lagen verplaatsen
- Selecteer de laag die u wilt verplaatsen.
- Selecteer het tabblad Begin, Midden of Einde. (U kunt een Midden-status toevoegen als u dat nog niet heeft gedaan.)
- Positioneer de laag via een van de volgende methoden:
- Sleep de laag naar de nieuwe positie.
- Gebruik de pijltoetsen om de laag één pixel per keer te verplaatsen. Houd de Shift-toets ingedrukt terwijl u op een pijltoets drukt om de laag tien pixels in die richting te verplaatsen.
- Stel de eigenschappen voor de positie Begin, Midden of Einde in op het tabblad Laageigenschappen. U kunt alleen de eigenschappen bewerken die overeenkomen met het huidige tabblad. Gebruik de knoppen Waarde van beginpositie kopiëren, Aanpassen aan middenpositie of Waarde van eindpositie kopiëren
om de andere positie te kopiëren.
Schakel over naar een ander tabblad om de positie van de laag op een ander punt in de animatie aan te passen.
Afbeeldingen wisselen
- Klik met de rechtermuisknop op het werkvlak dat u wilt wisselen en selecteer Afbeelding wisselen in het pop-upmenu.
- Selecteer een afbeelding in de bibliotheek of klik op de knop Bestanden importeren
om een afbeeldingsbestand op uw computer te selecteren.
De nieuwe afbeelding vervangt de oorspronkelijke afbeelding. Als u het formaat van de afbeelding die u wisselt, eerder heeft verkleind, worden de aangepaste afmetingen ook gebruikt voor de nieuwe afbeelding. Anders worden de eigen afmetingen van de nieuwe afbeelding gebruikt.
Lagen opnieuw ordenen
Sleep in het deelvenster Lagen een laag naar de nieuwe positie in de lijst.
De volgorde van de lagen bepaalt welke lagen vóór elkaar worden weergegeven. Lagen die hoger worden weergegeven, worden weergegeven vóór lagen die lager in de lijst staan.
Lagen verwijderen
- Selecteer de laag die u wilt verwijderen.
- Klik onderaan het deelvenster Lagen op de knop Verwijderen
of druk op de toets Delete.
Formaat van lagen aanpassen
- Selecteer de laag waarvan u het formaat wilt aanpassen.
- Stel in het deelvenster Laageigenschappen de breedte en hoogte van de laag in pixels in.
- Klik op de knop Beeldverhouding beperken
om aan te geven of de beeldverhouding tussen de breedte en hoogte moet worden vastgezet.
- Klik op de knop Beeldverhouding beperken
De laag wordt geschaald naar het opgegeven formaat voor de volledige duur van de animatie.
Transparantie van lagen wijzigen
- Selecteer de laag die u wilt wijzigen.
- Stel in het deelvenster Laageigenschappen de begin- of eindtransparantie in op een waarde tussen 0 en 1. (0 is transparant en 1 is ondoorzichtig.)
De easing van laaganimaties wijzigen
- Selecteer de laag die u wilt wijzigen.
- Selecteer in het deelvenster Laageigenschappen een type easing via het dropdownmenu Easing.
Aangepaste easing is niet beschikbaar.
Een Midden-status toevoegen
Voor meer controle over de animatie van de component Parallax kunt u een Midden-status toevoegen en de laageigenschappen op dat punt wijzigen.
- Plaats de muisaanwijzer rechts van het tabblad Begin en klik op de knop
. Het tabblad Midden wordt weergegeven.
- Standaard vindt de Midden-status plaats tussen het begin en einde van de animatie. U kunt de timing van de animatie aanpassen.
- Schakel naar het tabblad Midden om de laageigenschappen in te stellen.
Als u de Midden-status wilt verwijderen, plaatst u de muisaanwijzer aan de rechterkant van het tabblad Midden en klikt u op X.
De timing van de animatie wijzigen
De timing van de animatie van de component Parallax wordt bepaald door hoe ver deze op of van de pagina is gescrolld. De animatie begint standaard als de bovenste rand van de component op de pagina verschijnt (0%) en eindigt als de onderste rand van de pagina verdwijnt (100%). Als u een Midden-status heeft toegevoegd, kunt u ook aangeven als deze plaatsvindt tijdens de animatie. Er zijn twee manieren om de timing van de animatie aan te passen:
- In het deelvenster Timing voor animatie sleept u de selectievakjes voor Begin, Midden en Einde of de schuifregelaar naar het gewenste percentage.
- Geef de Begin-, Midden- en Einde-percentages op in de velden in het deelvenster Timing voor animatie.
Lagen weergeven en verbergen
Klik in het deelvenster Lagen op het vak naast de miniatuurafbeelding van de laag (onder de knop Alle lagen verbergen ).
U kunt alle lagen verbergen of weergeven door op de knop Alle lagen verbergen te klikken.
Als u een laag verbergt, kunt u gemakkelijker aan een andere laag werken en wordt de verborgen laag niet in het configuratievoorbeeld weergegeven. Dit heeft echter geen invloed op het browservoorbeeld of het gepubliceerde advertentiemateriaal.
Ghosts weergeven en verbergen
- Selecteer een laag.
- Klik in het deelvenster Laageigenschappen onder Geavanceerde eigenschappen op de schakelknop Ghost weergeven.
De ghost is een doorschijnende versie van de laag op de positie die u momenteel niet bewerkt, zodat u de begin-, midden- en eindposities visueel kunt vergelijken. Ghosts dienen uitsluitend ter referentie en worden niet weergegeven in voorbeelden of in het gepubliceerde bestand.
Eigenschappen
Componenteigenschappen
Componenteigenschappen zijn zichtbaar in het deelvenster 'Eigenschappen'. (U moet de bewerkingsmodus voor componenten verlaten.)
Eigenschap | Beschrijving |
---|---|
Naam | De naam van de Parallax-component. |
Scroll-factor | Een getal tussen 0 en 1 waarmee wordt aangegeven hoe ver de kijker heeft gescrolld. Wordt alleen gebruikt voor weergave in het Google Web Designer-werkvlak. Het standaardaantal is 0,5. |
Laageigenschappen
U kunt laageigenschappen bekijken en bewerken wanneer u zich in de bewerkingsmodus voor componenten bevindt.
Eigenschap | Beschrijving |
---|---|
Naam | De naam van de laag. (Niet-bewerkbaar.) |
Begin |
De afstand van de laag vanaf de linkerzijde en de bovenkant van de component als de component voor het eerst in beeld komt (met andere woorden: de bovenste rand van de component is te vinden bij de onderste rand van de viewport), gemeten in pixels of als percentage. Bewerkbaar als het tabblad Begin is geselecteerd. |
Midden | De afstand van de laag vanaf de linkerkant en bovenkant van de component tijdens de Midden-status van de animatie, gemeten in pixels of als percentage. Bewerkbaar als het tabblad Midden is geselecteerd. |
Einde | De afstand van de laag vanaf de linkerzijde en de bovenkant van de component als de component bijna buiten beeld is (met andere woorden: de onderste rand van de component is te vinden bij de bovenste rand van de viewport), gemeten in pixels of als percentage. Bewerkbaar als het tabblad Einde is geselecteerd. |
Formaat | De breedte en hoogte van de laag. Beïnvloedt de laag gedurende de volledige duur van de animatie. |
Transparantie | De begin- en eindtransparantie van de laag, aangegeven met een getal tussen 0 (transparant) en 1 (ondoorzichtig). |
Easing | Het type easing voor de animatie van de laag. Aangepaste easing is niet beschikbaar. |
Ghost weergeven | Als deze optie is ingeschakeld, wordt een doorschijnende versie van de laag weergegeven op inactieve posities (posities die u momenteel niet bewerkt). |
Gebeurtenissen
Gebeurtenissen kunnen worden gebruikt om andere acties in uw advertentie te activeren. De component Parallax verstuurt de volgende gebeurtenis:
Gebeurtenis | Beschrijving |
---|---|
Parallax geladen | Wordt gestuurd als de component klaar is voor weergave. |
Voorbeeld
Tijdens de configuratie
U kunt een voorbeeld van de component Parallax bekijken terwijl u eraan werkt:
- Dubbelklik op de component op het werkvlak om de bewerkingsmodus voor componenten te openen.
- Klik bovenaan op het tabblad Voorbeeld.
- Scroll omhoog en omlaag om te zien hoe de zichtbare lagen werken in een voorbeeldlay-out op een mobiel apparaat. (Verborgen lagen worden niet weergegeven.)
- U kunt de component niet bewerken als u hiervan een voorbeeld bekijkt. Klik op het tabblad Begin, Midden of Einde, breng uw wijzigingen aan en klik vervolgens opnieuw op het tabblad Voorbeeld om de wijzigingen te bekijken.
In de browser
Bekijk een voorbeeld van de component in uw browser door de bewerkingsmodus voor componenten te sluiten en de knop Voorbeeld in Google Web Designer te gebruiken. Op de voorbeeldpagina ziet u hoe de advertentie wordt weergegeven op een webpagina met voldoende content om naar boven en onder de component te scrollen.
U kunt kiezen uit de volgende opties voor de voorbeeldmodus:
- Apparaat: selecteer een mobiel apparaat of Aangepast.
- Apparaat draaien
: schakel tussen de staande en liggende stand.
- Formaat van viewport: als u Aangepast selecteert voor het apparaat, kunt u een nieuw formaat instellen door dit veld te bewerken of de formaatgrepen van het voorbeeld te verslepen.
Parallax-advertenties gebruiken altijd de Parallax-voorbeeldmodus in de browser.