Hvordan parallakseffekten brukes i webdesign

Parallax er ikke noe nytt legemiddel eller medisiner på markedet; faktisk er det ikke nytt i det hele tatt. Den har blitt brukt av mennesker siden menneskets morgen, eller opplysning, avhengig av hva som kom først. Ligningen som definerer parallakseffekten i matematiske termer - har blitt brukt i århundrer av astronomer og havnavigatorer for å beregne avstander og retning. Parallax-rulling har blitt brukt til animasjon siden 1940-tallet og i videospill siden 1980-tallet. Bruken av parallaxteknikker for webdesign er en relativt ny integrasjon og får stadig større popularitet hos mange trendy nettsteder og organisasjoner. Dette innlegget vil presentere en historie om parallakseffekten og parallaksrullingen, og deretter markere flere nettsteder som bruker denne funksjonen.

Historisk bakgrunn og hvordan parallakseffekten fungerer

Ordet parallax er avledet fra det greske begrepet parallaxis, som betyr endring . Den observerbare plasseringen av et objekt på en gitt avstand er avhengig av synspunktet eller posisjonen til betrakteren. Perspektivforskyvning skjer når et nært objekt observeres fra forskjellige synsvinkler, og mot en fjern bakgrunn.

For å illustrere effekten av perspektivforskyvning, ta Washington Monument i DC som et eksempel. Hvis du står på høyre side av National National War II Memorial nær 17 th Street SW, og vender mot Washington Monument, ser det ut til å være til venstre for USAs Capitol-bygning, kaller vi dette "Viewpoint A", som illustrert med Google Earth i figur A nedenfor.

Figur A

La oss gå videre for å flytte synspunktet til fortauet like til venstre for inngangen til National National War II Memorial på 17th Street SW-siden når vi fortsetter mot Washington Monument. Synspunktet vårt har endret seg, og det samme har perspektivet vårt, utsikten har blitt endret, og nå ser ut til at Washington Memorial er til høyre for USAs hovedbygning, ( figur B - synspunkt B). Dette er parallakseffekten. Objekter i forgrunnen ser ut til å bevege seg i forskjellige hastigheter og vinkler i forhold til objekter i bakgrunnsbildet.

Parallax-prinsippet kan forklares videre med geometri og kjente variabler som starter med parallaksvinkelen a som er vinkelen som er opprettet mellom de to utsiktspunktene A (utsiktspunkt A) og B (utsiktspunkt B) i forhold til objektet O (Washington Monument), og grunnlinjeavstanden D mellom de to synspunktene, så kan avstanden R avledes, som illustrert i den enkle trekanten som er vist i figur C.

Hvert menneske bruker allerede parallakseffekten hver dag, men det visste du sannsynligvis ikke, fordi det allerede har vært en integrert del av alle som har to normalt fungerende øyne. Normalt menneskesyn bruker parallaks for å estimere avstander til gjenstander og i lynets hastighet, så raskt faktisk at du aldri kjenner deg igjen i det før du tester det ut selv. For å få et nærbildeeksempel på parallakseffekten på kontoret eller hjemme, holder du armen ut foran deg i øyehøyde og peker pekefingeren opp, nå alternativt blink hver av øynene dine. Merket du hvordan pekefingeren på armlengdes lengde ser ut til å bevege seg i forhold til gjenstander i bakgrunnen? Dette er parallakseffekten i aksjon! Og i dette tilfellet er baseline den korte avstanden mellom de to øynene dine. Hjernen din måler automatisk parallaksvinkelen, og gir deg en intuitiv gjetning for avstanden til det nærliggende objektet, som i dette tilfellet var fingeren, med andre ord er dette dybdesynet på jobben.

Parallax har blitt brukt av astronomer for å beregne avstanden til himmellegemer, og også for sjøfartsnavigering for å bestemme avstander mellom objekter der triangulering brukes til å bestemme gjeldende posisjon, noe som også ligner orienteringsteknikker.

Stellar parallax bruker den forenklede formelen for å finne avstand til himmelske kropper ved triangulering, der ligningen d = 1 / p; Distanse parsecs = Baseline AU / Parallax Angle Arc seconds, der 1 AU er jordens bane, og 1 Arc sekund er 3, 26 lysår.

Tidlig rullering av parallax

Parallax-rulling er den spesielle teknikken som brukes med grafikk og animasjon for å simulere bevegelse med bakgrunnsbilder som beveger seg i en annen hastighet enn forgrunnen. Parallax-rulling ble første gang brukt på 1940-tallet for tegneserieanimasjon ved bruk av flerfelt kamerateknikker. Parallax-rulleeffekten oppnådde innledende datamaskingrafikk ved bruk av 2D-videospill på 1980-tallet med arkadespillet Moon Patrol, og var også kjent som et av de første spillene som utnyttet sideskrulleffekten.

