De component Parallax

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.

animation of scrolling to a Parallax ad

Deze component is alleen bedoeld voor gebruik in parallax-advertentiemateriaal van Display & Video 360.

De component Parallax toevoegen aan uw project:

  1. Open het deelvenster Componenten en vervolgens de map Interactie.
  2. Sleep de component Parallax naar het werkvlak.
  3. Dubbelklik op de component om de bewerkingsmodus voor componenten te openen.
  4. 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.
  5. 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.
  6. Stel zo nodig aanvullende configuratieopties in.
  7. 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

  1. Selecteer de laag die u wilt verplaatsen.
  2. Selecteer het tabblad Begin, Midden of Einde. (U kunt een Midden-status toevoegen als u dat nog niet heeft gedaan.)
  3. 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

  1. Klik met de rechtermuisknop op het werkvlak dat u wilt wisselen en selecteer Afbeelding wisselen in het pop-upmenu.
  2. 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

  1. Selecteer de laag die u wilt verwijderen.
  2. Klik onderaan het deelvenster Lagen op de knop Verwijderen of druk op de toets Delete.

Formaat van lagen aanpassen

  1. Selecteer de laag waarvan u het formaat wilt aanpassen.
  2. 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.

De laag wordt geschaald naar het opgegeven formaat voor de volledige duur van de animatie.

Transparantie van lagen wijzigen

  1. Selecteer de laag die u wilt wijzigen.
  2. 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

  1. Selecteer de laag die u wilt wijzigen.
  2. 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.

  1. Plaats de muisaanwijzer rechts van het tabblad Begin en klik op de knop . Het tabblad Midden wordt weergegeven.
  2. Standaard vindt de Midden-status plaats tussen het begin en einde van de animatie. U kunt de timing van de animatie aanpassen.
  3. 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

  1. Selecteer een laag.
  2. 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:

  1. Dubbelklik op de component op het werkvlak om de bewerkingsmodus voor componenten te openen.
  2. Klik bovenaan op het tabblad Voorbeeld.
  3. 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.)
  4. 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.

Was dit nuttig?

Hoe kunnen we dit verbeteren?

Meer hulp nodig?

Probeer de volgende stappen:

18367598730610580504
true
Zoeken in het Helpcentrum
true
true
true
true
true
5050422
false
false
false
false
Zoeken
Zoekopdracht wissen
Zoekfunctie sluiten
Hoofdmenu