I den här delen tar vi en titt på några av de många olika sätt som gör att man kan använda rullningseffekter för att lägga till interaktiva funktioner, unik webbplatsnavigering och uttrycksfull rörlig grafik till sina webbplatser.

Så här gör du för att komma igång:

1. Gå till exempelwebbplatsen och klicka på varje del för att se exempel på varje mål. Rulla ned på varje exempelsida för att se hur rullningseffekter styr hur sidelement visas.
2. Rulla till slutet av exempelwebbplatsen för att hämta .muse-filen.
3. Öppna exempelwebbplatsen och se över projektet i arbetsytan i Muse.
4. Öppna panelen Lager och expandera delen Innehåll för att se elementen som använts för att skapa varje exempel.

Bit-för-bit-effekt

Den här effekten får en uppsättning individuella element att flyga in och samlas i webbplatsens design när besökaren rullar nedåt på sidan. Grafik och textramar styrs med rullningseffekter som skapar interaktiv sammanslagning, som pusselbitar som sätts ihop. Det är ett spännande sätt att visa upp produktinformation på en webbsida.

Arbetsflödet i det här exemplet använder delen Startrörelse på fliken Rörelse i panelen Rullningseffekter för att få element att samlas i en design. Efter att varje bit är på plats sätts värdet för slutrörelse till 0 så att de befintliga elementen inte flyttar på sig när det kommer nya.

Följ de här stegen för att skapa en liknande bit-för-bit-effekt:

1. I vyn Design väljer du Sida > Sidegenskaper. Ställ in den minsta sidhöjden till ett mycket större värde. I webbplatsexemplet är den minsta sidhöjden satt till 14 120 pixlar.
2. Använd textverktyget för att skapa en textram och ange det önskade textinnehållet.
3. Öppna fliken Rörelse i panelen Rullningseffekter och markera kryssrutan Rörelse. I det här exemplet får inställningarna i Startrörelse textramen att röra sig nedåt och i läge i 0,25 gånger rullningshastigheten (en fjärdedel). När sidan når textramens tangentposition når textramen sin plats som angetts i designvyn. Sedan får inställningarna för slutlig rörelse (värdena 0 för båda riktningarna) det första elementet att stanna på plats som om elementet vore fäst.
4. En PNG-fil med genomskinlighet (en mobiltelefonkontur) är placerad under textramen. Det här elementet använder inställningarna på fliken Rörelse i panelen Rullningseffekter för att flyga in från vänster på sidan, flytta sig på plats och sedan stanna där.
5. I närheten av området bakom telefonkonturen följer ett mindre vitt element ett liknande mönster och flyger in från vänster på sidan och stannar sedan. Den vita grafiken simulerar högtalardelen högst upp på en mobiltelefon. Den här delen (som heter phone-earpiece.png) är placerad över mobiltelefonens kontur i panelen Lager så att den visas över telefonens kontur i designen. 
6. Direkt bakom högtalardelen flyger ett litet vitt element som simulerar telefonens Hem-knapp in från höger och härmar högtalardelen och visas över mobiltelefonens kontur i designen.
7. Sedan använder en ljust färgad rektangulär grafik med subtil toning som går från vit till ljusgrå fliken Rörelse från panelen Rullningseffekter för att röra sig på plats så att den passar perfekt i den genomskinliga mittdelen på mobiltelefonen. När den är på plats stannar den där och representerar mobiltelefonens skärm. Skärmelementet (phone-screen.png) är ett lager längst ned i panelen Lager, så den har ordnats för att visas bakom de andra elementen i webbsidans design.
8. En uppsättning med fyra rektanglar (med helfyllda blå, gröna, gula och röda färger) rör sig sedan till sin plats. För att skapa den spridda effekten som åker ihop är varje rektangel inställd med olika riktningar och hastigheter på fliken Rörelse i panelen Rullningseffekter. Den blå rektangeln rör sig nedåt och till höger, den gröna och den gula rektangeln rör sig uppåt och till höger, och den röda rektangeln rör sig uppåt och till vänster i delen Startrörelse. I delen Slutrörelse har alla rektanglar ett värde satt till 0 för båda riktningarna, vilket får varje element att bete sig som om det är fäst på plats när det når sitt mål längst upp på mobiltelefonskärmen.
9. Efter att de andra bitarna samlats rör sig ett andra textfält uppåt och lägger sig under det första textfältet med halva sidrullningshastigheten.

Det är två element kvar längst ned: En helfylld rektangel med samma helfyllda färg som webbsidan (så att den inte syns i designen) och en grupp med föremål (en gul rektangel med glödlampsgrafik) bakom den.

Den helfyllda rektangeln är till för att dölja gruppen som är ordnad bakom den.

10. Rektangeln är i princip fäst och rör sig aldrig, eftersom alla värden i fälten för både startrörelse och slutrörelse är 0. När sidan rullas till tangentpositionen för gruppen som innehåller glödlampsgrafiken så flyttas den till vänster och blir synlig eftersom den inte längre är dold bakom rektangeln ovanför den. Glödlampsgruppen är i ett lager över mobiltelefonens skärmelement, men under mobiltelefonens kontur så att glödlampsgrafiken ser ut att svepas på plats (liknande hur det sker i riktiga mobiltelefoner vid horisontella svepningar). Glödlampsgruppen täcker den övertonande rektangeln som tidigare representerade telefonens skärm.

Som du ser i det här enkla exemplet går det att använda en kombination av en mycket lång webbsida, en serie element som är strategiskt lagrade i panelen Lager och på fliken Rörelse i panelen Rullningseffekter för att skapa en illusion av bilder som åker ihop i en animering när sidan rullas ned.

Glidande meny

