Leer hoe u verschillende typen scrolleffecten kunt toevoegen en gebruiken, zoals het stap-voor-stapeffect, het schuivende menu, het roll-upeffect en meer.

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.

Ontwerpideeën voor scrolleffecten

In deze sectie wordt een van de vele manieren besproken waarop u scrolleffecten kunt gebruiken om interactieve functies, unieke sitenavigatie en aansprekende bewegende illustraties toe te voegen aan uw Muse-sites.

Voer eerst de onderstaande stappen uit:

  1. Ga naar de website met livevoorbeelden en klik op elke sectie om voorbeelden van elke doelstelling te zien. Schuif omlaag op elke voorbeeldpagina om te zien hoe de scrolleffecten de weergave van de pagina-elementen beïnvloeden.
  2. Blader naar het einde van de live voorbeeldsite en download het .muse-bestand.
  3. Open de voorbeeldsite en bekijk het project in de Muse-werkruimte.
  4. Open het deelvenster Lagen en vouw de sectie Inhoud uit om de elementen te bekijken die voor elk voorbeeld zijn gebruikt.

Het stap-voor-stap effect

Met dit effect komt een aantal afzonderlijke elementen in beeld vliegen om vervolgens op de pagina opnieuw te worden samengesteld wanneer de bezoeker verder schuift op de pagina. Afbeeldingen en tekstkaders worden bestuurd met scrolleffecten die een interactieve compilatie maken waarbij de elementen als puzzelstukjes in elkaar passen. Dit is een interessante manier om de productdetails op een webpagina in beeld te brengen.

De workflow voor dit voorbeeld gebruikt de sectie Beginbeweging van het tabblad Beweging van het deelvenster Scrolleffecten om een geconsolideerd ontwerp te maken van afzonderlijke elementen. Als een element op de juiste plaats is beland, worden de Eindbeweging-instellingen ingesteld op 0, zodat de bestaande elementen niet meer worden verplaatst als nieuwe elementen in beeld verschijnen.

Ga als volgt te werk om een vergelijkbaar stap-voor-stap effect te maken:

  1. Kies Pagina > Pagina-eigenschappen in de weergave Ontwerpen. Stel een veel hogere waarde in in het veld Min. hoogte. In het sitevoorbeeld is de minimale hoogte van de pagina ingesteld op 14,120 pixels.
  2. Gebruik de tool Tekst om een tekstkader te maken en de gewenste tekstinhoud in te voeren.
  3. Open het tabblad Beweging van het deelvenster Scrolleffecten en schakel het selectievakje Beweging in. In dit voorbeeld zorgen de instellingen in de sectie Beginbeweging ervoor dat het tekstkader omlaag naar de gewenste positie wordt verplaatst met een snelheid van 0,25 keer de schuifsnelheid. Wanneer de pagina de hoofdpositie voor het tekstkader bereikt, bereikt het tekstkader de locatie die in de weergave Ontwerpen is toegewezen. Vervolgens zorgen de instellingen bij Eindbeweging (een waarde van 0 voor beide richtingen) ervoor dat het eerste element op zijn plaats blijft staan, net alsof het element is vastgezet.
  4. Een PNG-bestand met transparantie (de omtrek van een mobiele telefoon) is onder het tekstkader geplaatst. Dit element gebruikt de instellingen op het tabblad Beweging van het deelvenster Scrolleffecten om vanaf de linkerzijde de pagina op te komen vliegen, naar de juiste positie te gaan en daar te blijven.
  5. Vlak achter de omtrek van de telefoon volgt een kleiner wit element een vergelijkbaar bewegingspatroon: het komt vanaf de linkerzijde in beeld vliegen en blijft vervolgens in positie. De witte illustratie simuleert het oordopje boven een mobiele telefoon. Dit middel (phone-earpiece.png) is boven de omtrek van de mobiele telefoon gerangschikt in het deelvenster Lagen en wordt dus boven de telefoon weergegeven in het ontwerp.  
  6. Vlak achter het oordopje komt een klein wit element dat de startknop van de telefoon simuleert vanaf de rechterzijde in beeld vliegen. Het element imiteert het gedrag van het oordopje en wordt ook boven de omtrek van de mobiele telefoon weergegeven in het ontwerp.
  7. Vervolgens gebruikt een licht gekleurde rechthoekige illustratie met een subtiel verticaal kleurverloop van wit naar lichtgrijs het tabblad Beweging van het deelvenster Scrolleffecten om in beeld te komen, zodat het precies in het transparante gebied midden in de omtrek van de mobiele telefoon past. Eenmaal in positie, blijft het daar staan en wekt het de illusie het scherm van de telefoon te zijn. Het schermelement (phone-screen.png) staat onderaan in het deelvenster Lagen en verschijnt dus achter alle andere elementen in het paginaontwerp.
  8. Vervolgens worden vier rechthoeken (gevuld met effen groen, blauw, geel en rood) in positie geplaatst. Om het verspreide effect te bereiken waarbij de afzonderlijke elementen op hun plaats komen vliegen, is voor elk van de rechthoeken een verschillende richting en snelheid ingesteld in het tabblad Beweging van het deelvenster Scrolleffecten. De blauwe rechthoek verplaatst zich omlaag en naar rechts, de groene en gele rechthoeken gaan omhoog en naar rechts en de rode rechthoek gaat omhoog en naar links in de sectie Beginbeweging. In de sectie Eindbeweging is voor alle rechthoeken de instelling 0 ingesteld voor beide richtingen, zodat elk element functioneert alsof het is vastgezet als het eenmaal op de plaats van bestemming boven op het scherm van de mobiele telefoon is aangekomen.
  9. Nadat alle andere onderdelen zijn samengesteld, wordt een tweede tekstveld met een snelheid van 0,5 keer de schuifsnelheid omhoog verplaatst naar een positie onder het eerste tekstveld.

Ten slotte staan er nog twee elementen onderaan: een effen rechthoek die met dezelfde effen kleur als de pagina is gevuld (zodat het onzichtbaar is in het ontwerp) en erachter een groep objecten (een gele rechthoek met een gloeilampillustratie).

De effen gekleurde rechthoek moet de erachter liggende groep verbergen.

Stap-voor-stap scrolleffect in Adobe Muse
Stap-voor-stap scrolleffect in Adobe Muse

Opmerking:

Als beide elementen zijn geselecteerd, worden de waarden die gelijk zijn voor alle geselecteerde items in de velden weergeven. In dit voorbeeld wordt zowel voor de rechthoek als voor de groep 0 ingesteld voor de verticale richting in de sectie Beginbeweging en 0,0 in de sectie Eindbeweging. Er wordt geen waarde weergegeven in het horizontale veld van de sectie Beginbeweging omdat de groep is ingesteld op het verplaatsen naar links met een snelheid van 1 keer (dezelfde snelheid als) de schuifsnelheid, terwijl de rechthoek is ingesteld op 0.  

  1. De rechthoek is in feite vastgezet op zijn plaats en beweegt zich nooit, omdat alle waarden in zowel de velden Beginbeweging als Eindbeweging zijn ingesteld op 0. Als de pagina naar de hoofdpositie van de groep met de gloeilampillustratie schuift, wordt de groep naar links verplaatst en wordt deze zichtbaar, aangezien deze niet langer wordt verborgen door de rechthoek erboven. De gloeilampgroep bevindt zich een laag boven het element met het scherm van de mobiele telefoon, maar onder de omtrek van de telefoon, zodat het lijkt alsof de gloeilampillustratie op zijn plaats wordt geveegd (net als het overgangseffect dat plaatsvindt als u horizontaal over uw telefoon veegt). De gloeilampgroep bedekt de rechthoek met het verloop die eerder het telefoonscherm illustreerde.

Zoals uit dit eenvoudige voorbeeld blijkt, kunt u een combinatie van een bijzonder lange pagina, een aantal strategisch gelaagde elementen in het deelvenster Lagen en het tabblad Beweging van het deelvenster Scrolleffecten gebruiken om de illusie te wekken van in elkaar vallende puzzelstukjes als omlaag wordt geschoven op de pagina.

Schuivend menu

