Leer hoe u bewegings- en dekkingsscrolleffecten kunt toepassen op pagina-elementen in Adobe Muse.

Opmerking:

Adobe Muse voegt geen nieuwe functies meer toe en stopt op donderdag 26 maart 2020 met de ondersteuning. Zie de pagina Einde van levensduur voor Adobe Muse voor meer informatie en assistentie.

Scrolleffecten toepassen op paginaelementen

Het deelvenster Scrolleffecten bevat vier verschillende tabbladen voor besturing van de beweging, dekking, diapresentatiewidgets en Adobe Edge Animate-inhoud op basis van de manier waarop een pagina wordt geschoven. Wanneer scrolleffecten tegelijk worden toegepast en wanneer bepaalde elementen ook zijn vastgezet, op 100% breedte zijn ingesteld, en/of boven en en achter elkaar zijn gerangschikt met het deelvenster Lagen, kunt u een groot aantal verschillende en aansprekende effecten maken.

Scrolleffecten beweging toepassen met het deelvenster Scrolleffecten

De interface van het deelvenster Scrolleffecten lijkt op de interface van het deelvenster Scrolleffecten voor Vulling browser en Achtergrondvulling. Ga als volgt te werk om scrolleffecten op een pagina-element toe te passen met het tabblad Beweging van het deelvenster Scrolleffecten:

  1. Schakel in Muse over op de ontwerpweergave en selecteer Pagina > Pagina-eigenschappen. 
  2. Stel de waarde bij Minimumhoogte in op minimaal 2.000 pixels om ervoor te zorgen dat de pagina lang genoeg is om te schuiven. 
  3. Klik op OK om de wijzigingen op te slaan en het deelvenster Pagina-eigenschappen te sluiten.
  4. Teken een rechthoek of een tekstkader op de pagina in de weergave Ontwerpen.
  5. Gebruik het tabblad Vulling van het menu Vulling om naast of onder elkaar geplaatste achtergrondafbeeldingen toe te voegen. U kunt ook gewoon een effen vulkleur of een vulkleur met een verloop selecteren.
  6. Kies Venster > Scrolleffecten om het deelvenster Scrolleffecten te openen.
Open het deelvenster Scrolleffecten om de instellingen voor scrolleffecten te openen.
Open het deelvenster Scrolleffecten om de instellingen voor scrolleffecten te openen.

  1. Scrolleffecten inschakelen: het tabblad Beweging wordt helemaal links in het deelvenster Scrolleffecten weergegeven. Zorg dat het element op de pagina is geselecteerd en schakel het selectievakje Beweging in.

    Tip: Als u het selectievakje Beweging inschakelt, wordt een T-vormige handgreep toegevoegd aan het element die boven de bovenrand uitsteekt. De T-vormige handgreep geeft de hoofdpositie van het scrolleffect aan dat is toegepast op het element. Het scrolleffect treedt in werking wanneer een bezoeker tijdens het schuiven de hoofdpositie bereikt.

    Het besturingselement met de T-vormige handgreep wordt standaard boven het element weergegeven. U kunt echter op de handgreep klikken en deze omhoog slepen om deze nog verder te laten uitsteken, u kunt de handgreep omlaag slepen en uitlijnen met de bovenrand van het element of u kunt de handgreep naar omlaag onder het element slepen.

  2. De positie van de T-vormige handgreep instellen: sleep de T-vormige handgreep om de hoofdpositie in te stellen. Zo kunt u de beweging instellen die plaatsvindt voor- en nadat de geschoven pagina de bovenkant van de handgreep raakt.

    U kunt ook een numerieke waarde invoeren in het veld Hoofdpositie in het midden van het deelvenster Scrolleffecten als het tabblad Beweging actief is. In bovenstaande afbeelding is de hoofdpositie ingesteld op 200 pixels. 

    De locatie van de T-vormige handgreep vertegenwoordigt de hoofdpositie van het element. Wanneer de pagina verticaal wordt geschoven, worden de instellingen in de sectie Beginbeweging toegepast, zodat de positie van het element overeenkomt met de in de weergave Ontwerpen getoonde locatie.

    Wanneer de bezoeker de pagina schuift of op een ankerkoppeling klikt om voorbij de hoofdpositie van het element te springen, worden de instellingen van de sectie Eindbeweging toegepast.

    De sectie Beginbeweging bevat een aantal verticale en horizontale richtingspijlen en snelheidsopties.

  3. De verticale richting van Beginbeweging instellen: kies een verticale richting (omhoog of omlaag) door op een van de verticale knoppen te klikken. Voer een snelheidswaarde in in het veld naast de verticale richtingspijlen om de snelheid in te stellen waarbij de verplaatsing plaatsvindt in verhouding tot de schuifsnelheid van de pagina. Als u 0 invoert, wordt het element niet verticaal verplaatst. U kunt ook een percentage opgeven door een decimaalteken te gebruiken. Als u bijvoorbeeld 0,5 invoert, wordt het element verticaal en half zo snel als de schuifsnelheid van de pagina verplaatst.

  4. De horizontale richting van Beginbeweging instellen: stel de horizontale richting voor het verschuiven van het element in (naar links of rechts) door op de pijl naar links of rechts te klikken. Zo wordt de richting ingesteld waarin het element wordt verplaatst voordat het de hoofdpositie bereikt. In het veld rechts van de horizontale pijlen stelt u de snelheidswaarde in voor de horizontale richting. Als u het element niet in een horizontale richting wilt verplaatsen, stelt u het veld voor de horizontale beginsnelheid in op 0.

  5. Herhaal stap 7 en 8 om de richting en snelheid voor de sectie Eindbeweging in te stellen.

