En av de "hotteste" teknikkene på nettet i dag er parallaxrulling. Vi har alle vært på de stedene hvor du roterer rullehjulet på musen, og innholdet på siden beveger seg opp og ned eller over siden mens du roterer musehjulet.
For de nye til webdesign og grafisk design, kan denne teknikken være svært vanskelig å oppnå på grunn av mengden CSS som kreves.
Hvis det beskriver deg, er det en rekke programmer som bare kan appellere til grafikere. De bruker i utgangspunktet en kjent sidelayout til nettsider, noe som betyr at det ikke er mye, om noen, koding er involvert. En applikasjon som virkelig har racket inn i fremtreden er Adobe Muse.
Arbeidet som gjøres av grafikkprofiler ved hjelp av Muse, er ganske fantastisk, og du kan se et utvalg av hva du kan gjøre ved å besøke Muse Dagens nettsted . Selv om webproffene har en tendens til å betrakte Muse som en slags "wind-up toy", brukes den også av designere til å lage mobile og web prototyper som til slutt vil bli levert til utviklerne på deres lag.
En teknikk som er utrolig lett å oppnå med Muse, er parallaxrulling, og hvis du vil se den fullførte versjonen av øvelsen. Når du ruller musens rullehjul, synes teksten å bevege seg opp eller ned på siden og bildene endres.
La oss komme i gang.
01 av 07Lag en webside
Når du starter Muse klikker du på Nytt nettsted link. Dette åpner Egenskaper for nye nettsteder. Dette prosjektet vil bli designet for et stasjonært program, og du kan velge det i Første oppsett hurtigmenyen. Du kan også angi verdiene for antall kolonner, ryggbredde, marginer og polstring. I dette tilfellet var vi ikke veldig bekymret for dette og bare klikket OK.
Formater siden
Når du angir nettstedets egenskaper og klikket OK du ble tatt til det som kalles Plan utsikt. Det er en Hjem side øverst og a Master side på bunnen av vinduet. Vi trengte bare en side. For å komme til designvisning dobbeltklikket vi på Hjemmesiden som åpnet grensesnittet.
Til venstre er noen grunnleggende verktøy, og til høyre er en rekke paneler brukt til å manipulere innholdet på siden. Langs toppen er egenskapene, som kan brukes på siden, eller noe som er valgt på siden. I dette tilfellet ønsket vi å ha en svart bakgrunn. For å oppnå dette, klikker vi på Nettleserfylling fargebrikke og valgte svart fra fargeplukkeren.
03 av 07Legg til tekst på siden
Det neste trinnet er å legge til litt tekst på siden. Vi valgte Tekstverktøy og tegnet en tekstboks. Vi skrev ordet "Velkommen", og i Egenskapen satt teksten til Arial, 120 piksler Hvit. Center Aligned.
Vi byttet deretter til markeringsverktøyet, klikket på tekstboksen og angav det Y posisjon til 168 piksler fra toppen. Med tekstboksen fremdeles valgt, åpnet vi Juster panelet og justerte tekstboksen til sentrum.
Til slutt, med tekstboksen valgt, holdt vi ned Tilvalg / Alt og Skifte nøkler og laget fire kopier av tekstboksen. Vi endret teksten og Y-posisjonen til hver kopi til:
- Til, 871
- Grafikk, 1621
- Programvare, 2371
Du vil legge merke til at siden du angir plasseringen til hver tekstboks, blir siden endret for å imøtekomme plasseringen av teksten.
04 av 07Legg til bildesteder
Det neste trinnet er å sette bilder mellom tekstblokkene.
Det første trinnet er å velge Rektangelverktøy og tegne en boks som strekker seg fra den ene siden av siden til den andre. Med rektangelet valgt, satte vi det høyde til 250 piksler og dets Y-posisjon til 425 piksler. Planen er å få dem til alltid å strekke seg eller kontrakt til sidebredden for å imøtekomme en brukers nettleservisport. For å oppnå dette, klikket vi på 100% bredde knappen i egenskapene. Hva dette gjør er grå ut X-verdien og for å sikre at bildet alltid er 100% av visningsbredden i en nettleser.
05 av 07Legg til bilder til bildeholderne
Med den valgte rektangelen klikket vi på Fyll lenke - ikke fargekipen - og klikket på Image blekk å legge til et bilde i rektangelet. I montering område, vi valgte Skala for å passe og klikket på senterhåndtak i Stilling område for å sikre at bildet er skalert fra midten av bildet.
Deretter brukte vi Tilvalg / Alt-Shift-drag teknikk for å lage en kopi av bildet mellom de to første tekstblokkene, åpnet fyllpanelet og byttet bildet for en annen. Vi gjorde dette for de resterende to bildene også.
Med bilder på plass, er det på tide å legge til bevegelsen.
06 av 07Legg til Parallax Scrolling
Det finnes en rekke måter å legge til parallell rulling i Adobe Muse. Vi skal vise deg en enkel måte å gjøre det på.
Når Fill-panelet er åpent, klikker du på Rull kategorien og når den åpnes, klikker du på Bevegelsesboks.
Du vil se verdier for Første og Final Motion. Disse bestemmer hvor raskt bildet beveger seg i forhold til rullehjulet. For eksempel vil en verdi på 1,5 flytte bildet 1,5 ganger raskere enn hjulet. Vi brukte en verdi på 0 for å låse bildene på plass.
De Horisontale og vertikale piler bestemme bevegelsens retning.Hvis verdiene er 0, vil bildene ikke budge uansett hvilken pil du klikker på.
Mellomverdien – Nøkkelposisjon - viser punktet hvor bildene begynner å bevege seg. Linjen over bildet starter, for dette bildet, 325 piksler fra toppen av siden. Når rullen når den verdien, begynner bildet å bevege seg. Du kan endre denne verdien ved å enten endre den i dialogboksen eller ved å klikke og dra punktet øverst på linjen, enten opp eller ned.
Gjenta dette for de andre bildene på siden.
07 av 07Nettlesertest
På dette tidspunktet var vi ferdige. Det første vi gjorde av åpenbare grunner var å velge Fil> Lagre nettsted. Til nettlesertest valgte vi ganske enkelt Fil> Forhåndsvis side i nettleser. Dette åpnet datamaskinens standard nettleser, og når siden ble åpnet, begynte vi å bla.