Het effect van het schuivende menu gebruikt veel van dezelfde werkwijzen als het stap-voor-stap effect. De elementen lijken in beeld te komen vliegen met het tabblad Beweging van het deelvenster Scrolleffecten. De rechthoeken verbergen enkele elementen tot deze klaar zijn om te worden onthuld in het paginaontwerp.

Dit voorbeeld gebruikt strategisch geplaatste groepen rechthoeken om een complex hoekig ontwerp weer te geven.

Bekijk de voorbeeldsite in een browser om te zien hoe het vliegtuig horizontaal van rechts naar links over de pagina vliegt, gevolgd door een aantal gestileerde menuopties en een achtergrond met een diagonaal gestreept verloop.

Ga als volgt te werk om een vergelijkbaar schuivend effect te maken:

  1. Kies Pagina > Pagina-eigenschappen in de weergave Ontwerpen. Stel een veel hogere waarde in in het veld Min. hoogte. In het sitevoorbeeld is de minimale hoogte van de pagina ingesteld op 4665 pixels.
  2. De vliegtuigafbeelding staat in een laag boven alle andere inhoud op de pagina en staat dus bovenaan in de lijst in het deelvenster Lagen. De afbeelding is ingesteld om zowel voor als na de hoofdpositie naar links te worden verplaatst in het tabblad Beweging van het deelvenster Scrolleffecten.
Effect van schuivende menu in scrolleffecten van Adobe Muse
Effect van schuivende menu in scrolleffecten van Adobe Muse

  1. Vier tekstkaders zijn zodanig geconfigureerd dat ze naar links het beeld in komen vliegen en verticaal worden gestapeld om het navigatiemenu te vormen. In de sectie Beginbeweging op het tabblad Beweging van het deelvenster Scrolleffecten heeft elk tekstkader dezelfde snelheid (1,25 keer de schuifsnelheid). Elk tekstkader heeft ook een andere hoofdpositie. Als de pagina omlaag wordt geschoven, schuift elk tekstkader netjes uitgelijnd naar de gewenste positie aan de linkerzijde in het ontwerp. Alle tekstkaders hebben de waarde 0,0 in de sectie Eindbeweging, zodat de menu-elementen niet meer van plaats veranderen als ze zich eenmaal op de juiste positie bevinden.
  2. De tekstkaders zijn gevuld met een effen achtergrondkleur, hoewel het op het eerste gezicht afbeeldingen lijken te zijn, omdat ze geen rechte verticale rand hebben, maar een diagonaal afgekapte zijkant. Dit effect wordt bereikt door een groep met drie rechthoeken in een laag boven de tekstkaders te plaatsen en deze rechthoeken te vullen met dezelfde effen kleur als de vulkleur van de browser.
Groepeer en rangschik de rechthoeken boven de menu-items om schuine linker- en rechterranden te maken.
Groepeer en rangschik de rechthoeken boven de menu-items om schuine linker- en rechterranden te maken.

  1. De animatie van het tekstkader wordt in eerste instantie verborgen door een andere groep rechthoeken, omdat de tekstkaders onder de groep zijn gerangschikt in het deelvenster Lagen. De groep is een combinatie van drie rechthoeken: een grotere rechthoek met een verticaal verloop en twee kleinere rechthoeken (een vierkante en een geroteerde) die zijn gevuld met dezelfde effen kleur als de bovenste kleur in het verloop.
  1. Als u naar beneden schuift om de onderzijde van de groep te bekijken, ziet u nog vier rechthoeken van verschillende breedte die zijn geroteerd en boven de rechteronderhoek van de grotere verlooprechthoek zijn uitgelijnd.
Roteer de rechthoeken die zijn gevuld met dezelfde kleur als de vulkleur van de pagina om de hoek van de met een verloop gevulde rechthoek af te snijden.
Roteer de rechthoeken die zijn gevuld met dezelfde kleur als de vulkleur van de pagina om de hoek van de met een verloop gevulde rechthoek af te snijden.

Groepen zijn ideaal als u meerdere elementen wilt combineren en deze als één item wilt besturen. In dit voorbeeld zijn scrolleffecten beweging toegepast op groepen verschillende rechthoeken, zodat de groep als een geheel wordt verplaatst.

Dit voorbeeld illustreert ook het creatieve gebruik van negatieve ruimte. Als er een effen achtergrondkleur is toegepast als browservulling, kunt u veel interessante uitknipeffecten tot stand brengen door rechthoeken die zijn gevuld met dezelfde kleur in een laag boven andere rechthoeken te plaatsen. Het is niet nodig illustraties te ontwerpen in een programma voor beeldbewerking en één afbeelding te plaatsen, u kunt rechthoeken gebruiken om afbeeldingen samen te stellen in de Muse-werkruimte.

In- en uitfaden

Dit voorbeeld van een geanimeerde zonsop- en ondergang wordt tot stand gebracht dankzij een combinatie van twee scrolleffecten: beweging en dekking. In dit voorbeeld wordt een met een verloopkleur gevulde pagina-achtergrond met één geplaatste PNG-afbeelding van de zon weergegeven. De PNG-afbeelding bevat transparante gebieden waardoor de vulkleur van de achtergrondpagina zichtbaar is.

Bekijk de voorbeeldsite in een browser om te zien hoe de zon van 100% transparantie dwars over de pagina infadet. Op het hoogtepunt is de zon volledig dekkend, maar als u de pagina verder naar beneden schuift, gaat de zon onder en wordt deze weer steeds transparanter totdat hij uitfadet.
Ga als volgt te werk om een vergelijkbaar fade-effect tot stand te brengen:

  1. Kies Pagina > Pagina-eigenschappen in de weergave Ontwerpen. Stel het veld Min. hoogte in op een hogere waarde dan door een standaardbeeldscherm kan worden weergegeven, zodat bezoekers de pagina kunnen schuiven. In het sitevoorbeeld is de minimale hoogte van de pagina ingesteld op 2988 pixels.
  2. De afbeelding van de zon wordt in het midden van de pagina geplaatst. De hoofdpositie wordt op het tabblad Beweging van het deelvenster Scrolleffecten ingesteld op 1410 pixels. Bekijk ook de instellingen voor de sectie Beginbeweging en Eindbeweging.
Stel de Beginbeweging en Eindbeweging voor het effect Vervagen in.
Stel de Beginbeweging en Eindbeweging voor het effect Vervagen in.

Deze instellingen zorgen ervoor dat de zon zich in een halfrond pad verplaatst, in een boog van de linkeronderzijde van de pagina naar het middelpunt (waar de hoofdpositie wordt bereikt) en vervolgens weer terug naar de rechteronderzijde van de pagina.

  1. Zorg dat de zon nog steeds is geselecteerd en klik op het tabblad Dekking om deze instellingen te bekijken. Positie 1 uitfaden is ingesteld op 726 pixels (boven de zon). Positie 2 uitfaden is ingesteld op 1925 pixels (onder de zon). De zon begint met een dekking van 0% (volledig transparant) en wordt vervolgens volledig dekkend als de pagina naar de hoofdpositie wordt geschoven. Als de pagina omlaag schuift voorbij de hoofdpositie van de zon, verandert de dekking van 100% in 0%, om een in- en uitfade-effect te bereiken.
Pas de mate van transparantie aan op het tabblad Dekking van het deelvenster Scrolleffecten.
Pas de mate van transparantie aan op het tabblad Dekking van het deelvenster Scrolleffecten.

  1. Test de pagina door Bestand > Voorvertoning van pagina weergeven in browser te kiezen. Schuif de pagina om te zien hoe de zon lijkt op te komen tijdens het infaden om vervolgens omlaag en naar rechts te worden verplaatst tijdens het uitfaden.
  2. Sluit de browser en ga terug naar de werkruimte van Muse.

Edge Animate

In dit voorbeeld wordt geïllustreerd hoe u uit Adobe Edge Animate geëxporteerde OAM-bestanden kunt besturen met scrolleffecten. In dit voorbeeld wordt de pagina gevuld met een verticaal verloop dat begint met een lichtturkooise kleur en overgaat in donkerblauw.

