Lær hvordan du legger til rulleeffekter i leseren og bakgrunnsfyll på et webområde ved hjelp av Adobe Muse.

Merk:

Adobe Muse legger ikke lenger til nye funksjoner, og kundestøtte opphører 26. mars 2020. Hvis du vil ha detaljert informasjon og hjelp, kan du se siden for tjenesteopphør for Adobe Muse.

Bruke rulleeffekter på bilder angitt som webleserfyll

Rulleeffekter gjør det mulig å kontrollere hastigheten på bakgrunnsfyllbilder i webleseren samt på sideelementer som ligger side ved side, eller som ikke gjør det. Rulleeffekter kan brukes på webleserfyll som bruker bakgrunnsbilder som ligger side ved side, som er skalert for å fylle, eller som er angitt til opprinnelig størrelse. Webleserfyllet beveger seg i en retning mens siden ruller, alt etter hvilke retninger og hastigheter du angir i Rull-delen i Webleserfyll-menyen.

Merk:

Rullealternativene tones ned og blir ikke tilgjengelige før du legger til et bilde i bakgrunnen av webleserfyllet med Webleserfyll-menyen. Du kan ikke bruke rulleeffekter på et webleserfyll som bare er fylt med en heltrukket farge eller graderingsfarge.

Hvordan legger jeg til Rulleeffekter i webleserfyll?

Følg denne fremgangsmåten for å angi rullebevegelseseffekter for webleserfyll :

  1. I Design-visningen velger du Side > Egenskaper for side. I Layout-fanen angir du feltet Minste høyde til 2000 bildepunkter. Dette sikrer at siden er lang nok til å rulle. Klikk OK for å lagre endringene, og lukk dialogboksen Egenskaper for side.
Oppdater feltet Minste høyde i Egenskaper for side for å gjøre siden lengre.
Oppdater feltet Minste høyde i Egenskaper for side for å gjøre siden lengre.

  1. Klikk koblingen Webleserfyll i Kontroll-panelet. I Fyll-fanen klikker du mappeikonet ved siden av Bilde-delen for å velge en bildefil på skrivebordet. Velg ønsket alternativ i Tilpassing-menyen, og aktiver Rulling-alternativet.
Legg til et bakgrunnsbilde som vises i webleservinduet.
Legg til et bakgrunnsbilde som vises i webleservinduet.

  1. Klikk Rull-fanen. Aktiver avmerkingsboksen Rullebevegelse.
Merk av for Bevegelse for å aktivere rulleeffekter i Webleserfyll-menyen.
Merk av for Bevegelse for å aktivere rulleeffekter i Webleserfyll-menyen.

Bruk et øyeblikk på å gå gjennom Rull-delen i Webleserfyll-menyen. Feltet i den midterste delen (viser for øyeblikket 0px) tilsvarer nøkkelposisjonen (plasseringen av T-håndtaket) som kontrollerer bevegelsen. Standardinnstillingen 0px betyr at T-håndtaket er angitt til den øverste kanten av webleservinduet.

Antall bildepunkter angitt i nøkkelposisjonfeltet betyr at endringene du anga i Startbevegelse-delen, vil bevege seg (i den retningen og ved den hastigheten) mens siden rulles til den plasseringen. Toppen av siden begynner ved 0, og deretter øker antall bildepunkter jo lenger ned du ruller en side. (I Kontroll-panelet og i Transformering-panelet er avstanden fra toppen av siden omtalt som Y-verdien).

Verdiene angitt i Sluttbevegelse-delen brukes når siden er rullet forbi nøkkelposisjonen (plasseringen av T-håndtaket).

Elementet som bevegelsesrulleeffekten er brukt på (i dette tilfellet settet med bilder side ved side angitt som webleserfyllet), beveger seg i retningen(e) som har en verdi som er større enn 0 i feltet. Hvis både de horisontale og vertikale retningene har en verdi som er angitt til 0, er elementet festet til siden og beveger seg ikke.

I Startbevegelse-delen vil du legge merke til at verdiene i feltene har en liten "x" ved siden av seg. Dette står for ganger. I bildet Webleserfyll indikerer Startbevegelse-delen at webleserfyllet beveger seg oppover, 1 ganger (samme hastighet som) rullehastigheten. Hvis den besøkende ruller siden raskere, øker rulleeffektbevegelsens hastighet slik at den samsvarer med denne farten.

I den horisontale (venstre og høyre) delen viser feltet "0", som betyr at webleserfyllet ikke vil bevege seg horisontalt til venstre eller høyre.

Sluttbevegelse-delen inneholder et lignende grensesnitt. I bildet Webleserfyll er webleserfyllet angitt til å bevege seg oppover 1 ganger rullehastigheten, og det vil ikke bevege seg horisontalt.

Merk:

Hold pekeren over Informasjon-knappen (i-ikonet) nederst til venstre i Rull-fanen for å finne ut hvordan rulleeffekter brukes på et webleserfyll.

  1. Klikk pilknappene i Startbevegelse-delen for å angi den vertikale (opp eller ned) og/eller den horisontale (venstre eller høyre) retningen og dermed kontrollere hvilken retning webleserfyllet skal bevege seg i.
  2. Angi numeriske verdier eller klikk oppover- eller nedoverpilknappene for å angi horisontal og vertikal rullehastighet, i Startbevegelse-delen. Disse innstillingene beskrives i detalj nedenfor. Hvis hastighetsfeltet er angitt til 0, betyr det at elementet ikke vil bevege seg i den retningen under rulling (før nøkkelposisjonen er nådd).
  3. Oppdater verdiene i Sluttbevegelse-delen for å angi de ønskede retningene, og angi numeriske verdier i de tilsvarende feltene for å angi rulleeffektenes hastighet.
  4. Klikk hvor som helst på siden for å lukke Webleserfyll-menyen.
  5. Velg Fil > Forhåndsvis side i webleseren for å laste inn siden i et nytt webleservindu. Rull siden for å se rullebevegelseseffekten.
  6. Når du er ferdig med testen, lukker du webleseren og går tilbake til Muse.