In het onderstaande voorbeeld is de hoofdpositie ingesteld op 500 pixels. Wanneer de browser begint met schuiven, wordt het element omlaag naar de gewenste positie verplaatst met een snelheid van 1 keer de schuifsnelheid van de pagina (dus dezelfde snelheid). Het element arriveert op de bestemming als de pagina de hoofdpositie bereikt. Als de pagina voorbij de hoofdpositie schuift, wordt het element twee keer zo snel als de schuifsnelheid van de pagina naar rechts verplaatst.

Pas de Bewegingsinstellingen toe om het scrolleffect in te stellen in Adobe Muse
Pas de Bewegingsinstellingen toe om de scrolleffecten in te stellen

  1. Klik op Voorvertoning of kies Bestand > Voorvertoning van pagina weergeven in browser om de scrolleffecten te testen. Schuif de pagina omlaag en weer omhoog om te zien hoe het element wordt verplaatst.
  2. Keer terug naar Muse of klik op de knop Ontwerpen wanneer u klaar bent met testen om de pagina verder te bewerken.

Scrolleffecten dekking toepassen met het deelvenster Scrolleffecten

In deze sectie wordt uitgelegd hoe u transformaties kunt toepassen op de zichtbaarheid waarmee de weergave van een element wordt gewijzigd op basis van de schuifactiviteiten van de bezoeker. Dit is een handige manier om inhoud weer te geven en te verbergen door de indruk te wekken dat items in- of uitfaden als de bezoeker omlaag schuift naar een nieuwe sectie van de pagina. Ga als volgt te werk op het tabblad Dekking van het deelvenster Scrolleffecten om scrolleffecten toe te passen die de transparantie van een pagina-element beïnvloeden:

  1. Controleer tijdens het bewerken van een pagina in de weergave Ontwerpen of in het veld Min. hoogte van de Pagina-eigenschappen een hogere pixelwaarde is ingevoerd dan de gemiddelde hoogte van de meeste beeldschermen, zoals 2000 pixels. U kunt ook inhoud toevoegen aan de pagina, zodat deze lang genoeg is om te schuiven.
  2. Teken een rechthoek of een tekstkader op de pagina in de weergave Ontwerpen.
  3. Gebruik het tabblad Vulling in het menu Vulling (of gebruik het deelvenster Vulling) om onder of naast elkaar geplaatste achtergrondafbeeldingen toe te voegen aan het geselecteerde pagina-element. U kunt ook een effen kleur of een kleur met een verloop instellen als de vulling. (U kunt desgewenst ook een diapresentatiewidget toevoegen of een Adobe Edge Animate OAM-bestand op de pagina plaatsen.)
  4. Zorg dat het element is geselecteerd, klik op het tabblad Dekking (het tweede tabblad van links) in het deelvenster Scrolleffecten en schakel vervolgens het selectievakje Dekking in.