Dit geanimeerde effect wordt tot stand gebracht dankzij een combinatie van instellingen die zijn toegepast in de tabbladen Beweging en Edge Animate.

Drie instanties van hetzelfde OAM-bestand zijn horizontaal naast elkaar geplaatst om een rij met geanimeerde kompassen te maken. Wanneer u de voorbeeldsite in een browser bekijkt, komen de drie kompassen in beeld en blijven deze op hun positie staan. Elk van de drie kompassen lijkt met een andere snelheid te draaien, maar dat komt door de instellingen in het deelvenster Scrolleffecten, niet door de samenstelling van het Edge Animation-bestand.

Ga als volgt te werk om een vergelijkbaar effect met drie geplaatste OAM-bestanden tot stand te brengen:

  1. Kies Pagina > Pagina-eigenschappen in de weergave Ontwerpen. Stel een veel hogere waarde in in het veld Min. hoogte. In het sitevoorbeeld is de minimale hoogte van de pagina ingesteld op 7465 pixels.
  2. Selecteer alle drie instanties van het kompas op de pagina. Op het tabblad Beweging van het deelvenster Scrolleffecten ziet u dat alle drie OAM-bestanden dezelfde hoofdpositie- en bewegingsinstellingen hebben, omdat alle waarden worden weergegeven.
Maak een geanimeerd effect voor OAM-bestanden met behulp van scrolleffecten
Maak een geanimeerd effect voor OAM-bestanden met behulp van scrolleffecten

Als u het voorbeeld in een browser bekijkt, ziet u dat alle drie OAM-bestanden tegelijk omhoogspringen en vervolgens op een rij blijven staan, net alsof ze zijn vastgezet.

  1. Klik ergens buiten de kompassen om de selectie van de drie kompassen op te heffen en selecteer vervolgens alleen het linker kompas. Houd Shift ingedrukt terwijl u het kompas aan de rechterkant selecteert, zodat beide kompassen zijn geselecteerd. Open het tabblad Edge Animate van het deelvenster Scrolleffecten om de instellingen te bekijken.
Hef de selectie van alle drie de kompassen op en selecteer het kompas aan de linkerkant en de rechterkant.
Hef de selectie van alle drie de kompassen op en selecteer het kompas aan de linkerkant en de rechterkant.

De twee kompassen aan de zijkant zijn beide geconfigureerd om te worden herhaald in de tijdlijnanimatie en om steeds naar het volgende frame te gaan wanneer de pagina 350 pixels verder omlaag schuift.

  1. Hef de selectie van de twee kompassen aan de buitenzijde op. Selecteer het middelste kompas. Als u weer naar het tabblad Edge Animate kijkt, ziet u dat het veld Van frame wisselen om de is ingesteld op 400 pixels. Deze instelling zorgt ervoor dat de animatie in het midden zich langzamer verplaatst dan de twee buitenste kompassen.
Selecteer het kompas in het midden en selecteer de instellingen voor de scrolleffecten.
Selecteer het kompas in het midden en selecteer de instellingen voor de scrolleffecten.

U kunt interessante animatie-effecten maken door de snelheid van verschillende geplaatste Edge Animate-animaties te variëren ten opzichte van de schuifsnelheid van de pagina. U kunt bijvoorbeeld een school vissen maken, een lucht met bewegende wolken of andere effecten door meerdere versies van een OAM-bestand toe te voegen waarop verschillende instellingen voor scrolleffecten zijn toegepast.

Diapresentatie-effect

U kunt bepalen hoe de reeks afbeeldingen in een diapresentatiewidget wordt weergegeven ten opzichte van de manier waarop de pagina wordt geschoven. Hiertoe voegt u een diapresentatiewidget toe aan een pagina en vervolgens werkt u de diapresentatie-opties bij op het tabblad Diapresentatie van het deelvenster Scrolleffecten.

In dit voorbeeld bestaat de diapresentatie uit een reeks afbeeldingen die een met 360 graden geroteerde weergave van een rugzak tot stand brengen. U kunt vergelijkbare diapresentatieafbeeldingen maken door met een statief foto's te maken van een object dat op een draaiende standaard is geplaatst. Dit effect is handig voor een interactieve productbeschrijving, zodat potentiële klanten een product van alle kanten kunnen bekijken voordat ze het aanschaffen.

Ga als volgt te werk om een vergelijkbaar effect tot stand te brengen met gebruik van een diapresentatiewidget:

  1. Kies Pagina > Pagina-eigenschappen in de weergave Ontwerpen. Stel een veel hogere waarde in in het veld Min. hoogte. In het sitevoorbeeld is de minimale hoogte van de pagina ingesteld op 7465 pixels.
  2. Een tekstkader met de tekst ''Superpack'' is ingesteld op het gebruik van scrolleffecten. In het tabblad Beweging configureert u de Beginbeweging-instellingen zodanig dat de tekst van links naar rechts wordt verplaatst, en wel met dezelfde snelheid als de schuifsnelheid van de pagina. Voor de Eindbeweging-instellingen stelt u beide richtingen in op 0, zodat het tekstkader op zijn plaats blijft staan, net alsof het is vastgezet op de pagina.
     
Schakel het selectievakje Beweging in en configureer de scrolleffecten om het tekstkader naar rechts te verplaatsen.
Schakel het selectievakje Beweging in en configureer de scrolleffecten om het tekstkader naar rechts te verplaatsen.

  1. Open de Widget-bibliotheek en sleep een diapresentatiewidget naar het midden van de pagina, rechts van de uiteindelijke bestemming van het tekstkader.
  2. Gebruik de optie Afbeeldingen toevoegen in het menu Opties om de diapresentatie te vullen met afbeeldingsbestanden. 

Terwijl de diapresentatie is geselecteerd, kunt u de diapresentatiewidget selecteren en de Pin-interface in het regelpaneel gebruiken om de diapresentatie vast te zetten. U kunt ook experimenteren door een diapresentatiewidget Volledig scherm toe te voegen en deze te besturen met scrolleffecten. 

  1. Zorg dat de diapresentatie is geselecteerd en open het tabblad Diapresentatie van het deelvenster Scrolleffecten en schakel het selectievakje Diapresentatie in.
  2. Sleep de T-vormige handgreep of voer een waarde in het veld in om de hoofdpositie in te stellen. In dit voorbeeld is de hoofdpositie ingesteld op 1066 pixels.
  3. Schakel het keuzerondje Van dia wisselen om de in en stel het veld eronder in op 50 pixels.
Stel de presentatie zodanig in dat steeds naar de volgende afbeelding wordt gesprongen wanneer de pagina 50 pixels verder omlaag wordt geschoven.
Stel de presentatie zodanig in dat steeds naar de volgende afbeelding wordt gesprongen wanneer de pagina 50 pixels verder omlaag wordt geschoven.

  1. Test de pagina in Voorvertoning of in een browser. Schuif de pagina omlaag om te zien hoe de rugzak lijkt te roteren. U kunt ook afbeeldingen maken die omhoog lijken te vliegen of omlaag lijken te vallen door de diapresentatie te vullen met een aantal vrijwel identieke, maar net iets verschillende afbeeldingsbestanden, net als de frames in een geanimeerd GIF-bestand.
  2. Na het testen van de scrolleffecten gaat u terug naar de weergave Ontwerpen in Muse om de pagina's verder te bewerken.

Roll-ups

Met scrolleffecten kunt u een bijzonder lange pagina maken die wordt opgedeeld in secties die er totaal verschillend uitzien. Wanneer de bezoeker een pagina omlaag schuift, lijken de verschillende paginasecties omhoog te rollen, met geanimeerde teksteffecten en scheidingsranden die zijn gemaakt met een schaduweffect.

U kunt ankertags gebruiken of gewoon een opmerking toevoegen om bezoekers aan te moedigen de pagina omlaag te schuiven om alle secties te bekijken. Wanneer u onder aan de voorbeeldsite op de knop Back to Top klikt, ziet u de hele pagina voorbijvliegen terwijl de ankerkoppeling terugkeert naar de bovenkant van het paginaontwerp.

