Divi Parallax: Forstå Effekten

Hvad er Parallax Effekten?

Parallax scrolling er en populær webdesign-teknik, der skaber en illusion af dybde og bevægelse på en hjemmeside. Når du scroller ned ad siden, bevæger baggrundsbilleder sig langsommere end forgrundselementerne, hvilket giver en 3D-lignende effekt. Denne teknik stammer fra computerspil fra 1980'erne, som brugte den til at skabe en følelse af bevægelse og afstand i 2D-grafik. Tænk på Super Mario Bros., hvor elementer i forgrunden bevægede sig hurtigere end baggrunden, hvilket gav en mere levende oplevelse.

Parallax i Divi: To Metoder

Divi gør det utroligt nemt at implementere parallax effekter på enhver baggrundsbillede i sektioner, rækker, kolonner eller moduler. Du skal blot aktivere "Parallax Effect" til "YES" og vælge mellem to metoder: CSS Parallax og True Parallax.

CSS Parallax Metoden

CSS Parallax-metoden bruger udelukkende CSS til at skabe effekten. Den 'fikserer' baggrundsbilledet, mens resten af sidens indhold scroller normalt. Dette får det til at se ud som om, indholdet bevæger sig hen over et statisk baggrundsbillede. Den underliggende CSS-kode, der anvendes, inkluderer typisk:

.et_parallax_bg { position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; background-repeat: no-repeat; background-position: top center; background-size: cover; } .et_pb_section_parallax .et_pb_parallax_css, .et_pb_slides .et_parallax_bg.et_pb_parallax_css { background-attachment: fixed; } 

Med `background-size: cover` vil billedet altid forsøge at dække hele containeren. Dette kan betyde, at dele af billedet bliver skjult, især når browserens størrelse ændres.

True Parallax Metoden

True Parallax-metoden kombinerer CSS og JavaScript for at skabe en mere naturtro parallax effekt. Her bevæger baggrundsbilledet sig en anelse langsommere end sidens øvrige elementer. Dette giver en stærkere illusion af dybde, ligesom i de gamle computerspil.

JavaScript bruges til dynamisk at justere billedets højde og position baseret på browserens størrelse og scroll-positionen. Værdierne for `height` og `transform` (med `translate`) egenskaberne ændres løbende. Et eksempel på den genererede inline CSS kan se således ud:

height: 960.8px; transform: translate(0px, 220.5px); 

Her styrer `height`-værdien billedets højde, mens `transform`-egenskaben med `translate(0px, 220.5px)` flytter billedet 220.5 pixels ned ad siden. Bemærk, at `height`-værdien ofte er større end browserhøjden for at give plads til bevægelsen.

True Parallax-metoden kan få billedet til at virke mere 'strukket' end CSS-metoden, især på mindre skærme. Dette skyldes, at den ofte strækker billedet yderligere for at accommodere større skærmstørrelser og sikre en ensartet oplevelse.

Hvad sker der med billedet, når Parallax aktiveres?

Når du aktiverer parallax, sker der følgende med dit baggrundsbillede:

CSS Metoden

Billedet pakkes ind i en ny `div` med absolut position, der strækker sig over hele browser vinduet. `background-size: cover` sikrer, at billedet altid dækker containeren. Dette betyder, at hvis billedets aspektforhold ikke passer perfekt til containeren, vil det blive beskåret enten vertikalt eller horisontalt for at fylde pladsen. Når du scroller, forbliver billedet 'fast', mens indholdet bevæger sig hen over det.

True Parallax Metoden

Her bruges JavaScript til dynamisk at justere billedets højde og position. JavaScript beregner, hvor meget billedet skal flyttes (`translate`) og ændrer dets højde, så det bevæger sig langsommere end resten af indholdet. Dette skaber en mere sofistikeret parallax effekt, men kan også kræve mere omhyggelig billedvalg, da billedet kan blive beskåret mere markant.

Valg af det Rette Billede til Parallax

At vælge det rigtige billede er afgørende for en succesfuld parallax effekt. Billedet bør ikke være for distraherende, men heller ikke kedeligt. Her er nogle tips:

5 Generelle Tips til Valg af Parallax Billeder