Glidande meny-effekten använder många av de metoder som beskrevs för bit-för-bit-effekten. Elementen ser ut att flyga in med hjälp av fliken Rörelse i panelen Rullningseffekter och rektanglar som döljer en del av elementen tills de ska visas i webbsidans design.

I det här exemplet används strategiskt placerade grupper av rektanglar för att skapa ett intryck av en design med komplexa vinklar.

Titta på exemplet i en webbläsare och se hur flygplanet flyger horisontellt över sidan från höger till vänster, följt av en uppsättning stiliserade menyalternativ och en övertonande bakgrund med diagonala ränder.

Följ de här stegen för att skapa en liknande glidande effekt:

1. I vyn Design väljer du Sida > Sidegenskaper. Ställ in den minsta sidhöjden till ett mycket större värde. I webbplatsexemplet är den minsta sidhöjden satt till 4 665 pixlar.
2. Flygplansbilden ligger som ett lager över annat innehåll på sidan, så den visas överst i listan i panelen Lager. Den är inställd till att röra sig till vänster både före och efter att dess tangentposition på fliken Rörelse i panelen Rullningseffekter.
   

3. Fyra textramar är inställda att flyga in till vänster och staplas vertikalt och skapa navigationsmenyn. På fliken Rörelse i panelen Rullningseffekter har varje textram samma hastighet (1,25 gånger rullningshastigheten) i delen för slutrörelse. Varje ram har dessutom olika tangentpositioner. När sidan rullas ned glider varje ram på plats och radas upp till vänster i designen. Alla textramar har värdet 0,0 i delen för slutrörelse, vilket får menyobjekten att stanna kvar när de väl är på plats.
4. Textramarna har helfyllda bakgrundsfärger, även om de vid första anblicken ser ut att vara bilder eftersom de har diagonala sidor, snarare än vertikala sidor. Den här effekten får man genom att skapa lager av en grupp med tre rektanglar över textramarna som fylls med samma helfyllda färg som webbläsarfyllningsfärgen.

5. Textramens animering är från början dold av en annan grupp rektanglar eftersom textramarna är ordnade under gruppen i panelen Lager. Gruppen består av en kombination av tre rektanglar: en större rektangel med en vertikal övertoning och två mindre rektanglar (en fyrkantig och en roterad) som är fyllda med en helfylld färg som matchar den översta färgen på övertoningen.

6. Om du rullar ned för att se gruppens nedre del så ser du en serie med fyra eller fler rektanglar med olika bredd som är roterade och justerade utmed det nedre högra hörnet i den större rektangeln med övertoningsfärgen.
   

Grupper är bra för att kombinera uppsättningar av element och hantera dem som ett föremål. I det här exemplet har grupper av olika rektanglar rörelserullningseffekter som får gruppen att röra sig som en enhet.

Det här exemplet visar även kreativ användning av negativt utrymme. Om webbläsarfyllningen har en helfylld bakgrundsfärg kan man göra många intressanta utklippningseffekter genom lager med rektanglar fyllda med samma färg över andra rektanglar. Istället för att designa grafik i ett bildredigeringsprogram och montera enstaka bilder kan du använda rektanglar och skapa grafik från arbetsytan i Muse.

Tona

Det här exemplet på en animerad soluppgång och solnedgång får man genom att kombinera två rullningseffekter: rörelse och opacitet. Det här exemplet visar en sidbakgrund med övertonande färgfyllning med en enda monterad PNG-bild av solen. På PNG-bilden finns genomskinliga områden som gör att bakgrundens fyllningsfärg syns igenom.

Titta på exempelwebbplatsen i en webbläsare för att se hur solen tonar upp från 100 % genomskinlighet och rör sig över sidan. När den står som högst är den helt ogenomskinlig, men när man rullar nedför sidan går solen ned och blir mer och mer genomskinlig tills den tonas ut.
Följ de här stegen för att skapa en liknande toningseffekt:

1. I vyn Design väljer du Sida > Sidegenskaper. Ställ in den minsta höjden till ett större värde än vad en vanlig monitor kan visa så att det går att rulla sidan. I webbplatsexemplet är den minsta sidhöjden satt till 2 988 pixlar.
2. Solen är monterad mitt på sidan. På fliken Rörelse i panelen Rullningseffekter är tangentpositionen satt till 1410 pixlar. Lägg även märke till inställningarna för startrörelse och slutrörelse.

De här inställningarna får solen att röra sig i en halvcirkelformig bana från den nedre vänstra delen av sidan upp till mitten av sidan (när dess tangentposition nås) och sedan tillbaka ned på den nedre högra delen av sidan.

3. Ha solen markerad och klicka på fliken Opacitet för att se dess inställningar. Toningsplacering 1 är inställd på 726 pixlar (över solen). Toningsplacering 2 är inställd på 1 925 pixlar (under solen). Solen börjar med 0 % opacitet (helt genomskinlig) och blir sedan helt ogenomskinlig när sidan rullas till dess tangentposition. När sidan rullas förbi solens tangentposition går opaciteten från 100 % till 0 % och skapar en effekt av att tona in och tona ut.
   

4. Testa sidan genom att välja Arkiv > Förhandsvisa sidan i webbläsare. Rulla sidan för att se hur solen ser ut att stiga upp medan den tonar in och sedan röra sig nedåt åt höger medan den tonar ut.
5. Stäng webbläsaren och gå tillbaka till arbetsytan i Muse.

Edge Animate

I det här exemplet visas hur man styr OAM-filer som exporteras från Adobe Edge Animate med rullningseffekter. I det här exemplet är sidan fylld med en vertikal övertoning som börjar med en ljusturkos färg och övergår till en mörkblå.

En kombination av inställningar på flikarna Rörelse och Edge Animate skapar den här animerade effekten.