Ga als volgt te werk om een vergelijkbaar roll-upeffect tot stand te brengen:

  1. Kies Pagina > Pagina-eigenschappen in de weergave Ontwerpen. Stel een veel hogere waarde in in het veld Min. hoogte. In het sitevoorbeeld is de minimale hoogte van de pagina ingesteld op 16.990 pixels.
  2. Stel de vulkleur van de browser in het menu Vulling browser in op effen blauw.
Stel de vulkleur van de browser in in het menu Vulling browser.
Stel de vulkleur van de browser in in het menu Vulling browser.

  1. Zorg dat de hele pagina is geselecteerd en gebruik het menu Vulling om de paginakleur in te stellen op Geen, zodat de blauwe vulkleur van de browser zichtbaar is.
  2. Schuif de pagina omlaag tot ongeveer 2248 pixels vanaf de bovenkant. Teken met de tool Rechthoek een rechthoek van 3000 pixels breed en 2000 pixels hoog. Gebruik de tool Selecteren om de rechthoek op de pagina te centreren, waarbij beide zijden breder zijn dan het browservenster en dus uitsteken.
  3. Zorg dat de rechthoek nog steeds is geselecteerd en gebruik het menu Vulling om een effen groene vulkleur in te stellen. Gebruik het menu Effecten om een schaduweffect in te stellen.
Voeg een schaduweffect toe aan de rechthoek om een meer opvallende rand te maken.
Voeg een schaduweffect toe aan de rechthoek om een meer opvallende rand te maken.

  1. Zorg dat de groene rechthoek is geselecteerd en schakel het selectievakje Beweging in het tabblad Beweging van het deelvenster Scrolleffecten in. Sleep de T-vormige handgreep naar de hoofdpositie die is ingesteld op de bovenrand van de rechthoek. In deze voorbeeldsite is dat 2248 pixels.
  1. Stel in de sectie Beginbeweging de rechthoek zodanig in dat deze met een snelheid van 1,5 keer de schuifsnelheid omlaag wordt verplaatst. Stel alle andere richtingen in op 0.
  2. Maak met de tool Tekst een tekstveld bij de bovenrand van de groene rechthoek. In dit voorbeeld staat de volgende tekst in het tekstveld: ''This is the roll-up''. U kunt echter naar wens tekstinhoud invoeren en tekstopmaak toepassen.
  3. Zorg dat het tekstkader is geselecteerd en schakel het tabblad Beweging van het deelvenster Scrolleffecten in. Sleep de T-vormige handgreep om deze uit te lijnen met de bovenrand van de groene rechthoek en werk de instellingen bij om te bepalen hoe het tekstkader wordt weergegeven op basis van het schuiven van de pagina.
Lijn de T-vormige handgreep uit met de bovenrand van de groene rechthoek.
Lijn de T-vormige handgreep uit met de bovenrand van de groene rechthoek.

  1. Stel de richting omlaag bij Beginbeweging in op een verplaatsing van 1,5 keer de schuifsnelheid. Stel alle andere waarden in het deelvenster in op 0. Hierdoor wordt het tekstveld omlaag verplaatst, in dezelfde richting en met dezelfde snelheid als de groene rechthoek. Zowel de rechthoek als het tekstkader blijven in positie als de pagina voorbij hun hoofdposities wordt geschoven.
  2. Als u op Voorvertoning klikt, kunt u omlaag schuiven en zien hoe de groene rechthoek en het tekstveld van boven af in beeld komen rollen. Klik op Ontwerpen wanneer u klaar bent met testen en de pagina verder wilt bewerken.
  3. Gebruik het menu Weergave om uit te zoomen naar 10% van het siteontwerp. Selecteer de groene rechthoek en het tekstveld. Houd Option/Alt ingedrukt terwijl u de twee elementen lager op de pagina sleept om deze te dupliceren. Stel de vulkleur van de gedupliceerde rechthoek in op donkerblauw en werk de tekstinhoud bij met de tool Tekst.
Werk de vulkleur voor de achtergrond van de gedupliceerde rechthoek bij en wijzig de inhoud van het tekstkader voor de nieuwe sectie van de pagina.
Werk de vulkleur voor de achtergrond van de gedupliceerde rechthoek bij en wijzig de inhoud van het tekstkader voor de nieuwe sectie van de pagina.

In dit voorbeeld bevat het gedupliceerde tekstkader de tekst ''Use it to drastically alter the appearance of your website''. U kunt echter elke gewenste tekst invoeren voor identificatie van de donkerblauwe sectie van de pagina.

  1. Met de tool Selecteren plaatst u de gedupliceerde rechthoek en het tekstkader ongeveer 5448 pixels lager dan de bovenrand van de pagina.
  2. Zorg dat de donkerblauwe rechthoek is geselecteerd en schakel het tabblad Beweging van het deelvenster Scrolleffecten in. De hoofdpositie is automatisch bijgewerkt naar de nieuwe locatie van de rechthoek (5448 px) en de neerwaartse verplaatsing in de sectie Beweging is nog steeds ingesteld op een snelheid van 1,5 keer de schuifsnelheid (en alle andere waarden zijn ingesteld op 0). Als u het gedupliceerde tekstkader controleert, ziet u dat de scrolleffecten voor het gedupliceerde element ook behouden zijn.
  3. Herhaal stap 12 en 13 nog vier keer, zodat u in totaal zes verschillende grote rechthoeken met tekstkaders erboven hebt gemaakt. Op elke rechthoek zijn het schaduweffect en de scrolleffectinstellingen al toegepast. Plaats de laatste vier rechthoeken op de volgende hoofdposities: 8648 pixels, 11.852 pixels, 15.058 pixels en 18.251 pixels, zodat de verschillende secties met ongeveer 1200 pixels van elkaar gescheiden zijn.
  4. Gebruik het menu Vulling om de rechthoeken te vullen met verschillende kleuren. Experimenteer door zowel vullingen met effen kleuren als met verloopkleuren toe te passen, zodat elke sectie van de pagina in het oog springt en contrasteert met de andere secties.
  5. Werk de tekstinhoud voor elke sectie bij met de tool Tekst. U kunt de tekst bijvoorbeeld aan de achtergrondkleur van de rechthoek eronder aanpassen: ''Dit is de blauwe sectie''.
  6. Test de pagina door Bestand > Voorvertoning van pagina weergeven in browser te kiezen. Schuif de pagina om te zien hoe de verschillende paginasecties in beeld verschijnen en vervolgens worden vervangen door de volgende sectie.
  7. Sluit de browser en ga terug naar de werkruimte van Muse.

Dynamische tekst

U kunt ongebruikelijke typografische ontwerpen maken met een combinatie van de scrolleffecten voor beweging en de Adobe Edge-weblettertypen. Met weblettertypen kunt u tekst opmaken aan de hand van een uitgebreid aantal lettertypen dat wordt geladen als de pagina wordt geladen. U hoeft geen afbeeldingen van in een beeldbewerkingsprogramma gemaakte tekst te plaatsen en te animeren, maar kunt mooie pagina's maken die u gemakkelijker kunt bijwerken met Edge-weblettertypen. De scrolleffecten zorgen bovendien voor dramatische animatie als de pagina omlaag wordt geschoven.

Ga als volgt te werk om een vergelijkbaar effect met dynamische tekst te maken:

  1. Kies Pagina > Pagina-eigenschappen in de weergave Ontwerpen. Stel een veel hogere waarde in in het veld Min. hoogte. In het sitevoorbeeld is de minimale hoogte van de pagina ingesteld op 4854 pixels.
  2. Stel de vulkleur van de pagina in op Geen. De vulkleur van de browser is niet van belang, omdat de pagina in de volgende stap wordt bedekt door een lange rechthoek.
  3. Teken met de tool Rechthoek een grote rechthoek van ongeveer 1159 pixels breed en 4854 pixels hoog. Gebruik het menu Vulling om de rechthoek te vullen met een effen kleur of een kleurverloop. In dit voorbeeld wordt een van blauwgroen naar paarsrood verlopende kleur toegepast als vulling. Centreer de rechthoek met de tool Selecteren, zodat de rechthoek het gehele browsergebied vult. U kunt desgewenst uitzoomen om ervoor te zorgen dat de rechthoek op de pagina wordt gecentreerd.