1. Undgå distraherende billeder: Vælg billeder med et klart fokus og undgå for mange detaljer, der kan forstyrre indholdet. Sørg for, at billedet passer til dit websites tema.
2. Hold det stort og simpelt: Store, enkle billeder fungerer bedst, da de bevarer klarheden på tværs af forskellige skærmstørrelser.
3. Brug overlay ved behov: Hvis dit billede har både lyse og mørke områder, der kan gøre tekst ulæselig, kan et farveoverlay (sort eller hvid) forbedre læsbarheden.
4. Gør det interessant: Vælg billeder, der fanger brugerens opmærksomhed og bidrager til historien, dit website fortæller.
5. Overvej billedets komposition: Tænk over, hvilke dele af billedet der vil være synlige, når det bruges i parallax. Motivet bør ideelt set være centreret eller placeret, så det forbliver synligt, uanset beskæring.

Hvilken Størrelse Billede Skal Jeg Bruge?

Der er ingen universel regel for billedstørrelse, da responsivt design spiller en stor rolle. Dog er her nogle retningslinjer:

• Minimumsstørrelse: Sørg for, at dine billeder som minimum er 1366px i bredden.
• Anbefalet størrelse: En opløsning på 1920px i bredden er ideel for at sikre høj kvalitet på større skærme.

Husk, at baggrundsbilleder ofte vil blive beskåret, især i højden. Det er derfor vigtigt at vælge billeder, hvor de vigtigste elementer er placeret, så de forbliver synlige, uanset hvordan billedet beskæres.

Tips til Perfekt Parallax Baggrund

Til Headere og Top Sektioner

Brug gerne Divi's Fullwidth Header Module. For at vise mere af dit parallax billede, kan du tilføje ekstra polstring (padding) til modulet. Gå til modulindstillingerne, vælg "Advanced" fanen, og indtast f.eks. `Padding: 250px 0 250px;` i "Main Element" feltet. Hvis billedet stadig ikke vises optimalt, kan du overveje at beskære toppen af billedet og uploade det igen. Fokuser på billeder, hvor det vigtigste indhold er øverst, da du typisk kun vil se omkring de øverste 700px af billedet i en header.

Til Regelmæssige/Midterste Sektioner

Sørg for at efterlade tilstrækkelig plads omkring dit indhold, så baggrundsbilledet kan ses ordentligt. Brug polstring til at styre dette. Hvis du bruger CSS Metoden, vil du sandsynligvis se mere af bunden af billedet, så overvej at beskære bunden for at fremhæve toppen. Ved True Parallax Metoden vil du primært se toppen af billedet, så behandl dem som headere.

Eksempel på Billedbrug

Et billede af en bro med et interessant motiv til siden og mindre vigtigt indhold i bunden fungerer godt, da budskabet forbliver intakt. CSS-metoden viser tydeligt, hvordan billedet er fikseret, mens True Parallax-metoden giver en mere dynamisk bevægelse.

Avancerede Justeringer med Custom CSS

Hvis standardindstillingerne ikke giver det ønskede resultat, kan du bruge brugerdefineret CSS til at finjustere billedets position. Du kan tilføje en CSS-klasse (f.eks. "parahacks") til din sektion via "Advanced" -> "CSS Class" i sektionsindstillingerne.

CSS Hacks for Billedposition

Brug følgende CSS i "Page Settings" -> "Advanced" -> "Custom CSS" boksen:

For CSS Metoden:

• Centreret: .parahacks .et_parallax_bg { Background-position: center center !important; }
• Bundjusteret: .parahacks .et_parallax_bg { background-position: bottom center !important; }
• Flyt op (f.eks. 150px): .parahacks .et_parallax_bg { background-position: center -150px !important; }

For True Parallax Metoden: (Husk at tage højde for den ekstra højde, som JavaScript tilføjer)

• Mere centreret (juster negativ værdi): .parahacks .et_parallax_bg { background-position: center -100px !important; }
• Mere bundjusteret (juster negativ værdi): .parahacks .et_parallax_bg { background-position: center -220px !important; }

Opsummering

Divi tilbyder kraftfulde parallax-funktioner, der nemt kan implementeres. Ved at forstå forskellen mellem CSS og True Parallax metoderne, vælge de rette billeder og anvende små justeringer med polstring eller brugerdefineret CSS, kan du skabe imponerende visuelle effekter på din hjemmeside. Eksperimenter med forskellige billeder og indstillinger for at opnå det perfekte resultat for netop dit projekt.

Hvis du vil læse andre artikler, der ligner Divi Parallax: Forstå Effekten, kan du besøge kategorien Teknologi.