Schakel het selectievakje Dekking in om de scrolleffecten dekking voor het geselecteerde element in te schakelen.
Schakel het selectievakje Dekking in om de scrolleffecten dekking voor het geselecteerde element in te schakelen.

Als u de optie Dekking inschakelt, wordt er een ander type handgreep op het element weergegeven. Net als de T-vormige handgreep die wordt gebruikt om de hoofdpositie in te stellen in het tabblad Beweging, kunt u deze handgreep boven het element slepen. U kunt de handgreep ook omlaag slepen naar de bovenrand (of een willekeurig gedeelte) van het element of u kunt deze onder het element slepen. De handgreep Dekking bestaat uit drie verschillende onderdelen die elk apart kunnen worden gesleept om waarden in te stellen voor Hoofdpositie, Positie 1 uitfaden en Positie 2 uitfaden.

  1. Sleep het middelste vierkante gedeelte van de handgreep om de hoofdpositie in te stellen. In het onderstaande voorbeeld is de hoofdpositie ingesteld op 150 pixels.
Stel de hoofdpositie in door de middelste vierkante handgreep verticaal te slepen.
Stel de hoofdpositie in door de middelste vierkante handgreep verticaal te slepen.

  1. Klik en sleep het bovenste ronde gedeelte van de handgreep om deze op de gewenste positie te plaatsen. In het onderstaande voorbeeld is Positie 1 uitfaden ingesteld op 100 pixels.
Stel Positie 1 uitfaden in op de Handgreep dekking
Klik en sleep de linkerbovenzijde van de ronde handgreep om de eerste positie in te stellen die de transparantie van het element beïnvloedt.

  1. Klik en sleep het onderste ronde gedeelte van de handgreep naar de gewenste locatie. In het onderstaande voorbeeld is Positie 2 uitfaden ingesteld op 200 pixels.
Stel Positie 2 uitfaden in op de Handgreep dekking
Klik en sleep de rechterbovenzijde van de ronde handgreep om de tweede positie in te stellen die de transparantie van het element beïnvloedt.

Opmerking:

Desgewenst kan de hoofdpositie samen met de handgrepen voor uitfadeposities worden gesleept, zodat dezelfde waarden worden ingesteld. In plaats van de handgrepen te slepen, kunt u ook numerieke waarden invoeren voor elk van deze velden in het deelvenster Scrolleffecten.

In dit voorbeeld begint het element volledig transparant en wordt het langzaam maar zeker volledig dekkend (de waarde voor Dekking die overeenkomt met de Hoofdpositie is momenteel ingesteld op 100%) wanneer de pagina de hoofdpositie bereikt. Als de pagina voorbij de hoofdpositie schuift, wordt het element geleidelijk weer transparant en verdwijnt het uit beeld als de pagina voorbij 200 pixels wordt geschoven.

Stel de gewenste dekkingswaarde in voor scrolleffecten
Stel het percentage van de dekking in (waarbij 0% volledig transparant is) op het tabblad Dekking van het deelvenster Scrolleffecten.

  1. Klik op Voorvertoning of kies Bestand > Voorvertoning van pagina weergeven in browser om de scrolleffecten te testen. Schuif de pagina omlaag en weer omhoog om te zien hoe de dekking van het element verandert in verhouding tot de schuifpositie van de pagina.
  2. Keer terug naar Muse of klik op de knop Ontwerpen wanneer u klaar bent met testen om de pagina verder te bewerken.

Werken met het tabblad Diapresentatie van het deelvenster Scrolleffecten