Zoom uit en plaats de rechthoek in het midden van de lange pagina.
Zoom uit en plaats de rechthoek in het midden van de lange pagina.

  1. Als u de rechthoek hebt gecentreerd, stelt u de vergroting via het menu Weergave weer in op 100%.
  2. Aan de linkerkant van de pagina maakt u een aantal tekstkaders met de tool Tekst. In dit voorbeeld zijn er in totaal vijf tekstkaders. De inhoud van elk tekstkader wordt hieronder vermeld, maar u kunt elke gewenste tekst in elk tekstkader typen:
    • Five Frames
    • Scrolling
    • At Different Speeds Will
    • Create
    • Dynamic Tension

U kunt desgewenst een aantal tekstkaders dupliceren en daar vervolgens iets verschillende opmaak op toepassen. In dit voorbeeld is het tekstkader met het woord 'Create' gedupliceerd en worden de twee versies in lagen boven elkaar geplaatst om een lichtblauw slagschaduweffect tot stand te brengen.

  1. Gebruik de tool Tekst om elk van de tekstkaders te selecteren. Gebruik het deelvenster Tekst (of de opties voor tekstopmaak in het regelpaneel) om verschillende weblettertypen, tekengrootten, kleuren en andere typografie-instellingen toe te passen en elk tekstkader te laten opvallen.
  2. Selecteer alle tekstkaders. Als deze geselecteerd zijn, opent u het tabblad Beweging van het deelvenster Scrolleffecten. Voer dezelfde numerieke waarde in om de hoofdpositie voor alle geselecteerde tekstkaders tegelijk in te stellen. (In dit voorbeeld is de hoofdpositie ingesteld op 1372 pixels.) Stel ook de horizontale richting voor zowel de sectie Beginbeweging als Eindbeweging in op rechts. Stel alle verticale richtingen voor de secties Beginbeweging en Eindbeweging in op 0, zodat de tekstkaders zich niet verticaal verplaatsen.
  3. Klik bij de tekstkaders vandaan en klik vervolgens afzonderlijk op elk tekstkader. Voer enigszins verschillende waarden in voor elk van de tekstkaders. In de onderstaande lijst is de eerste waarde de Beginbeweging-snelheid en de tweede waarde de Eindbeweging-snelheid voor de horizontale richting (naar rechts):
    • Five Frames: 0,9x, 0,1x
    • Scrolling: 0,12x, 0,5x
    • At Different Speeds Will: 0,7x, 0,17x
    • Create: 1,1x, 0,005x
    • Dynamic Tension.: 1x, 0,01x

Opmerking:

Als u ervoor kiest om een tekstkader te dupliceren om een slagschaduweffect te bereiken, kunt u twee of meer versies van een tekstkader groeperen en deze als één groep besturen wanneer u scrolleffecten toepast.

  1. Gebruik de tool Tekst om een tekstveld te maken en typ het nummer 5 aan de rechterkant van de pagina. U kunt er ook weer voor kiezen om het tekstkader te dupliceren en vervolgens verschillende kleuren en tekstopmaak toepassen om de illusie van schuine randen en slagschaduwen te wekken. Als u duplicaten van een tekstkader maakt voor ontwerpdoeleinden, groepeert u deze tekstkaders zodat u scrolleffecten op de groep kunt toepassen.
  2. Zorg dat het tekstveld met het cijfer 5 is geselecteerd en schakel het selectievakje Beweging in het tabblad Beweging van het deelvenster Scrolleffecten in. Stel de hoofdpositie op numerieke wijze in of door de T-vormige handgreep te slepen. (In dit voorbeeld is de hoofdpositie ingesteld op 1425 pixels.) Stel het element in de sectie Beginbeweging zodanig in dat het met een snelheid van 1 keer de schuifsnelheid naar links wordt verplaatst. In de sectie Eindbeweging stelt u het element zodanig in dat het met een snelheid van 0,01 keer de schuifsnelheid naar links wordt verplaatst.
  3. Test de pagina door Bestand > Voorvertoning van pagina weergeven in browser te kiezen. Schuif de pagina om te zien hoe de vijf tekstkaders vanaf de linkerkant in beeld komen, terwijl het tekstkader met het cijfer 5 vanaf de rechterkant in beeld komt. Schuif omhoog en omlaag om de animatie van de tekstkaders te bekijken.
  4. Sluit de browser en ga terug naar de werkruimte van Muse.
     

Gestapeld menu

U kunt aansprekende interactieve sitenavigatie maken met behulp van scrolleffecten, zodat de verschillende knoppen het zichtbare gebied op de pagina binnen komen vliegen en zich vervolgens keurig uitlijnen om een menubalk te vormen. Als de pagina in dit voorbeeld wordt verschoven, worden vier rolloverknoppen vanaf de onderzijde van de pagina omhoog verplaatst en op hun positie vergrendeld om een verticale menubalk weer te geven.

Als de vier knoppen eenmaal zijn uitgelijnd, komt achtergrondinhoud (een gloeilampillustratie, gekleurd achtergrondgebied, tekstkader en diagonale hoekstrepen) van beide zijden van de pagina in beeld vliegen om een sectie van de site te maken.

Hoewel de knoppen in dit voorbeeld niet gekoppeld zijn, kunt u desgewenst koppelingen toevoegen met het vervolgkeuzemenu Hyperlink, zodat bezoekers op de knoppen kunnen klikken om een nieuwe pagina te laden of ankertags kunnen gebruiken om naar een andere locatie op de huidige pagina te springen.

Ga als volgt te werk om een vergelijkbaar gestapeld menueffect tot stand te brengen:

  1. Kies Pagina > Pagina-eigenschappen in de weergave Ontwerpen. Stel een veel hogere waarde in in het veld Min. hoogte. In het sitevoorbeeld is de minimale hoogte van de pagina ingesteld op 7465 pixels.
  2. Stel de vulkleur van de pagina in op Geen en stel een effen kleur in als vulling voor de browser. In de voorbeeldsite wordt de browservulling ingesteld op een lichtbruine kleur.
  3. Maak een nieuw tekstkader met de tool Tekst. Typ het woord ''Home''. Voeg een achtergrondkleur toe aan het tekstkader met de opmaakopties in het regelpaneel. Werk ook de opmaakopties bij om de tekst naar wens op te maken. Gebruik de handgrepen aan weerszijden van de knop om de breedte en hoogte uit te breiden tot ongeveer 300 pixels breed en 115 pixels hoog.
Gebruik de opties in het regelpaneel om het tekstkader op te maken.
Gebruik de opties in het regelpaneel om het tekstkader op te maken.

  1. Open het deelvenster Staten. Selecteer de staat Rollover en voeg een andere vulkleur toe (of maak de staat naar wens op) om een rolloverknop te maken.
Selecteer de staat Rollover en maak de knop zodanig op dat deze er anders ziet dan de staat Normaal.
Selecteer de staat Rollover en maak de knop zodanig op dat deze er anders ziet dan de staat Normaal.

  1. Als u de staat Rollover hebt bijgewerkt, selecteert u nogmaals de staat Normaal.
  2. Open het tabblad Beweging van het deelvenster Scrolleffecten. Schakel het selectievakje Beweging in terwijl de knop is geselecteerd. Stel de hoofdpositie in door de T-vormige handgreep te slepen of door een numerieke waarde in te voeren. Stel de sectie Beginbeweging ook in op een verplaatsing omhoog van 0,75 keer de schuifsnelheid. Laat alle andere velden ingesteld op 0.
Schakel de scrolleffecten op het tabblad Beweging in en stel vervolgens de richting en snelheid van de verplaatsing in.
Schakel de scrolleffecten op het tabblad Beweging in en stel vervolgens de richting en snelheid van de verplaatsing in.

  1. Houd Option/Alt ingedrukt terwijl u de Home-knop naar een lagere positie op de pagina sleept. Hiermee wordt een duplicaat van de knop gemaakt. Zorg ervoor dat het duplicaat verticaal is uitgelijnd met de oorspronkelijke Home-knop. Als de twee elementen zijn uitgelijnd en het duplicaat nog steeds geselecteerd is, wordt er tijdelijk een donkerblauwe slimme hulplijn weergegeven in het midden.