Tre versioner av samma OAM-fil monteras horisontellt bredvid varandra och skapar en rad med animerade kompasser. När du tittar på exempelwebbplatsen i en webbläsare rör sig alla tre kompasser upp tills de blir synliga och stannar sedan på plats. Alla tre kompasser ser ut att snurra i olika hastigheter, men det är inställningarna i panelen Rullningseffekter, inte Edge Animate-filens konstruktion, som får dem att snurra i olika hastigheter.

Följ de här stegen för att skapa en liknande effekt med tre monterade OAM-filer:

1. I vyn Design väljer du Sida > Sidegenskaper. Ställ in den minsta sidhöjden till ett mycket större värde. I webbplatsexemplet är den minsta sidhöjden satt till 7 465 pixlar.
2. Markera alla tre kompasser på sidan. På fliken Rörelse i panelen Rullningseffekter kan du se att alla tre OAM-filer har samma tangentposition och rörelseinställningar eftersom alla värden visas.

Om du förhandsvisar exemplet i en webbläsare så ser du alla tre OAM-element hoppa in samtidigt och sedan stanna kvar i en rad som om de vore fästa.

3. Klicka bort från kompasserna för att avmarkera alla tre och välj sedan bara den vänstra kompassen. Håll ned Skift-tangenten när du väljer kompassen till höger så att båda är markerade. Öppna fliken Edge Animate i panelen Rullningseffekter för att se över inställningarna.

De två kompasserna på sidorna är båda inställda till att gå genom tidslinjens animering i en slinga och gå vidare till nästa bild varje gång sidan rullas 350 pixlar.

4. Avmarkera de två yttre kompasserna. Välj kompassen i mitten och titta på fliken Edge Animate igen för att se att fältet Växla bild efter är inställt på 400 pixlar. Den här inställningen får animeringen i mitten att röra sig långsammare jämfört med de två yttre kompasserna.

Det går att skapa intressanta animeringseffekter genom att variera hastigheterna på flera monterade Edge Animate-animeringar i relation till sidrullningshastigheten. Det går till exempel att skapa ett fiskstim, en himmel med moln som rör sig eller andra effekter genom att lägga till flera likadana OAM-filer med olika rullningseffekter.

Bildspelseffekt

Det går att styra hur en uppsättning bilder i en bildspelswidget visas i förhållande till hur sidan rullas. Det här inkluderar att lägga till en bildspelswidget till en sida och sedan använda fliken Bildspel i panelen Rullningseffekter och ändra bildspelsalternativen.

I det här exemplet innehåller bildspelet en serie bilder som skapar en roterande vy av en ryggsäck i 360 grader. Det går att ta liknande bilder till ett bildspel genom att ställa upp ett kamerastativ och ta bilder av ett föremål som är uppställt på en roterande ställning. Effekten är användbar för att visa upp en interaktiv produktbeskrivning och hjälpa potentiella kunder att se ett föremål från alla vinklar innan de köper det.

Följ de här stegen för att skapa en liknande effekt med en bildspelswidget:

1. I vyn Design väljer du Sida > Sidegenskaper. Ställ in den minsta sidhöjden till ett mycket större värde. I webbplatsexemplet är den minsta sidhöjden satt till 7 465 pixlar.
2. En textram med ordet Superpack används för rullningseffekter. På fliken Rörelse ställer du in startrörelsen till att flytta in texten från vänster till höger i samma hastighet som sidan rullas. I inställningarna för slutrörelse är båda riktningarna inställda på 0 så att textramen är kvar på plats som om den vore fäst på sidan.
    

3. Öppna widgetprogrambiblioteket och dra en bildspelswidget till mitten av sidan, till höger om textramens slutdestination.
4. Använd alternativet Lägg till bilder på menyn Alternativ för att fylla bildspelet med bilder. 

När bildspelet är markerat kan du välja bildspelswidgeten och använda gränssnittet Fäst i kontrollpanelen för att fästa bildspelet på plats. Det går även att experimentera med att lägga till en bildspelswidget i helskärm och styra den med rullningseffekter. 

5. När bildspelet är markerat öppnar du fliken Bildspel i panelen Rullningseffekter och markerar kryssrutan Bildspel.
6. Dra T-handtaget eller ange ett värde i fältet för att ställa in tangentpositionen. I det här exemplet är tangentpositionen inställd på 1 066 pixlar.
7. Aktivera alternativknappen Byt bild efter och ställ in fältet under det till 50 pixlar.
   

8. Testa sidan i Förhandsvisa eller i en webbläsare. Rulla ned på sidan för att se hur ryggsäcken ser ut att rotera. Det går även att skapa bilder som ser ut att flyga uppåt eller falla nedåt genom att fylla bildspelet med en serie liknande, men lite annorlunda bilder på ungefär samma sätt som bilder i en animerad GIF.
9. När du testat rullningseffekterna går du tillbaka till vyn Design i Muse och fortsätter redigera sidorna.
   

Upprullning

Med rullningseffekter kan man skapa en mycket lång webbsida som är uppbruten i sektioner med väldigt olika utseenden. När besökaren rullar ned på en sida går de mellan sidors sektioner som ser ut att rullas upp, med animerade texteffekter och separerande gränser med en skuggeffekt.

Det går att använda ankartaggar eller bara lägga till en anteckning som uppmuntrar besökare att rulla ned på sidan och se slutet av varje sektion. När du är längst ned på exempelwebbplatsen och klickar på knappen Till början så ser du hela webbsidan passera förbi när ankarlänken går tillbaka till webbsidans överkant.

Följ de här stegen för att skapa en liknande upprullningseffekt:

1. I vyn Design väljer du Sida > Sidegenskaper. Ställ in den minsta sidhöjden till ett mycket större värde. I webbplatsexemplet är den minsta sidhöjden satt till 16 990 pixlar.
2. På menyn Webbläsarfyllning ställer du in webbläsarfyllningsfärgen till en helfylld blå.

3. När hela sidan är markerad använder du menyn Fyllning och ställer in sidfärgen till ingen så att den blå webbläsarfyllningsfärgen syns igenom.
4. Rulla ned på sidan till ungefär 2 248 pixlar från överkanten. Använd rektangelverktyget och rita en rektangel som är 3 000 pixlar bred och 2 000 pixlar hög. Använd markeringsverktyget och centrera rektangeln på sidan så att båda sidorna sticker ut utanför webbläsarfönstrets sidor.
5. När rektangeln är markerad använder du menyn Fyllning för att ange en helfylld grön fyllningsfärg. Använd menyn Effekter för att ställa in en skuggeffekt.

6. När den gröna rektangeln är markerad så markerar du kryssrutan Rörelse på fliken Rörelse i panelen Rullningseffekter. Klicka på och dra T-handtaget till tangentpositionen som är inställd till rektangelns överkant, vilket är 2 248 pixlar i exempelwebbplatsen.

7. I delen Startrörelse ställer du in rektangeln till att röra sig 1,5 gånger rullningshastigheten. Ställ in alla andra riktningar till 0.
8. Använd textverktyget och skapa ett textfält nära den gröna rektangelns överkant. I det här exemplet står det "This is the roll-up" i textfältet. Men du kan använda vilken text och textformatering du vill.
9. När textramen är markerad aktiverar du fliken Rörelse i panelen Rullningseffekter. Dra T-handtaget så att det är justerat utmed den gröna rektangelns överkant och uppdatera inställningarna till att styra hur textramen visas baserat på sidrullningen.

10. Ställ in startrörelsens nedåtriktning till att röra sig i 1,5 gånger rullningshastigheten. Ställ in alla andra värden i panelen till 0. Det får textfältet att röra sig nedåt i samma riktning och hastighet som den gröna rektangeln. Både rektangeln och textramen håller sig på plats när sidan rullar förbi deras tangentpositioner.
11. Om du klickar på Förhandsvisa kan du rulla ned och se hur den gröna rektangeln och textfältet åker ned uppifrån och blir synliga. Klicka på Design när du har testat färdigt för att fortsätta redigera sidan.
12. Använd menyn Visa för att zooma ut till 10 % av webbsidans design. Välj den gröna rektangeln och textfältet. Håll ned Alt och dra de två elementen längre ned på sidan för att kopiera dem. Ställ in fyllningsfärgen för den kopierade rektangeln till mörkblå och använd textverktyget för att uppdatera innehållet.

I det här exemplet har den kopierade textramen texten "Use it to drastically alter the appearance of your website" (Använd den för att drastiskt förändra utseendet på din webbsida). Men du kan använda vilken text du vill till den mörkblå delen av webbsidan.

13. Med markeringsverktyget placerar du den kopierade rektangeln och textramen ungefär 5 448 pixlar från sidans överkant.
14. När den mörkblå rektangeln är markerad tittar du på fliken Rörelse i panelen Rullningseffekter. Tangentpositionen har automatiskt uppdaterats till rektangelns nya plats (5 448 px) och riktningen nedåt i delen Startrörelse är fortfarande inställd till att röra sig 1,5 gånger rullningshastigheten (och alla andra värden är satta till 0). Om du tittar i den kopierade textramen så ser du att rullningseffekterna också är bevarade för det kopierade elementet.
15. Upprepa steg 12 och 13 fyra gånger till så att det skapas totalt sex stora rektanglar med textramar ovanför dem. Varje rektangel har redan skuggeffekten och rullningseffekten. Montera de sista fyra rektanglarna vid följande tangentpositioner: 8 648 pixlar, 11 852 pixlar, 15 058 pixlar och 18 251 pixlar så att delarna ligger cirka 1 200 pixlar från varandra.
16. Använd menyn Fyllning och ställ in rektanglarnas fyllningsfärg och använd olika färger. Experimentera med både helfyllda och övertonande färgfyllningar för att få varje del av sidan att sticka ut och kontrastera mot de andra sektionerna.
17. Använd textverktyget och uppdatera textinnehållet för varje sektion. Du kan till exempel ändra dem så att de motsvarar färgen för rektangeln under den, så här: "Det här är den blå sektionen".
18. Testa sidan genom att välja Arkiv > Förhandsvisa sidan i webbläsare. Rulla sidan för att se de olika sektionerna av sidan visas och sedan ersättas av nästa sektion.
19. Stäng webbläsaren och gå tillbaka till arbetsytan i Muse.
    

Dynamisk text

Du kan skapa ovanliga typografiska designer med en kombination av rörelserullningseffekter och Adobe Edge Web Fonts-teckensnitt. Webbteckensnitt gör att du kan formatera text med många olika teckensnitt som laddas när sidan laddas. Istället för att montera och animera bilder av text som skapats i ett bildredigeringsprogram kan du skapa sidor som är snygga och är lättare att uppdatera med Edge Web Fonts-teckensnitt. Och rullningseffekterna skapar en dramatisk känsla av animering när sidan rullas ned.

Följ de här stegen för att skapa en liknande effekt med dynamisk text:

1. I vyn Design väljer du Sida > Sidegenskaper. Ställ in den minsta sidhöjden till ett mycket större värde. I webbplatsexemplet är den minsta sidhöjden satt till 4 854 pixlar.
2. Sätt sidans fyllningsfärg till ingen. Webbläsarfyllningsfärgen spelar ingen roll eftersom sidan kommer att täckas av en lång rektangel i nästa steg.
3. Använd rektangelverktyget och rita en stor rektangel som är ungefär 1 159 pixlar bred och 4 854 pixlar hög. Använd menyn Fyllning och fyll rektangeln med en helfylld eller övertonande färg. I det här exemplet används en övertoning från mörk turkos till fuchsia. Använd markeringsverktyget och centrera rektangeln så att den fyller hela webbläsaren. Om du vill kan du zooma ut för att se till att rektangeln är centrerad på sidan.