Scrollbewegingen worden ook veel gebruikt om scrollinteractie te combineren met de weergave van afbeeldingen in een diapresentatie. U kunt een diapresentatiewidget toevoegen aan de pagina en vervolgens het tabblad Diapresentatie van het deelvenster Scrolleffecten gebruiken om scrolleffecten toe te passen, zoals het automatisch weergeven van een nieuwe afbeelding in de diapresentatie wanneer de pagina naar een specifieke locatie wordt geschoven.

Klik op het tabblad Diapresentatie (het derde tabblad van links) om de instellingen voor deze sectie te bekijken.

Meestal wordt dit gedeelte van de interface voor scrollbeweging gebruikt om een diapresentatiewidget vast te zetten op de pagina. Over het algemeen wordt de diapresentatiewidget geconfigureerd (via het menu Opties) om alleen de grotere diapresentatiecontainer weer te geven, terwijl de miniaturen en de knoppen Vorige en Volgende worden verborgen.

Een diapresentatie op volledig scherm is vooral geschikt voor dit effect, hoewel het type diapresentatiewidget dat u kiest uiteindelijk afhankelijk is van het ontwerp van de site.

Ga als volgt te werk om scrolleffecten toe te passen op een diapresentatiewidget:

  1. Werk het veld Min. hoogte in het dialoogvenster Pagina-eigenschappen bij om de pagina lang genoeg te maken om te schuiven. U kunt ook inhoud toevoegen om een langere pagina te maken.
  2. Sleep een diapresentatiewidget uit de Widget-bibliotheek naar de pagina. Gebruik het menu Opties om de diapresentatieopties te configureren. (Als scrolleffecten worden toegepast op diapresentatiewidgets, worden de opties Vorige, Volgende en Miniaturen meestal uitgeschakeld.)
  3. Voeg afbeeldingen toe aan de diapresentatiewidget door op de map naast de sectie Afbeeldingen in het menu Opties te klikken. Blader om de afbeeldingen op uw computer te selecteren die u wilt toevoegen om de galerie met afbeeldingen te vullen.
  4. Gebruik de Pin-interface in het regelpaneel om de diapresentatie vast te zetten op de huidige positie in het browservenster. Zorg dat de diapresentatie is geselecteerd en klik op een van de zes vastzetposities.
Scrolleffecten toepassen op diapresentatiewidgets
Zet de diapresentatiewidget vast op een specifieke locatie, zodat deze op de juiste positie in het browservenster blijft staan als de pagina wordt geschoven.

Zodra u de vastgezette diapresentatie hebt toegevoegd en geconfigureerd, kunt u scrolleffecten toevoegen.

Zorg dat de diapresentatiewidget is geselecteerd en schakel het selectievakje Diapresentatie op het tabblad Diapresentatie van het deelvenster Scrolleffecten in.

Schakel de optie Diapresentatie in het deelvenster Scrolleffecten in.
Selecteer de diapresentatiewidget en schakel de optie Diapresentatie in het deelvenster Scrolleffecten in.

Als de optie Diapresentatie wordt ingeschakeld, wordt de handgreep voor de hoofdpositie aan de diapresentatie in de weergave Ontwerpen toegevoegd. Als u de waarden voor de hoofdscrollpositie wilt bijwerken, kunt u de linker- en rechterzijde van de handgreep slepen of cijfers invoeren in het veld Hoofdscrollpositie. U kunt ook op de pijl-omhoog of -omlaag klikken in het deelvenster Scrolleffecten om de numerieke waarde te verhogen of te verlagen.

Het tabblad Diapresentatie van het deelvenster Scrolleffecten bevat twee knoppen: 1 en 2 voor de twee verschillende manieren waarop u het afspelen van de diapresentatiebeelden kunt besturen. U kunt de diapresentatie instellen op automatisch afspelen of u kunt deze zodanig instellen dat naar de volgende afbeelding wordt gesprongen wanneer de pagina verder wordt geschoven.

De eerste manier is door de gewenste hoofdpositie in te stellen en vervolgens het selectievakje Automatisch afspelen in te schakelen.