Houd Option/Alt ingedrukt en sleep een gedupliceerde kopie van de knop om deze verticaal uit te lijnen.
Houd Option/Alt ingedrukt en sleep een gedupliceerde kopie van de knop om deze verticaal uit te lijnen.

  1. Verplaats de gedupliceerde knop omlaag naar ongeveer 460 pixels onder de originele knop.
  2. Herhaal stap 7 en 8 om de knop nog twee keer te dupliceren om in totaal vier knoppen te maken die evenredig over de pagina zijn verspreid. Gebruik de tool Tekst om de tweede, derde en vierde knop van de bovenkant te bewerken en de tekstinhoud bij te werken met de labels: Products, Photos, Contact Us.
Bewerk de tekst in de tekstkaders om elk knoplabel uniek te maken.
Bewerk de tekst in de tekstkaders om elk knoplabel uniek te maken.

Tijdens het dupliceren van de eerste Home-knop hebt u de opmaak van het tekstkader en de inhoud ervan ook gekopieerd, alsmede de instellingen voor de scrolleffecten. Als u een van de gedupliceerde knoppen selecteert en in het deelvenster Scrolleffecten kijkt, ziet u dat de instellingen in het tabblad Beweging overeenkomen met de instellingen die zijn toegepast op de Home-knop en dat de hoofdpositie voor elke knop zich 460 pixels onder de vorige knop bevindt (dezelfde afstand als de ruimte tussen elke knop op de pagina).

  1. Bereken de totale hoogte van de vier knoppen wanneer deze op de uiteindelijke locatie zijn uitgelijnd door de hoogte en tussenruimte bij elkaar op te tellen. In de voorbeeldsite zijn de knoppen 116 pixels hoog en is er een tussenruimte van 4 pixels tussen de knoppen. Dat betekent dat de totale hoogte van de verticale menubalk (in samengestelde vorm) 476 pixels is. Teken met de tool Rechthoek een rechthoek die net zo breed is als de gewenste breedte van de paginasectie en even hoog als de menubalk. In dit voorbeeld is de rechthoek 931 pixels breed en 476 pixels hoog.
  2. Als u het ontwerp van de voorbeeldsite wilt herhalen, kunt u de vulkleur van de rechthoek instellen op lichtroze, een lichtere tint dan de staat Normaal van de knoppen. U kunt desgewenst ook afgeronde hoeken maken door een waarde voor de hoekstraal in te voeren in het regelpaneel. In dit voorbeeld zijn alle vier hoeken ingesteld op 10 pixels.
Selecteer de rechthoek en stel de hoekstraal voor afgeronde hoeken in.
Selecteer de rechthoek en stel de hoekstraal voor afgeronde hoeken in.

  1. Gebruik de tool Selecteren om de rechthoek uit te lijnen, zodat de bovenrand zich ongeveer 5094 pixels van de bovenrand van de pagina bevindt. Zorg er ook voor dat de linkerzijde van de rechthoek verticaal is uitgelijnd met de linkerkant van de knoppen. In de voorbeeldsite staan de rechthoek en de knoppen allemaal op 14 pixels van de linkerkant van de pagina. U kunt deze instellingen zien wanneer u een element selecteert en het deelvenster Transformatie opent. De X-waarde is de afstand vanaf de linkerzijde (14 pixels) en de Y-waarde is de afstand vanaf de bovenrand van de pagina (5094 pixels).
  2. Zorg dat de rechthoek nog steeds is geselecteerd en open het deelvenster Scrolleffecten en schakel het selectievakje Beweging op het tabblad Beweging in. Stel de hoofdpositie in op 4979.
  3. Stel de Beginbeweging in op een verplaatsing naar rechts van 1 keer de schuifsnelheid. Laat alle andere velden in het tabblad Beweging op 0 staan.
Pas scrolleffecten toe om de rechthoek naar de pagina te verplaatsen door vanaf de linkerzijde naar rechts in beeld te komen vliegen naar de juiste positie.
Pas scrolleffecten toe om de rechthoek naar de pagina te verplaatsen door vanaf de linkerzijde naar rechts in beeld te komen vliegen naar de juiste positie.

  1. Om ervoor te zorgen dat de rechthoek achter de vier knoppen wordt gerangschikt, kiest u Object > Naar achtergrond als de rechthoek is geselecteerd.
  2. Kies Bestand > Plaatsen en blader om een afbeeldingsbestand te selecteren. Klik vervolgens eenmaal op de pagina om het bestand te plaatsen. In dit voorbeeld wordt een PNG-bestand met transparantie geplaatst om een gloeilampillustratie weer te geven. De gloeilamp wordt boven op de grote rechthoek geplaatst, aan de rechterzijde ver bij het gebied voor de menuknoppen vandaan. In dit voorbeeld wordt de afbeelding op 501 pixels vanaf de linkerkant (X-positie) en op 5245 pixels vanaf de bovenrand van de pagina (Y-positie) geplaatst.
  3. Om ervoor te zorgen dat de geplaatste afbeelding achter de vier knoppen wordt gerangschikt, kiest u Object > Naar achtergrond als de afbeelding is geselecteerd. Het is de bedoeling om de geplaatste afbeelding boven de grote rechthoek maar achter de vier knoppen weer te geven.
  4. Zorg dat de geplaatste afbeelding is geselecteerd en open het tabblad Beweging van het deelvenster Scrolleffecten en schakel het selectievakje Beweging in. Stel de hoofdpositie in op de gewenste waarde. In de voorbeeldsite is dat 4979 pixels.
  5. Stel in de sectie Beginbeweging de waarde voor een verplaatsing naar rechts in bij 0,75 keer de schuifsnelheid. Stel alle andere richtingswaarden in op 0.
Stel de Beginbeweging in op een verplaatsing naar rechts bij dezelfde snelheid als de rechthoek.
Stel de Beginbeweging in op een verplaatsing naar rechts bij dezelfde snelheid als de rechthoek.

  1. Maak een tekstkader met de tool Tekst. In het voorbeeldbestand heeft het tekstkader de inhoud ''Stack linked text frames with high contrast roll-overs to create unusual menus''. U kunt echter elke gewenste tekst invoeren. Maak de tekst naar wens op met de opmaakopties in het regelpaneel. In dit voorbeeld is geen vulkleur toegepast op de achtergrond van het tekstkader.
  2. Plaats het tekstkader met de tool Selecteren rechts van de geplaatste afbeelding. In dit voorbeeld is het tekstkader ingesteld op een X-waarde van 357 pixels (vanaf de linkerkant) en een Y-waarde van 5136 pixels (vanaf de bovenkant). De feitelijke locatie is afhankelijk van de tekstinhoud en de opmaakopties die u op het tekstkader toepast.
  3. Zorg dat het tekstkader is geselecteerd en kies Object > Naar achteren om het te rangschikken of verplaats het tekstkader in het deelvenster Lagen zodat het achter de vier knoppen, maar boven de grote rechthoek wordt weergegeven.
  4. Schakel het selectievakje Beweging in het deelvenster Scrolleffecten in. Stel de hoofdpositie in door de T-vormige handgreep te slepen of door een waarde in te voeren. In de voorbeeldsite is de hoofdpositie ingesteld op 4979 pixels, dezelfde hoofdpositiewaarde die door de geplaatste afbeelding (de gloeilamp) wordt gebruikt.
  5. Stel het tekstkader in de sectie Beginbeweging in om met een snelheid van 0,5 keer de schuifsnelheid naar links te worden verplaatst. Stel alle andere velden in op 0.
Het tekstkader wordt ingesteld om langzamer naar links (de tegenovergestelde richting van de rechthoek en de geplaatste afbeelding) te worden verplaatst.
Het tekstkader wordt ingesteld om langzamer naar links te verplaatsen.