4. Efter att du centrerat rektangeln ställer du tillbaka förstoringen på menyn Visa till 100 %.
5. Använd textverktyget och skapa en serie textramar på den vänstra delen av sidan. I det här exemplet finns det totalt fem textramar. Innehållet i varje textram listas nedan, men ange gärna vilken text du vill i varje textrad:
   • Five Frames (fem ramar)
   • Scrolling (som rullar)
   • At Different Speeds Will (i olika hastigheter)
   • Create (skapar)
   • Dynamic Tension (dynamisk spänning)

Som ett valfritt extra steg kan du kopiera några av textramarna och sedan använda lite olika formatering. I det här exemplet har textramen med ordet "Create" kopierats med två kopiorna i lager på varandra för att skapa en effekt av en ljusblå skugga.

6. Använd textverktyget och markera alla textramar. Använd panelen Text (eller textformateringsalternativen i kontrollpanelen) och använd olika webbteckensnitt, storlekar, färger och andra typografiska inställningar för att få varje textram att sticka ut.
7. Markera alla textramar. När de är markerade öppnar du fliken Rörelse i panelen Rullningseffekter. Ange samma numeriska värde och ställ in tangentpositionen för alla markerade textramar samtidigt. (I det här exemplet är tangentpositionen inställd på 1 372 pixlar.) Ställ även in den horisontella riktningen för både startrörelsen och slutrörelsen till höger. Sätt alla vertikala riktningar för startrörelsen och slutrörelsen till 0 så att textramarna inte rör sig vertikalt.
8. Klicka bort från textramarna och klicka sedan på varje textram för sig. Ange lite olika värden för varje textram. I listan nedan är det första värdet startrörelsens hastighet och det andra värdet är slutrörelsens hastighet för den horisontella riktningen (till höger).
   • Five Frames (fem ramar): 0,9 x och 0,1 x
   • Scrolling (som rullar): 0,12 x och 0,5 x
   • At Different Speeds Will (i olika hastigheter): 0,7 x och 0,17 x
   • Create (skapar): 1,1 x och 0,005 x
   • Dynamic Tension (dynamisk spänning): 1 x och 0,01 x
     

9. Använd textverktyget och skapa ett textfält och ange siffran 5 på sidans högra del. Du kan även välja att kopiera textramen och sedan använda olika färger och textformateringar för att skapa en illusion av avfasade kanter och skuggor. Om du skapar kopior av en textram för designen kan du gruppera textramarna så att du kan använda en rullningseffekt på gruppen.
10. När textfältet med siffran 5 är markerat så markerar du kryssrutan Rörelse på fliken Rörelse i panelen Rullningseffekter. Ställ in tangentpositionen numeriskt eller genom att dra i T-handtaget (i det här exemplet är det satt till 1 425 px). I delen för startrörelse ställer du in elementet till att röra sig åt vänster 1 gånger rullningshastigheten. I delen för slutrörelse ställer du in elementet till att röra sig åt vänster 0,1 gånger rullningshastigheten.
11. Testa sidan genom att välja Arkiv > Förhandsvisa sidan i webbläsare. Rulla sidan för att se de fem textramarna röra sig in på sidan från vänster när textramen med siffran 5 rör sig in från höger. Rulla uppåt och nedåt för att se textramarna animeras.
12. Stäng webbläsaren och gå tillbaka till arbetsytan i Muse.
     

Staplad meny

Du kan skapa spännande interaktiv webbplatsnavigering med rullningseffekter så att de olika knapparna flyger in i det synliga området på sidan och sedan radar upp sig och skapar en menyrad. I det här exemplet rör sig fyra hovringsknappar upp från längst ned på sidan när den rullas för att sen låsas på plats och visa en vertikal menyrad.

När de fyra knapparna är uppradade flyger bakgrundsinnehållet (glödlampsgrafik, färgad bakgrund, textram och diagonala hörnränder) in från sidan båda sidor och skapar en del av webbsidan.

Även om knapparna inte är länkade i det här exemplet kan du lägga till länkar med listrutan Hyperlänkar så att besökare kan klicka på dem och antingen ladda en ny sida eller använda ankartaggar till att hoppa till en annan plats på den aktuella sidan.

Följ de här stegen för att skapa en liknande effekt av en staplad meny:

1. I vyn Design väljer du Sida > Sidegenskaper. Ställ in den minsta sidhöjden till ett mycket större värde. I webbplatsexemplet är den minsta sidhöjden satt till 7 465 pixlar.
2. Ställ sidans fyllningsfärg till ingen och ställ in webbläsarfyllningen till en helfylld färg. I exempelwebbplatsen är webbläsarfyllningen inställd till en ljus mellanbrun färg.
3. Skapa en ny textram med textverktyget. Skriv in ordet Hem. Använd formateringsalternativen i kontrollpanelen och lägg till en bakgrundsfärg till textramen. Uppdatera även formateringsvalen och formatera texten som du vill. Använd handtagen på knappens sidor och expandera dess bredd till ungefär 300 pixlar och dess höjd till ungefär 115 pixlar.

4. Öppna panelen Lägen. Välj Pekaren över och lägg till en annan fyllningsfärg (eller formatera som du vill) för att skapa en hovringsknapp.