Wanneer de pagina voorbij de hoofdpositie wordt geschoven (of wanneer de bezoeker op een koppeling naar een ankertag klikt en voorbij de hoofdpositie op de pagina springt), wordt begonnen met afspelen van de diapresentatie. De functie Automatisch afspelen blijft de afbeeldingen weergeven en deze worden herhaald totdat de pagina weer omhoog boven de hoofdpositie wordt verschoven of totdat de bezoeker de pagina sluit.

In het voorbeeld in de bovenstaande afbeelding wordt begonnen met afspelen als de pagina naar 100 pixels wordt geschoven (of ergens onder deze ingestelde hoofdpositie). Als de bezoeker weer omhoog schuift tot boven de hoofdpositie (99 pixels of lager), wordt het afspelen van de diapresentatie gestopt.

U kunt de diapresentatiewidget ook besturen door de hoofdpositie in te stellen en vervolgens het keuzerondje Van dia wisselen om de in te schakelen. In deze workflow stelt u ook het aantal pixels in in het veld onder het keuzerondje om aan te geven hoe vaak een nieuwe afbeeldingen in de diapresentatie wordt weergegeven, afhankelijk van hoe ver omlaag de pagina wordt geschoven.

U kunt bijvoorbeeld een diapresentatiewidget vastzetten op een langere pagina, zodat deze op een vaste plaats blijft staan, terwijl de rest van de pagina-inhoud wordt verschoven. Door een numerieke waarde in te stellen voor de optie Van dia wisselen om de kunt u de diapresentatie steeds over laten schakelen naar de volgende afbeelding in de reeks wanneer de pagina tot voorbij het opgegeven aantal pixels wordt verschoven.

In bovenstaande afbeelding is de hoofdpositie ingesteld op 200. Als de pagina voorbij 200 pixels van de bovenkant wordt geschoven, wordt steeds de volgende afbeelding in de reeks weergegeven wanneer de pagina nog eens 30 pixels wordt verschoven.

Scrolleffecten instellen voor diapresentaties in Adobe Muse
Stel de diapresentatie in om steeds door te gaan naar de volgende afbeelding wanneer de pagina een bepaalde afstand (in pixels) omlaag wordt geschoven.

Werken met het tabblad Adobe Edge Animate van het deelvenster Scrolleffecten

Adobe Edge Animate is een gebruiksvriendelijk ontwerpprogramma waarmee u op HTML5 gebaseerde webanimaties kunt maken. Met de interface in Edge Animate kunt u composities maken met zich herhalende bewegende illustraties en symbolen. De animaties die u met Adobe Edge Animate maakt, kunnen als OAM-bestanden worden geëxporteerd en vervolgens op de pagina's van uw Muse-sites worden geplaatst. Animaties die zijn gemaakt in Edge Animate kunnen zonder plug-in worden afgespeeld in een browser.

Wanneer u animaties maakt in Adobe Edge Animate, sleept u elementen naar het werkgebied en manipuleert u de beweging van deze elementen via een tijdlijn. Naast het rechtstreeks toevoegen van elementen aan de hoofdtijdlijn, kunt u ook geneste elementen maken met subelementen die worden afgespeeld met gebruik van hun eigen interne tijdlijn. Meer informatie over het werken met Adobe Edge Animate vindt u op de productpagina van Adobe Edge Animate. U kunt ook de videozelfstudies van Adobe Edge Animate op Adobe TV bekijken.

Als u met de functie voor scrollbeweging van Adobe Edge Animate wilt werken, dient u eerst speciaal voor dit doel een compositie te ontwerpen. Scrolleffecten kunnen worden toegepast op OAM-bestanden en beïnvloeden de animaties die op de hoofdtijdlijn worden geplaatst. U kunt interactieve animaties maken als u strategisch te werk gaat tijdens het ontwerpen en alleen de items die u wilt verplaatsen wanneer de pagina wordt verschoven op de hoofdtijdlijn plaatst (en alle andere elementen van de animatie in geneste symbooltijdlijnen opneemt). Wanneer bezoekers de pagina schuiven, bepalen de instellingen voor scrolleffecten alleen het afspelen van de geanimeerde elementen op de hoofdtijdlijn.

