Läs om hur du lägger till och använder olika rullningseffekter, som en bit-för-bit-effekt, en glidande meny-effekt, en upprullningseffekt med mera.
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:
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:
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.
Lägg märke till att de värden som är samma för alla markerade föremål visas i fälten när båda elementen är markerade. I det här exemplet har både rektangeln och gruppen den vertikala riktningen satt till 0 i delen för startrörelse och 0,0 i delen för slutrörelse. Inget värde visas i det horisontella fältet i delen för startrörelse, eftersom gruppen är inställd på att röra sig 1 gånger rullningshastigheten (lika snabbt), medan rektangeln är inställd på 0.
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-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:
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.
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:
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.
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:
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.
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.
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.
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:
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.
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:
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.
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:
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.
Om du väljer att kopiera en textram för att skapa en skuggeffekt kan du gruppera två eller fler versioner av en textram och styra dem som en grupp när du använder rullningseffekter.
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:
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).
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.
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:
I det här exemplet spelar det ingen roll om du ställer in en webbläsarfyllningsfärg eftersom sidan är täckt av rektanglar. Sätt sidans fyllningsfärg till ingen.
I exempelwebbplatsen är den tredje rektangeln längre än de första två. Du kan dra i handtagen för att öka höjden på den tredje kopierade rektangeln eller skapa en fjärde rektangel för att fylla den kvarvarande ytan längst ned.
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:
Om du vill se hur rullningseffekterna ser ut går du till webbplatsen Demential Lab.
Logga in på ditt konto