5. När du har uppdaterat Pekaren över väljer du Normalt läge igen.
6. Öppna fliken Rörelse i panelen Rullningseffekter. När knappen är markerad så markerar du kryssrutan Rörelse. Ställ in tangentpositionen genom att dra i T-handtaget eller ange ett numeriskt värde. I Startrörelse ställer du in hastigheten till 0,75 gånger rullningshastigheten. Lämna alla andra fält på 0.

7. Håll ned Alt och dra Hem-knappen längre ned på sidan. Det skapar en kopia av knappen. Se till att kopian är jämnt justerad vertikalt med den ursprungliga Hem-knappen. När de två elementen är justerade och kopian är markerad visas en mörkblå smart stödlinje tillfälligt i mitten.

8. Flytta ned den kopierade knappen på sidan till ungefär 460 pixlar under den ursprungliga knappen.
9. Upprepa steg 7 och 8 och kopiera knappen två gånger till och skapa totalt fyra knappar som är jämnt utplacerade på sidan. Använd textverktyget och redigera den andra, tredje och fjärde knappen uppifrån och uppdatera textinnehållet med de här etiketterna: Produkter, Foton och Kontakta oss.

När du kopierade den första Hem-knappen kopierades även textramens formatering, innehåll och rullningseffekter. Om du väljer en av de kopierade knapparna och tittar i panelen Rullningseffekter så ser du att inställningarna på fliken Rörelse matchar Hem-knappens inställningar och att tangentpositionen för varje knapp är 460 pixlar under den förra knappen (samma avstånd som mellan varje knapp på sidan).

10. Räkna ut den totala höjden för de fyra knapparna när de är justerade till sina slutliga platser genom att addera deras höjd och mellanrummen. I exempelwebbplatsen är knapparna 116 pixlar höga och det är 4 pixlars mellanrum mellan varje knapp. Det betyder att den totala höjden av den vertikala menyraden (när den är ihopsatt) är 476 pixlar. Använd rektangelverktyget och rita en rektangel som är så bred som sidsektionen ska vara och lika hög som menyraden. I det här exemplet är rektangeln 931 pixlar bred och 476 pixlar hög.
11. Om du vill kopiera designen i exempelwebbplatsen kan du ställa in fyllningsfärgen i rektangeln till blekrosa i en ljusare nyans än knapparnas normala läge. Det går även att skapa rundade hörn genom att ange ett värde för hörnradie i kontrollpanelen. I exemplet är alla fyra hörn satta till 10 pixlar.

12. Använd markeringsverktyget och justera rektangeln så att dess överkant är ungefär 5 094 pixlar från sidans överkant. Se även till att rektangelns vänstra sida är vertikalt justerad med knapparnas vänstra sida. I den här exempelwebbplatsen är rektangeln och knapparna 14 pixlar från sidans vänstra del. Du kan se de här inställningarna när du har markerat ett element och öppnar panelen Omforma. X-värdet är avståndet från den vänstra sidan (14 pixlar) och Y-värdet är avståndet från sidans överkant (5 094 pixlar).
13. Med rektangeln markerad öppnar du panelen Rullningseffekter och markerar kryssrutan Rörelse på fliken Rörelse. Sätt tangentpositionen till 4 979.
14. Ställ in Startrörelse till att röra sig åt höger i 1 gånger rullningshastigheten. Alla andra fält på fliken Rörelse ska stå på 0.

15. För att se till att rektangeln är ordnad bakom de fyra knapparna väljer du Objekt > Lägg underst när rektangeln är markerad.
16. Välj Arkiv > Montera, välj en bild och klicka sedan en gång på sidan för att montera den. I det här exemplet har en PNG-fil med genomskinlighet monterats för att visa en bild av en glödlampa. Glödlampan har placerats över den stora rektangeln, på den högra sidan, borta från området som är täckt med menyknappar. I det här exemplet är bilden monterad 501 pixlar från vänster (X-positionen) och 5 245 pixlar från sidans överkant (Y-positionen).
17. För att se till att den monterade bilden är ordnad bakom de fyra knapparna väljer du Objekt > Lägg underst när bilden är markerad. Målet är att visa den monterade bilden över den stora rektangeln, men bakom de fyra knapparna.
18. Med den monterade bilden markerad öppnar du fliken Rörelse i panelen Rullningseffekter och markerar kryssrutan Rörelse. Ställ in tangentpositionen till det önskade värdet. I exempelwebbplatsen är det satt till 4 979 pixlar.
19. I Startrörelse ställer du in det högra värdet till att röra sig i 0,75 gånger rullningshastigheten. Sätt alla andra riktningsvärden till 0.

20. Skapa en textram med textverktyget. I exempelfilen har textramen följande innehåll: "Stack linked text frames with high contrast roll-overs to create unusual menus" (Stapla länkade textramar med hovringseffekt med hög kontrast för att skapa ovanliga menyer). Men du kan skriva in vilken text du vill. Använd formateringsalternativen i kontrollpanelen och formatera texten som du vill. I det här exemplet har textramen ingen fyllningsfärg för bakgrunden.
21. Använd markeringsverktyget och placera textramen till höger om den monterade bilden. I det här exemplet har textramen ett X-värde på 357 pixlar (från vänster) och ett Y-värde på 5 136 pixlar (från sidans överkant). Den faktiska platsen beror på sammanhanget och formateringarna du gör på textramen.
22. Med textramen markerad använder du antingen Objekt > Flytta bakåt för att ordna den eller flyttar den till panelen Lager så att textramen visas bakom de fyra knapparna, men över den stora rektangeln.
23. Markera kryssrutan Rörelse i panelen Rullningseffekter. Ställ in tangentpositionen genom att dra i T-handtaget eller ange ett värde. I exempelwebbplatsen är tangentpositionen satt till 4 979 pixlar – samma värde för tangentpositionen som används av den markerade bilden (glödlampsbilden).
24. I delen Startrörelse ställer du in textramen till att röra sig till vänster i halva rullningshastigheten (0,5). Ställ in alla andra fält till 0.