Zie Edge Animate-inhoud toevoegen voor informatie over het maken van animaties die speciaal zijn bestemd om aan een Adobe Muse-site te worden toegevoegd.

Voer de volgende stappen uit om te werken met het tabblad Diapresentatie van het deelvenster Scrolleffecten:

  1. Exporteer het OAM-bestand uit Adobe Edge Animate en sla het op in uw sitemap.
  2. Start Muse en dubbelklik op een pagina om deze te openen in de weergave Ontwerpen. Controleer of de pagina lang genoeg is om te schuiven door de instellingen voor de minimale hoogte bij te werken in het dialoogvenster Pagina-eigenschappen of door pagina-inhoud toe te voegen om een langere pagina te maken.
  3. Kies Bestand > Plaatsen, blader naar het OAM-bestand in de sitemap en selecteer het.
  4. Open het deelvenster Scrolleffecten. Klik op het tabblad Adobe Edge Animate (het vierde tabblad van links) om de instellingen voor deze sectie te controleren.
  5. Zorg dat het OAM-bestand is geselecteerd en schakel het selectievakje Edge Animate in.
Scrolleffecten instellen voor animaties in Adobe Muse
Stel de Edge Animate-animatie zodanig in dat deze begint met afspelen wanneer de pagina op een specifieke locatie belandt. Of stel de animatie zodanig in dat deze steeds naar een ander frame schakelt wanneer de pagina een bepaalde afstand (in pixels) omlaag wordt geschoven.

In bovenstaande afbeelding is de hoofdpositie ingesteld op 50 pixels. U kunt de T-vormige handgreep slepen of een andere waarde opgeven in het veld Hoofdpositie om de hoofdpositie aan te passen.

Als u de hoofdpositie hebt ingesteld, kunt u het afspelen van de animatie besturen met twee opties:

  • Automatisch afspelen: als deze optie is geselecteerd, wordt de animatie in de hoofdtijdlijn afgespeeld zodra de browser naar de hoofdpositie wordt geschoven, ongeacht het aantal frames in de hoofdtijdlijn. De animatie houdt pas op met afspelen wanneer de pagina boven de hoofdpositie wordt geschoven.
  • Van frame wisselen om de: als deze optie is geselecteerd, wordt steeds het volgende frame in de animatie op de hoofdtijdlijn afgespeeld als de pagina voorbij een bepaald aantal pixels wordt geschoven. Als u bijvoorbeeld een pagina maakt die 3000 pixels hoog is en de waarde 10 invoert, wordt de animatie in de hoofdtijdlijn afgespeeld met een snelheid van 1 frame voor elke 10 pixels die de pagina wordt geschoven. Als de bezoeker sneller omlaag schuift op de pagina, wordt het animatietempo verhoogd.

Opmerking:

De instellingen voor scrolleffecten beweging hebben geen invloed op eventuele geanimeerde objecten die zijn genest in of gekoppeld via de hoofdtijdlijn in de Adobe Edge Animate-compositie. Daarom kunt u kiezen tussen een statische achtergrond of het continu herhalen van geneste elementen die altijd in beweging zijn, ongeacht het feit of de bezoeker de pagina schuift of niet.

  1. Na het kiezen van de instellingen in het tabblad Edge Animate van het deelvenster Scrolleffecten, kiest u Bestand > Voorvertoning van pagina weergeven in browser (of klikt u op de knop Voorvertoning). Test de pagina door omhoog en omlaag te schuiven en te zien hoe de Edge Animate-animatie-inhoud (die aan de hoofdtijdlijn is toegevoegd) wordt afgespeeld.
  2. Als u wijzigingen wilt aanbrengen, gaat u terug naar Muse (of klikt u op de knop Ontwerpen) en werkt u de instellingen in het deelvenster Scrolleffecten bij.

Dit werk is gelicentieerd onder de Creative Commons Naamsvermelding/Niet-commercieel/Gelijk delen 3.0 Unported-licentie  De voorwaarden van Creative Commons zijn niet van toepassing op Twitter™- en Facebook-berichten.

Juridische kennisgevingen   |   Online privacybeleid