Parallaksemetoder

Det er flere metoder som brukes for å bla.

  • Lag - Flere bakgrunns- og forgrunnslag er definert som kan bevege seg i horisontale eller vertikale retninger, og bla i forskjellige hastigheter, noen blir automatisk kontrollert og andre er avhengig av brukerinteraksjon, og kan også settes i en sammensatt.
  • Sprite - Kombinere mange bilder eller bitmapper til pseudo-lag for å lage et enkelt bilde, hvorved et flatt bilde også kan se ut til å være tredimensjonalt, og hvor bare en del av bildet vises, avhengig av posisjon.
  • Gjentatt mønstermanipulering - Flere fliser eller skjermer ser ut til å flyte over gjentatte bakgrunner.
  • Raster - Linjer med piksler i et bilde er vanligvis sammensatt og oppdatert i en topp-til-bunn rekkefølge med en liten forsinkelse mellom tegning av en linje og neste linje.

Parallax-rulling i webdesign

Mange nettsteder har blitt omtalt i både veiledningseksempler og "Best of" -lister som fremhever de som bruker parallax-rulling. Metodene involverer vanligvis kombinasjoner av HTML5, CSS3, grafikkdesign, jQuery og JavaScript for å drive parallax-rulleeffektene.

De følgende ti eksempler illustrerer forskjellige metoder for å anvende parallaksrulling i webdesign, noen bla horisontale, noen vertikale, og noen bruker en kombinasjon av metoder.

Aktiver

Legg merke til at når du blar nedover nettstedet, ruller tekst-, bakgrunns- og forgrunnen bilder med individuelle og forskjellige hastigheter. Dette oppnås gjennom JavaScript og definere en datahastighetsattributt i HTML for hvert lag med innhold, og instruere disse elementene til å rulle med forskjellige hastigheter.

The Beatles Rockband

På Beatles Rockband-nettstedet kan du bevege musen rundt på toppen av skjermen og legge merke til at skyene vil bla til venstre eller høyre avhengig av markørbevegelsen ved å bruke JavaScript og CSS.

Cultural Solutions Storbritannia

Cultural Solutions UK-nettstedet bruker en kombinasjon av horisontale og vertikale parallax-rulleeffekter med tekst og bilder i forgrunnen som beveger seg med en raskere hastighet enn flere bakgrunnsbilder og innhold.

Fishy.com

Fishy.com.br basert i Recife, Brasil, bruker parallax-rulling på nettstedet sitt for å markedsføre produktene og tjenestene som er fokusert på nett- og mobilbasert kommunikasjon for klienter som Kraft og Wal-Mart, for eksempel.

Hero WordPress Theme

Hero er et responsivt og minimalt WordPress-porteføljetema, og en av nøkkelfunksjonene er parallax-hjemmesidebanneret som lar deg vise nøkkelmeldingen på en engasjerende måte.

New Zealand

Nettstedet på New Zealand bruker full kraft av parallaksrulling gjennom, og gir mange måter å utforske landet for reiseideer og -steder.

Nike Better World

Nike Better World er anerkjent som et av de første nettstedene som har integrert parallakseffekten i webdesign, ved bruk av HTML5, jQuery, JavaScript og JavaScript polyfyll, og CSS3 i et PHP-miljø.

OK Studios

OK Studios ligger i Hamburg, Tyskland, bruker effektiv parallaksrulling på sin hjemmeside for å promotere sine prosjekter, design, teknologi, lab og andre emner relatert til virksomheten.

QMusic Titanic

Det nederlandske baserte nettstedet QMusic Titanic bruker rulling av parallax på en veldig effektiv måte, slik at besøkende kan dykke ned i en kort historie om Titanic fra vannlinjen og dens ulykkelige skjebne til den eventuelle oppdagelsen på gulvet i Atlanterhavet Hav.

Soleil Noir

Soleil Noir Studio, med base i Paris, bruker parallaksrulling på deres Believe In-side og fremhever atten deler av inspirasjonen for å tro på underholdning, mote, iOS, helse, flash, deg selv, fremtiden og andre emner.

Fremtidige artikler vil demonstrere å innlemme parallakseffekten i webdesign ved å bruke en kombinasjon av bakgrunnsbilder, forgrunnen bilder, seksjoner, artikler, jQuery, CSS3 og HTML5.

© Copyright 2021 | pepebotifarra.com