En av de "hetaste" teknikerna på webben idag är parallaxrullning. Vi har alla varit på de platser där du roterar rullhjulet på musen och innehållet på sidan flyttas upp och ner eller över sidan när du roterar mushjulet.
För de som är nya för webbdesign och grafisk design kan denna teknik vara extremt svår att uppnå på grund av den mängd CSS som krävs.
Om det beskriver dig finns det ett antal program som bara kan vädja till grafikartister. De använder i grund och botten en välbekant sidlayout till webbsidor, vilket betyder att det inte finns mycket, om någon, kodning är inblandad. En applikation som verkligen har kommit fram till framträdande är Adobe Muse.
Arbetet som görs med grafikprofiler med Muse är ganska fantastiskt och du kan se ett urval av vad du kan göra genom att besöka Museet Dagens sida . Även om webproffs tenderar att betrakta Muse som ett slags "wind-up toy", används det också av designers att skapa mobila och webbprototyper som till slut kommer att delas ut till utvecklarna i deras lag.
En teknik som är otroligt lätt att åstadkomma med Muse är parallaxrullning och, om du vill se den färdiga versionen av träningen. När du rullar musens rullhjul, verkar texten flytta uppåt eller nedåt på sidan och bilderna ändras.
Låt oss börja.
01 av 07Skapa en webbsida
När du startar Muse klickar du på Ny webbplats länk. Detta öppnar Egenskaper för nya webbplatser. Detta projekt kommer att utformas för en stationär applikation och du kan välja den i Initial layout popup-menyn. Du kan också ange värdena för antalet kolumner, rännbredd, margen och vaddering. I det här fallet var vi inte hemskt oroade över det här och helt enkelt klickade på ok.
Formatera sidan
När du ställer in webbplatsegenskaperna och klickar på ok du togs till det som kallas Planen se. Det finns en Hem sida överst och a Mästarsida längst ner i fönstret. Vi behövde bara en sida. För att komma till Design View dubbelklickade vi på startsidan som öppnade gränssnittet.
Till vänster finns några grundläggande verktyg och till höger finns en rad paneler som används för att manipulera innehållet på sidan. Längst upp är egenskaperna, som kan appliceras på sidan, eller något som är valt på sidan. I det här fallet ville vi ha en svart bakgrund. För att uppnå detta klickar vi på Webbläsarefyllning färgchip och valde svart från färgväljaren.
03 av 07Lägg till text på sidan
Nästa steg är att lägga till lite text på sidan. Vi valde Textverktyg och ritade ut en textruta. Vi skrev ordet "Välkommen" och i Egenskapen sätter texten till Arial, 120 pixlar Vit. Center Aligned.
Vi bytte sedan till urvalsverktyget, klickade på textrutan och ställa in dess Y-position till 168 pixlar från toppen. Med textrutan fortfarande vald, öppnade vi Justera panelen och justerade textrutan till mitten.
Slutligen, med textrutan vald, höll vi ner Alternativet / Alt och Flytta nycklar och gjort fyra kopior av textrutan. Vi ändrade texten och Y-positionen för varje kopia till:
- Till, 871
- Grafik, 1621
- Programvara, 2371
Du kommer att märka, när du anger platsen för varje textruta, ändras sidan för att passa platsen för texten.
04 av 07Lägg till bildplatshållare
Nästa steg är att sätta bilder mellan textblocken.
Det första steget är att välja Rektangelverktyg och rita en box som sträcker sig från en sida av sidan till den andra. Med rektangeln vald satte vi dess höjd till 250 pixlar och dess Y-position till 425 pixlar. Planen är att de alltid sträcker sig eller kontraktar till sidbredd för att rymma en användares webbläsarevisningsport. För att uppnå detta klickade vi på 100% bredd knappen i egenskaperna. Vad detta gör är grå ut X-värdet och för att säkerställa att bilden alltid är 100% av visningsbredden i en webbläsare.
05 av 07Lägg till bilder till bildinnehavare
Med den valda rektangeln klickade vi på Fyll länk - inte Color Chip - och klickade på Image bläck att lägga till en bild i rektangeln. I Passande område, vi valde Skalan ska passa och klickade på mitthandtag i Placera område för att säkerställa att bilden skalas från mitten av bilden.
Därefter använde vi Alternativet / Alt-Skift-dra teknik för att skapa en kopia av bilden mellan de två första textblocken, öppnade Fill-panelen och bytte bilden till en annan. Vi gjorde det för de återstående två bilderna också.
Med bilder på plats är det dags att lägga till rörelsen.
06 av 07Lägg till Parallax Scrolling
Det finns ett antal sätt att lägga till parallaxrullning i Adobe Muse. Vi ska visa dig ett enkelt sätt att göra det.
När fönstret är öppet klickar du på Bläddra fliken och när den öppnas klickar du på Rörelse kryssrutan.
Du kommer att se värden för Första och Final Motion. Dessa bestämmer hur snabbt bilden rör sig i förhållande till rullningshjulet. Till exempel kommer ett värde på 1,5 att flytta bilden 1,5 gånger snabbare än hjulet. Vi använde ett värde på 0 för att låsa bilderna på plats.
De Horisontella och vertikala pilar bestämma rörelsens riktning.Om värdena är 0, kommer bilderna inte att springa oavsett vilken pil du klickar på.
Mellanvärdet – Nyckelposition - visar den punkt där bilderna börjar röra sig. Linjen ovanför bilden börjar, för den här bilden, 325 pixlar från början av sidan. När bläddringen når det värdet börjar bilden flytta. Du kan ändra detta värde genom att antingen ändra det i dialogrutan eller genom att klicka och dra punkten längst upp i raden antingen upp eller ner.
Upprepa detta för de andra bilderna på sidan.
07 av 07Browsertest
Vid denna tidpunkt var vi färdiga. Det första vi gjorde av uppenbara skäl var att välja Fil> Spara sajt. För webbläsartest valde vi helt enkelt Arkiv> Förhandsgranska sida i webbläsare. Detta öppnade datorns standardwebbläsare och när sidan öppnades började vi bläddra.