Den grundläggande staplade menyn är nu klar. Men det finns ett till designelement du kan lägga till. Det involverar att lägga till flera roterade rektanglar över det nedre högra hörnet av den stora rektangeln på samma sätt som den glidande menyn använde roterade rektanglar för att lägga till en effekt med diagonala ränder.

25. Använd rektangelverktyget och rita flera rektanglar med olika bredd. Fyll rektanglarna med samma färg som webbläsarfyllningens bakgrundsfärg. På så sätt syns inte rektanglarna förrän den stora rektangeln rör sig på plats till höger bakom dem. Om du vill kan du gruppera de diagonala rektanglarna så att du kan jobba med dem som ett enda element.

26. Om det behövs använder du panelen Lager eller väljer Objekt > Lägg underst för att ordna den större rektangeln längst bak, bakom alla andra element på sidan.
27. Se till att testa dina framsteg då och då genom att klicka på Förhandsvisa eller genom att förhandsvisa sidan i en webbläsare och rulla ned och se den staplade menyn röra sig på plats. Gå tillbaka till Muse när du har testat färdigt. 

Rörlig bakgrund

Om du vill skapa en effekt av en rörlig bakgrund kan du skapa en serie stora rektanglar fyllda med bakgrundsbilder sida vid sida som täcker en lång sida. Det här exemplet använder fliken Rulla på menyn Fyllning (istället för fliken Rörelse i panelen Rullningseffekter) för att skapa rörelsen.

Följ de här stegen för att skapa en liknande effekt med en rörlig bakgrund:

1. I vyn Design väljer du Sida > Sidegenskaper. Ställ in den minsta sidhöjden till ett mycket större värde. I webbplatsexemplet är den minsta sidhöjden satt till 6 254 pixlar.

2. Vid sidans överkant använder du rektangelverktyget och ritar en stor rektangel. I exempelwebbplatsen är rektangeln 1 159 pixlar bred och 1 312 pixlar hög. Använd markeringsverktyget och centrera rektangeln på sidan så att båda sidorna sticker ut utanför webbläsarfönstrets sidor.
3. Med rektangeln markerad använder du menyn Fyllning och ställer in en bakgrundsbild. Gå till menyn Passning och ställ in bilden till Sida vid sida.

4. Om du vill kan du använda menyn Effekter och ställa in en skuggeffekt för att skapa en effektfull kant runt rektangeln.
5. Markera den fyllda rektangeln och öppna fliken Rulla på menyn Fyllning. Markera kryssrutan Rörelse och klicka på och dra T-handtaget eller ange ett värde i fältet för att ställa in tangentpositionen. I exempelwebbplatsen är tangentpositionen satt till 512 pixlar. Men du kan minimera handtaget och justera det utmed rektangelns överkant om du vill.
6. I delen Startrörelse ställer du in riktningen till att röra sig nedåt och till vänster och ställer in båda hastigheterna till att röra sig 0,2 gånger rullningshastigheten. Upprepa samma inställningar i delen Slutrörelse. 

7. Upprepa steg 2-6 och skapa en till fylld rektangel. Placera den nya rektangeln rakt under den första du skapade så att ingen del av webbläsarfyllningen syns igenom och det inte finns något yta mellan de två rektanglarna. Fyll den nya rektangeln med en annan bakgrundsfyllning med en bild sida vid sida.
8. Upprepa steg 7 och skapa en stor rektangel som är placerad direkt under den andra rektangeln. Använd menyn Fyllning och ställ in en annan bakgrundsbild sida vid sida. Det kan vara till hjälp att zooma ut med menyn Visa och se alla rektanglar och justera dem vertikalt på sidan.

9. Markera den andra rektangeln och öppna fliken Rulla på menyn Fyllning. Uppdatera startrörelsen till att flytta rektangeln åt höger i 0,3 gånger rullningshastigheten. Ställ in slutrörelsen med samma inställningar till att flytta rektangeln åt höger i 0,3 gånger rullningshastigheten. Båda de vertikala fälten ska stå på 0.

10. Markera den tredje rektangeln och uppdatera inställningarna på fliken Rulla på menyn Fyllning. Ställ in startrörelsen till att röra sig uppåt i 0,25 gånger rullningshastigheten och röra sig till vänster i 0,6 gånger rullningshastigheten. Använd samma inställningar i delen Slutrörelse för den tredje rektangeln.
11. Testa sidan genom att välja Arkiv > Förhandsvisa sidan i webbläsare. Rulla ned på sidan för att se hur rektanglarna sida vid sida ser ut att röra sig diagonalt tills du rullar ned till längst ned på sidan. När du rullar uppåt fortsätter rektanglarna att röra på sig.
12. Stäng webbläsaren och gå tillbaka till arbetsytan i Muse.

Masker

I det här exemplet animeras ett stapeldiagram på plats. Grafik med en rosa pil sträcker sig uppåt förbi staplarna i diagrammet. Även om staplarna i diagrammet ser ut att växa upp från botten av diagrammet är det helfyllda färgade rektanglar med rörelserullningseffekter som får dem att åka fram bakom större vita rektanglar (fyllda med samma helfyllda vita färg som sidans bakgrundsfärg).

Det här exemplet använder flera tekniker ihop med rullningseffekter. Elementen är ordnade framför och bakom varandra med panelen Lager. Vita rektanglar är ritade över diagramelementen. När de vita rektanglarna täcker stapeldiagrammet är staplarna och pilen dolda, som om de är maskerade. De vita rektanglarna och diagrammet använder 0 som värden för rörelserullningseffekter för att vara kvar på plats när sidan rullas. Staplarna och grafiken med den rosa pilen som är i ett lager under har rörelserullningseffekter som får dem att röra sig uppåt och bli synliga när diagrammet sätts ihop.