Het standaardgedeelte van het gestapelde menu is nu voltooid. U kunt echter nog één extra ontwerpelement toevoegen. U kunt namelijk verschillende geroteerde rechthoeken toevoegen boven de rechteronderhoek van de grote rechthoek, net als de manier waarop in het voorbeeld van het schuivende menu geroteerde rechthoeken werden gebruikt om een diagonaal streepeffect toe te voegen.

  1. Teken met de tool Rechthoek enkele rechthoeken van verschillende breedte. Vul de rechthoeken met dezelfde kleur als de achtergrondkleur die als browservulling is toegepast. Op deze manier worden de rechthoeken pas zichtbaar wanneer de grote rechthoek naar rechts wordt geplaatst en achter de rechthoeken belandt. U kunt de diagonale rechthoeken desgewenst groeperen, zodat u er als één element mee kunt werken.
Roteer een aantal rechthoeken, zodat er een diagonaal streepeffect ontstaat in de rechteronderhoek van de grotere rechthoek.
Roteer een aantal rechthoeken, zodat er een diagonaal streepeffect ontstaat in de rechteronderhoek van de grotere rechthoek.

  1. Gebruik indien nodig het deelvenster Lagen of kies Object > Naar achtergrond om de grotere rechthoek helemaal achteraan te rangschikken, achter alle andere elementen op de pagina.
  2. Test uw vorderingen regelmatig door op Voorvertoning te klikken of de pagina in een browser te bekijken en omlaag te schuiven om te zien hoe het gestapelde menu op zijn plaats belandt. Ga terug naar Muse als u klaar bent met testen. 

Bewegende achtergrond

Als u een achtergrondeffect met beweging tot stand wilt brengen, kunt u een aantal grote rechthoeken maken die zijn gevuld met naast elkaar geplaatste achtergrondafbeeldingen die de lengte van een lange pagina bedekken. In dit voorbeeld wordt het tabblad Schuiven van het menu Vulling (in plaats van het tabblad Beweging van het deelvenster Scrolleffecten) gebruikt om de bewegingsinstellingen toe te passen.

Ga als volgt te werk om een vergelijkbaar achtergrondeffect met beweging tot stand te brengen:

  1. Kies Pagina > Pagina-eigenschappen in de weergave Ontwerpen. Stel een veel hogere waarde in in het veld Min. hoogte. In het sitevoorbeeld is de minimale hoogte van de pagina ingesteld op 6254 pixels.

Opmerking:

In dit voorbeeld maakt het niet uit of u een kleur voor de browservulling instelt, omdat de pagina met rechthoeken is bedekt. Stel de vulkleur van de pagina in op Geen.

  1. Teken boven aan de pagina een grote rechthoek met de tool Rechthoek. In de voorbeeldsite is de rechthoek 1159 pixels breed en 1312 pixels hoog. Gebruik de tool Selecteren om de rechthoek op de pagina te centreren, waarbij beide zijden breder zijn dan het browservenster en dus uitsteken.
  2. Zorg dat de rechthoek nog steeds is geselecteerd en gebruik het menu Vulling om een achtergrondafbeelding in te stellen. Stel het menu Aanpassen in op Naast elkaar om de afbeeldingen naast elkaar te plaatsen.
Stel naast elkaar geplaatste achtergrondafbeeldingen in als de vulling van de rechthoek.
Stel naast elkaar geplaatste achtergrondafbeeldingen in als de vulling van de rechthoek.

  1. U kunt desgewenst een schaduweffect instellen in het menu Effecten om de rechthoek een dramatische rand te geven.
  2. Zorg dat de gevulde rechthoek is geselecteerd en open het tabblad Schuiven van het menu Vulling. Schakel het selectievakje Beweging in en sleep de T-vormige handgreep of typ een getal in het veld om de hoofdpositie in te stellen. In de voorbeeldsite is de hoofdpositie ingesteld op 512 pixels. U kunt de handgreep echter desgewenst samenvouwen om deze uit te lijnen met de bovenrand van de rechthoek.
  3. Stel in de sectie Beginbeweging de richting in op een verplaatsing naar links en omlaag en stel de snelheid voor beide in op 0,2 keer de schuifsnelheid. Herhaal deze instellingen in de sectie Eindbeweging. 
Stel de bewegingsopties in op het tabblad Schuiven van het menu Vulling.
Stel de bewegingsopties in op het tabblad Schuiven van het menu Vulling.

  1. Herhaal stap 2 - 6 om nog een gevulde rechthoek te maken. Plaats de nieuwe rechthoek recht onder de eerste rechthoek die u hebt gemaakt, zodat er niets van de browservulling zichtbaar is en er geen ruimte is tussen de twee rechthoeken. Vul de nieuwe rechthoek met een andere achtergrondvulling van naast elkaar geplaatste afbeeldingen.
  2. Herhaal stap 7 om een derde grote rechthoek te maken die recht onder de tweede rechthoek wordt geplaatst. Stel in het menu Vulling andere naast elkaar geplaatste achtergrondafbeeldingen in. Het is nu handig om uit te zoomen via het menu Weergave om alle rechthoeken te zien en deze verticaal uit te lijnen op de pagina.
Zoom uit en bepaal de verticale positie van de drie grote rechthoeken met de tool Selecteren.
Zoom uit en bepaal de verticale positie van de drie grote rechthoeken met de tool Selecteren.

Opmerking:

In de voorbeeldsite is de derde rechthoek langer dan de eerste twee. U kunt de handgrepen slepen om de derde gedupliceerde rechthoek langer te maken. Of u kunt een vierde rechthoek maken om het resterende paginagebied aan de onderkant te vullen.  

  1. Zorg dat de tweede rechthoek is geselecteerd en open het tabblad Schuiven van het menu Vulling. Werk de sectie Beginbeweging bij om de rechthoek met een snelheid van 0,3 keer de schuifsnelheid naar rechts te verplaatsen. Pas in de sectie Beginbeweging dezelfde instellingen toe om de rechthoek met een snelheid van 0,3 keer de schuifsnelheid naar rechts te verplaatsen. Laat beide verticale richtingsvelden op 0 staan.
Stel de Beginbeweging en Eindbeweging zodanig in dat de tweede rechthoek naar rechts wordt verplaatst.
Stel de Beginbeweging en Eindbeweging zodanig in dat de tweede rechthoek naar rechts wordt verplaatst.

  1. Selecteer de derde rechthoek en werk de instellingen in het tabblad Schuiven van het menu Vulling bij. Stel de sectie Beginbeweging in op een verplaatsing omhoog met een snelheid van 0,25 keer de schuifsnelheid en op een verplaatsing naar links met een snelheid van 0,6 keer de schuifsnelheid. Pas dezelfde instellingen toe in de sectie Eindbeweging voor de derde rechthoek.
  2. Test de pagina door Bestand > Voorvertoning van pagina weergeven in browser te kiezen. Schuif de pagina om te zien hoe alle naast elkaar geplaatste rechthoeken diagonaal worden verplaatst tot u omlaag schuift naar de onderkant van de pagina. Als u omhoog schuift, blijven de rechthoeken zich ook verplaatsen.
  3. Sluit de browser en ga terug naar de werkruimte van Muse.

Maskers

In dit voorbeeld lijkt het alsof een staafdiagram zich via een animatie naar zijn positie verplaatst. Een roze pijlillustratie wordt langer en kronkelt zich een weg boven en achter de staven in het diagram. Hoewel de staven in het diagram vanaf de onderkant langer lijken te worden, zijn het in feite effen gekleurde rechthoeken waarop scrolleffecten voor beweging zijn toegepast. Deze scrolleffecten komen tevoorschijn van achter grotere witte rechthoeken (gevuld met dezelfde effen witte kleur als de achtergrondkleur van de pagina).

In dit voorbeeld wordt een aantal technieken gebruikt in combinatie met scrolleffecten. De elementen worden voor en achter elkaar gerangschikt via het deelvenster Lagen. Boven op de diagramelementen worden witte rechthoeken getekend. Wanneer de witte rechthoeken het staafdiagram bedekken, zijn de staven en de pijl verborgen, net alsof ze gemaskeerd zijn. De witte rechthoeken en het diagram gebruiken de 0-instellingen in de scrolleffecten beweging, zodat ze niet worden verplaatst terwijl de pagina wordt verschoven. Op de staven en de roze pijl in een lagere laag zijn scrolleffecten beweging toegepast die ervoor zorgen dat ze omhoog worden verplaatst en in beeld komen als het diagram wordt samengesteld.