Bruke rullebevegelse på bakgrunnsfyll i et sideelement

Hvordan legger jeg til Rulleeffekter i bakgrunnsfyll?

Rullebevegelse kan brukes på objekter på siden som har bakgrunnsbilder som ligger eller ikke ligger side ved side. Følg disse trinnene:

  1. Når du redigerer en side i Design-visningen, velger du Side > Egenskaper for side. Angi Minste høyde til å være mye høyere, for eksempel 2000 bildepunkter, for å være sikker på at siden er lang nok til å rulle. Klikk OK for å lagre endringene, og lukk dialogboksen Egenskaper for side. Du kan også legge til så mye sideinnhold at en lengre side opprettes.
  2. I Design-visningen velger du Rektangelverktøy i Kontroll-panelet.
  3. Tegn et rektangel på siden.
  4. Bruk Fyll-menyen til å angi et bakgrunnsbilde som ligger eller ikke ligger side ved side, og som skal fylle rektangelet.
Legg til et bakgrunnsbilde for å fylle rektangelet, og angi ønskede visningsalternativer i Fyll-menyen.
Legg til et bakgrunnsbilde for å fylle rektangelet, og angi ønskede visningsalternativer i Fyll-menyen.

  1. Klikk Rull-fanen i Fyll-menyen, og angi rullealternativene.
  1. Klikk Rull-fanen i Fyll-menyen. Merk av for Bevegelse, og begynn å angi rullealternativene.
Bruk Rull-fanen i Fyll-menyen for å aktivere Bevegelse for rulleeffekter
Bruk Rull-fanen i Fyll-menyen til å aktivere Bevegelse for rulleeffekter, og angi retningen og hastigheten for bevegelsen.

Legg merke til T-håndtaket som vises over elementet aktivert for rullebevegelse. Håndtaket er en visuell representasjon av nøkkelposisjonen (som for øyeblikket er angitt til 100px over elementet). Ikonet i den midtre delen av Rull-fanen tilsvarer T-håndtakets plassering på siden. Du kan tilbakestille nøkkelposisjonene for når rulleeffektene vil oppstå, ved å angi en ny verdi i det midtre feltet eller ved å dra T-håndtaket på siden. Når du drar T-håndtaket, tones området over nøkkelposisjonen midlertidig ut.

Klikk og dra T-håndtaket, som er en visuell fremstilling av nøkkelposisjonen.
Klikk og dra T-håndtaket til ønsket plassering på siden.

Merk:

T-håndtaket trenger ikke forlenges oppover i forhold til det valgte elementet. Du kan klikke og dra T-håndtaket slik at det er på linje med den øverste kanten av et element, eller dra T-håndtaket slik at det forlenges under et element.

Muse tilbyr komplett fleksibilitet under designprosessen, fordi du kan velge å dra håndtakene eller angi numre i nøkkelposisjonsfeltet for å kontrollere bevegelsen som oppstår når en besøkende ruller siden, helt nøyaktig.

Rull-fanen i Fyll-menyen fungerer på samme måte som Rull-fanen i Webleserfyll-menyen:

  1. Merk et element aktivert for rulleeffekter for bevegelse, og bruk Rull-fanen i Fyll-menyen til å angi nøkkelposisjonen numerisk, eller klikk og dra T-håndtaket på siden for å angi nøkkelposisjonen.
  2. Angi de vertikale og horisontale retningene og tilsvarende bevegelseshastighet(er) i forhold til rullehastigheten på siden, i Startbevegelse-delen. Dette angir bevegelsen som finner sted frem til siden rulles til nøkkelposisjonen.
  3. Angi de vertikale og horisontale retningene og tilsvarende bevegelseshastighet(er) i forhold til rullehastigheten på siden, i Sluttbevegelse-delen. Dette angir bevegelsen som finner sted når siden rulles forbi nøkkelposisjonen.

Merk:

I bildet med rulleegenskapene er rektangelet angitt til å bevege seg mot høyre. Det beveger seg i posisjon 3 ganger raskere enn den besøkendes rullehastighet, og ankommer posisjonen i designen når siden i en webleser treffer nøkkelposisjonen. Når den besøkende ruller forbi nøkkelposisjonen (100 bildepunkter), begynner rektangelet å bevege seg mot venstre 3 ganger raskere enn den besøkendes rullehastighet. I dette eksempelet beveger ikke rektangelet seg vertikalt fordi begge de vertikale feltene er angitt til 0.

  1. Klikk hvor som helst på siden for å lukke Fyll-menyen.
  2. Trykk Forhåndsvisning eller velg Fil > Forhåndsvis side i webleser for å teste rulleeffektene. Rull siden for å se elementet bevege seg.
  3. Hvis du vil fortsette å redigere siden, går du tilbake til Muse eller klikker Design-knappen når du er ferdig med testingen.

Dette produktet er lisensiert i henhold til Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Innlegg på Twitter™ og Facebook dekkes ikke av Creative Commons-vilkår.

Juridiske merknader   |   Regler for personvern på nettet