Följ de här stegen för att skapa en liknande maskeffekt:

1. I vyn Design väljer du Sida > Sidegenskaper. Ställ in den minsta sidhöjden till ett mycket större värde. I webbplatsexemplet är den minsta sidhöjden satt till 6 076 pixlar.
2. Ställ in både sidans fyllning och webbläsarfyllningen till en helfylld vit färg (eller vilken färg du vill, men använd samma färg till att fylla maskrektanglarna senare).
3. Använd rektangelverktyget och rita en stor rektangel på sidan. Rektangeln i exemplet är 804 pixlar bred och 489 pixlar hög.
4. Sätt rektangelns fyllningsfärg till ingen. Ställ in en linjefärg du vill ha. På menyn Linje ställer du in den vänstra och nedre sidan av rektangeln till att visa en linje med en tyngd på 20 med den övre och högra sidan satt till 0 för att dölja linjen. Det skapar grunden för stapeldiagrammet.
    

5. När rektangeln är markerad öppnar du fliken Rörelse i panelen Rullningseffekter. Sätt tangentpositionen till 0 i alla fyra fält. Den inställningen betyder att rektangeln inte rör sig före eller efter att tangentpositionen är nådd, så att elementet stannar kvar på plats.

6. Använd rektangelverktyget och rita två större rektanglar. Rita den första rektangeln justerat utmed den vänstra sidan av diagrammet. I exempelwebbplatsen är rektangeln 657 pixlar bred och 1 810 pixlar hög.
7. Rita den andra rektangeln under diagrammet, justerat utmed dess nedre kant. I exempelwebbplatsen är rektangeln 1 002 pixlar bred och 1 541 pixlar hög.
8. Ställ in fyllningsfärgen för båda rektanglarna till vitt (eller samma färg som webbläsarfyllningsfärgen) och linjen till 0. Använd markeringsverktyget och justera rektanglarna utmed de två sidorna på diagrammet.
   

9. Med rektanglarna markerade högerklickar du och väljer Objekt > Gruppera för att gruppera ihop de två maskrektanglarna.
10. Med gruppen av rektanglar är markerad öppnar du fliken Rörelse i panelen Rullningseffekter. Ställ in tangentpositionen (i exemplet är den 1 516) och ange 0 i alla fyra fält. Den inställningen betyder att gruppen med vita rektanglar inte rör sig före eller efter att tangentpositionen är nådd. Gruppen är kvar på plats precis som den yttre tabellen för diagrammet.
11. Använd panelen Lager för att tillfälligt dölja och låsa gruppen.
12. Rulla ned till ytan under gruppen och använd rektangelverktyget till att rita totalt fem rektanglar som alla har samma bredd. I exempelwebbplatsen är alla staplar 74 pixlar breda och är olika höga. Från vänster till höger är de fyra rektanglarnas höjd 141, 188, 292, 444, och 583. Alla rektanglar är fyllda med samma gröna färg som linjen som definierar den vänstra och den nedre kanten av diagrammet.

13. Platsen för rektanglarna (från vänster till höger) är listad nedan med sina X- och Y-värden:
    • X: 200 Y: 2 622
    • X: 330 Y: 2 797
    • X: 460 Y: 3081
    • X: 590 Y: 3304
    • X: 721 Y: 3 499
14. Sedan väljer du varje rektangel från vänster och jobbar dig åt höger. Välj en, markera kryssrutan Rörelse på fliken Rörelse i panelen Rullningseffekter och ställer in följande tangentpositioner:
    • 2099
    • 2321
    • 2709
    • 3084
    • 3441
15. Med alla rektanglar markerade uppdaterar du inställningarna i panelen Rullningseffekter så att startrörelsen är uppåt 1 gånger rullningshastigheten. Ställ in alla andra fält till 0.
     

16. Placera en PNG-fil med genomskinlighet på sidan. I det här exemplet är PNG-filen grafik med en rosa pil som åker uppåt i sicksack. PNG-filen som används i exemplet är 695 pixlar bred och 443 pixlar hög. När du placerat ut den på sidan flyttar du den till platsen X: 78 och Y: 3 427.
17. I panelen Lager ordnar du PNG-filen så att den ligger under den första och den tredje stapelrektangeln (från vänster), men över den andra, fjärde och femte stapeln.

18. När pilbilden är markerad öppnar du fliken Rörelse i panelen Rullningseffekter och markerar kryssrutan Rörelse. Ställ in tangentpositionen (i exemplet är den 3 238 pixlar). I delen Startrörelse ställer du in riktningen till upp och till höger och anger 0,25 gånger rullningshastigheten i båda fälten för startrörelse. Ange 0 i båda fälten i delen Slutrörelse.

19. I panelen Lager visar du och låser upp gruppen med två vita rektanglar som du dolde och låste tidigare. Flytta upp gruppen över de andra elementen så att den visas över det andra innehållet på sidan. Eftersom gruppen är högst upp fungerar den som mask och visar bara staplarna och pilgrafiken när de rör sig uppåt innanför diagrammets ram.
20. Testa sidan genom att välja Arkiv > Förhandsvisa sidan i webbläsare. Rulla sidan så att du ser stapeldiagrammet röra sig på plats när de två vita rektanglarna som maskerar staplarna döljer diagramelementen tills de är inom diagrammet.
21. Stäng webbläsaren och gå tillbaka till arbetsytan i Muse.

Exempel på webbplatser som använder rullningseffekter

Om du vill se hur rullningseffekterna ser ut går du till webbplatsen Demential Lab.