Ga als volgt te werk om een vergelijkbaar maskereffect tot stand te brengen:

  1. Kies Pagina > Pagina-eigenschappen in de weergave Ontwerpen. Stel een veel hogere waarde in in het veld Min. hoogte. In het sitevoorbeeld is de minimale hoogte van de pagina ingesteld op 6076 pixels.
  2. Stel de vulling voor de pagina en de browser in op een effen witte kleur (of elke kleur die u maar wilt, maar gebruik later dezelfde kleur om de maskerrechthoeken te vullen).
  3. Teken een grote rechthoek op de pagina met de tool Rechthoek. De rechthoek in de voorbeeldsite is 804 pixels breed en 489 pixels hoog.
  4. Stel de vulkleur van de rechthoek in op Geen. Stel de lijnkleur van uw keuze in. Stel in het menu Lijn de linker- en onderrand van de rechthoek in op het weergeven van een lijn met een dikte van 20, terwijl de boven- en rechterrand worden ingesteld op 0 om de lijn te verbergen. Zo ontstaat het fundament van het staafdiagram.
     
Gebruik het menu Lijn om een lijn aan de linker- en onderrand van de rechthoek in te stellen.
Gebruik het menu Lijn om een lijn aan de linker- en onderrand van de rechthoek in te stellen.

  1. Zorg dat de rechthoek is geselecteerd en open het tabblad Beweging van het deelvenster Scrolleffecten. Stel de hoofdpositie in en typ 0 in alle vier velden. Dit betekent dat de rechthoek niet wordt verplaatst voor- of nadat de hoofdpositie is bereikt, zodat het element op zijn plaats blijft staan.
Voer 0 in in alle velden om de rechthoek op de pagina vast te zetten.
Voer 0 in in alle velden om de rechthoek op de pagina vast te zetten.

  1. Teken twee grotere rechthoeken met de tool Rechthoek. Teken de eerste rechthoek en lijn deze uit met de linkerkant van het diagram. In de voorbeeldsite is de rechthoek 657 pixels breed en 1810 pixels hoog.
  2. Teken de tweede rechthoek onder het diagram, waarbij u de rechthoek uitlijnt met de onderrand van het diagram. In de voorbeeldsite is de rechthoek 1002 pixels breed en 1541 pixels hoog.
  3. Stel de vulkleur van beide rechthoeken in op wit (of dezelfde kleur als de vulkleur van de browser) en de lijn op 0. Gebruik de tool Selecteren om de rechthoeken uit te lijnen met de twee zijden van het diagram.
Plaats de twee grotere rechthoeken links en onder het diagram.
Plaats de twee grotere rechthoeken links en onder het diagram.

  1. Zorg dat de rechthoeken zijn geselecteerd, klik met de rechtermuisknop en kies Object > Groeperen om de twee maskerrechthoeken te groeperen.
  2. Zorg dat de groep met rechthoeken is geselecteerd en open het tabblad Beweging van het deelvenster Scrolleffecten. Stel de hoofdpositie in (in het voorbeeld 1516 pixels) en typ 0 in alle vier velden. Met deze instelling wordt de groep witte rechthoeken niet verplaatst voor- of nadat de hoofdpositie is bereikt. De groep blijft op zijn plaats staan, net als de buitenste tabel voor het diagram.
  3. Gebruik het deelvenster Lagen om de groep tijdelijk te verbergen en te vergrendelen.
  4. Schuif omlaag naar de ruimte onder de groep en teken met de tool Rechthoek in totaal vijf rechthoeken die allemaal even breed zijn. In de voorbeeldsite zijn alle staven 74 pixels breed en hebben ze verschillende hoogten. Van links naar rechts hebben de vijf rechthoeken in dit voorbeeld een hoogte van 141, 188, 292, 444 en 583 pixels. Alle rechthoeken worden gevuld met dezelfde groene kleur als de lijn die de linker- en onderrand van het diagram definieert.
Verspreid de vijf rechthoeken over de pagina.
Verspreid de vijf rechthoeken over de pagina.

  1. De locatie van de rechthoeken (van links naar rechts) wordt hieronder aan de hand van hun X- en Y-waarden vermeld:
    • X: 200 Y: 2622
    • X: 330 Y: 2797 
    • X: 460 Y: 3081 
    • X: 590 Y: 3304 
    • X: 721 Y: 3499
  2. Vervolgens selecteert u alle rechthoeken, te beginnen met de rechthoek helemaal links, vervolgens de rechthoek ernaast, dan die daarnaast, enz. Selecteer elke rechthoek, schakel het selectievakje Beweging op het tabblad Beweging van het deelvenster Scrolleffecten in en stel de volgende hoofdposities in:
    • 2099
    • 2321
    • 2709
    • 3084
    • 3441
  3. Als alle rechthoeken zijn geselecteerd, werkt u de instellingen in het deelvenster Scrolleffecten bij, zodat de sectie Beginbeweging met een snelheid van 1 keer de schuifsnelheid omhoog wordt verplaatst. Stel alle andere velden in op 0.
     
Stel de bewegingswaarden voor alle vijf rechthoeken tegelijk in in het deelvenster Scrolleffecten.
Stel de bewegingswaarden voor alle vijf rechthoeken tegelijk in in het deelvenster Scrolleffecten.

  1. Plaats een PNG-bestand met transparantie op de pagina. In de voorbeeldsite is het PNG-bestand een illustratie van een roze pijl die naar boven zigzagt. Het PNG-bestand dat voor dit voorbeeld wordt gebruikt, is 695 pixels breed en 443 pixels hoog. Nadat u het bestand op de pagina hebt geplaatst, verplaatst u het naar de locatie X: 78 en Y: 3427.
  2. Rangschik het PNG-bestand in het deelvenster Lagen onder de eerste en derde staafrechthoeken (van links), maar boven de tweede, vierde en vijfde staaf.
Gebruik het deelvenster Lagen om de PNG-pijlafbeelding zodanig te rangschikken dat deze zich tussen de staven in het diagram door lijkt te weven.
Gebruik het deelvenster Lagen om de PNG-pijlafbeelding zodanig te rangschikken dat deze zich tussen de staven in het diagram door lijkt te weven.

  1. Zorg dat de pijlafbeelding is geselecteerd, open het tabblad Beweging van het deelvenster Scrolleffecten en schakel het selectievakje Beweging in. Stel de hoofdpositie in. (In het voorbeeld is de hoofdpositie ingesteld op 3238 pixels.) Stel de richtingen omhoog en naar rechts in de sectie Beginbeweging in en typ 0,25 keer de schuifsnelheid in beide Beginbeweging-velden. Stel beide velden in de sectie Eindbeweging in op 0.
Werk de instellingen voor beweging bij in het deelvenster Scrolleffecten.
Werk de instellingen voor beweging bij in het deelvenster Scrolleffecten.

  1. Toon en ontgrendel in het deelvenster Lagen de groep met twee witte rechthoeken die u eerder hebt verborgen en vergrendeld. Verplaats de groep boven de andere elementen, zodat deze boven op de andere inhoud op de pagina wordt weergegeven. Aangezien de groep bovenaan staat, fungeert deze als een masker en worden de staven en pijlillustraties alleen getoond als deze omhoog worden verplaatst in het kader van het diagram.
  2. Test de pagina door Bestand > Voorvertoning van pagina weergeven in browser te kiezen. Schuif de pagina om te zien hoe het staafdiagram op de juiste positie wordt geplaatst doordat de twee witte rechthoeken die de staven maskeren de diagramelementen verbergen totdat deze zich in het diagram bevinden.
  3. Sluit de browser en ga terug naar de werkruimte van Muse.

Voorbeelden van siteontwerpen die gebruikmaken van scrolleffecten

Ga naar de website van Demential Lab om de functie voor scrolleffecten in actie te zien.

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