Kuinka rinnakkaisvaikutusta käytetään web-suunnittelussa

Parallax ei ole uusi lääke tai lääke markkinoilla; itse asiassa se ei ole ollenkaan uusi. Ihmiset ovat käyttäneet sitä ihmisen aamusta tai valaistumisesta lähtien, sen mukaan, kumpi tuli ensin. Yhtälö, joka määrittelee parallaksivaikutuksen matemaattisesti - ovat käyttäneet tähtitieteilijät ja valtameren navigoijat vuosisatojen ajan etäisyyden ja suunnan laskemiseksi. Parallax-vieritystä on käytetty animaatiossa 1940-luvulta lähtien ja videopelissä 1980-luvulta lähtien. Parallaksia-tekniikoiden käyttö web-suunnitteluun on suhteellisen uusi integrointi, ja se on kasvussa monien trendikkäiden verkkosivustojen ja organisaatioiden kanssa. Tämä viesti kertoo paralaksiefektistä ja parallaksivierityksestä, ja tuo esiin useita tätä ominaisuutta hyödyntäviä verkkosivustoja.

Historiallinen tausta ja miten parallaksi-ilmiö toimii

Sana parallaksi on johdettu kreikan sanasta parallaksi, joka tarkoittaa muutosta . Kohteen havaittavissa oleva sijainti millä tahansa etäisyydellä riippuu katsojan näkökulmasta tai paikasta. Perspektiivin muutos tapahtuu, kun lähellä olevaa objektia havaitaan eri näkökulmista ja kaukaista taustaa vasten.

Esimerkiksi Washingtonin muistomerkki DC: ssä havainnollistaaksesi perspektiivin muutoksen vaikutusta. Jos seisotte Kansallisen toisen maailmansodan muistomerkin oikealla puolella lähellä 17th Street SW ja vastapäätä Washingtonin muistomerkkiä näyttää olevan vain Yhdysvaltojen pääkaupunkitalon vasemmalla puolella, kutsumme tätä "näkökulma A", kuten alla olevassa kuvassa A esitetään Google Earthin kanssa.

Kuvio A

Mennään nyt eteenpäin siirtääksesi näkökulmamme jalkakäytävälle vain vasemman puolelle toisen maailmansodan muistomerkin sisäänkäynnin 17. kadun SW puolella, kun jatkamme kohti Washingtonin muistomerkkiä. Näkemyksemme on muuttunut, samoin kuin perspektiivimme, näkemystä on muutettu ja nyt Washingtonin muistomerkki näyttää olevan Yhdysvaltojen pääkaupungin rakennuksen oikealla puolella ( kuva B - näkökulma B). Tämä on parallaksivaikutus. Etualalla olevat objektit näyttävät liikkuvan eri nopeuksilla ja kulmissa suhteessa taustakuvaan.

Parallaksia-periaate voidaan selittää edelleen geometrialla ja tunnetuilla muuttujilla, jotka alkavat paralaksikulmalla a, joka on kahden näkökulman A (näkökulma A) ja B (näkökulma B) välille muodostettu kulma suhteessa esineeseen O (Washingtonin muistomerkki), ja lähtöviivan etäisyys D kahden katselupisteen välillä, sitten etäisyys R voidaan johtaa, kuten kuvassa C esitetyssä yksinkertaisessa kolmiossa esitetään.

Jokainen ihminen käyttää jo jo päivittäin parallaksi-ilmiötä, mutta et todennäköisesti ymmärtänyt sitä, koska se on jo ollut olennainen osa kaikkia, joilla on kaksi normaalisti toimivaa silmää. Ihmisen normaali visio käyttää parallaksia arvioidakseen etäisyydet esineisiin ja valaistusnopeudella, tosiasiassa niin nopeasti, että et koskaan tunnista sitä, ennen kuin testaat sen itse. Saadaksesi lähikuvan esimerkistä parallaksiefektistä toimistosi tai kodin mukavuuksissa pitämällä kättäsi edessäsi silmien korkeudella ja osoittamalla etusormesi ylöspäin, nyt vaihtoehtoisesti vilkkuu jokaista silmääsi. Huomasitko, kuinka etusormesi käsivarsilla näyttää liikkuvat taustalla oleviin esineisiin nähden? Tämä on parallaksivaikutus toiminnassa! Ja tässä tapauksessa lähtöviiva on lyhyt etäisyys kahden silmäsi välillä. Aivosi mittaavat automaattisesti parallaksikulman ja antaa sinulle intuitiivisen arvauksen läheisen kohteen etäisyydestä, joka tässä tapauksessa oli sormesi, toisin sanoen tämä on syvyyshavainto työssä.

Tähtitieteilijät ovat käyttäneet Parallaxia taivaankappaleiden etäisyyden laskemiseen ja myös merenkulun navigointiin objektien välisten etäisyyksien määrittämiseksi, joissa triangulaatiota käytetään nykyisen sijainnin määrittämiseen, mikä on hyvin samanlainen myös suunnistustekniikoiden kanssa.

Stellar parallax käyttää yksinkertaistettua kaavaa löytää taivaallisten kappaleiden etäisyys triangulaatiolla, missä yhtälö d = 1 / p; Etäisyys jäsentä = lähtöviiva AU / paralaksikulma kaarisekuntia, missä 1 AU on maapallon kiertorata ja 1 kaari-sekunti on 3.26 valovuotta.

Varhainen rinnakkaisrulla

Parallax-vieritys on erityinen tekniikka, jota käytetään grafiikan ja animaation avulla simuloida liikettä taustakuvien kanssa, jotka liikkuvat eri nopeudella kuin etualalla olevat kuvat. Parallax-vieritystä käytettiin ensimmäisen kerran 1940-luvulla sarjakuvaanimaatioon monitasokameran tekniikoita käyttämällä. Parallaksi-vieritysvaikutus saavutti ensimmäisen tietokonegrafiikan käyttöönoton 2D-videopelillä 1980-luvulla Moon Patrol-pelipelin kanssa, ja se tunnetaan myös yhtenä ensimmäisistä peleistä, joissa hyödynnetään sivuttaisvieritysvaikutusta.

Parallaksimenetelmät

Vierittämiseen käytetään useita menetelmiä.

  • Kerrokset - Määritetään useita tausta- ja etualakerroksia, jotka voivat liikkua vaaka- tai pystysuunnassa ja vierittää eri nopeuksilla. Jotkut ovat automaattisesti ohjattavia ja toiset riippuvat käyttäjän vuorovaikutuksesta, ja ne voidaan myös asettaa yhdistelmäksi.
  • Sprite - Yhdistämällä useita kuvia tai bittikarttoja pseudo-kerroksiin yhden kuvan luomiseksi, jolloin tasainen kuva voi myös näyttää olevan kolmiulotteinen ja jossa vain yksi kuvan kuva näkyy paikasta riippuen.
  • Toistuva kuvion käsittely - Useat ruudut tai näytöt näyttävät kelluvan toistuvien taustatietojen yli.
  • Rasteri - Kuvassa olevat pikselirivit yhdistetään ja päivitetään tyypillisesti ylhäältä alas -järjestyksessä pienellä viiveellä yhden rivin ja seuraavan rivin piirtämisen välillä.

Parallax-vieritys web-suunnittelussa

Monet verkkosivustot ovat olleet esillä molemmissa opetusohjelmaesimerkkeissä ja "Best of" -luetteloissa, joissa korostetaan niitä, jotka käyttävät parallaksista vieritystä. Menetelmiin sisältyy tyypillisesti HTML5: n, CSS3: n, grafiikkasuunnittelun, jQueryn ja JavaScriptin yhdistelmiä parallaksivieritysvaikutusten tehostamiseksi.

Seuraavat kymmenen esimerkkiä kuvaavat erilaisia ​​menetelmiä parallaksivierityksen käyttämiseksi web-suunnittelussa, jotkut vierittävät vaakatasossa, toiset pystysuunnassa ja toiset käyttävät yhdistelmää menetelmiä.

Aktivoida

Aktivoi verkkosivustolla huomaa, että kun vierität sivua alaspäin, teksti, tausta ja etualakuvat vierittävät yksittäisillä ja eri nopeuksilla. Tämä saavutetaan JavaScript: n avulla ja määrittelemällä datanopeusominaisuus HTML: n sisällä jokaiselle sisältökerrokselle, käskemällä näitä elementtejä vierittämään eri nopeuksilla.

The Beatlesin rockband

Siirrä hiirtä The Beatles Rockband -sivustossa näytön yläreunassa ja huomaa, että pilvet vierittävät vasemmalle tai oikealle kohdistimen liikkeestä riippuen JavaScriptiä ja CSS: ää käyttämällä.

Cultural Solutions UK

Yhdistyneen kuningaskunnan Cultural Solutions -sivusto käyttää yhdistelmää vaaka- ja pystysuunnassa vierekkäisiä vieritystehosteita etualalla olevien tekstien ja kuvien kanssa liikkuessa nopeammin kuin useita taustakuvia ja sisältöä.

Fishy.com

Brasiliassa Recifessä sijaitseva Fishy.com.br käyttää rinnastusvieritystä sivustollaan mainostaakseen verkko- ja mobiilipohjaiseen viestintään keskittyviä tuotteita ja palveluita asiakkaille, kuten esimerkiksi Kraft ja Wal-Mart.

Sankari WordPress-teema

Hero on reagoiva ja minimaalinen WordPress-portfolion teema, ja yksi keskeisistä ominaisuuksista on parallaksin kotisivun banneri, jonka avulla voit näyttää avainsanasi kiinnostavalla tavalla.

Uusi Seelanti

Uuden-Seelannin verkkosivusto käyttää täydellistä voimaa parallaksin vieritykseen kaikkialla, ja tarjoaa monia tapoja tutustua maahan matkaideoita ja paikallisia tietoja varten.

Nike Better World

Nike Better World tunnustetaan yhdeksi ensimmäisistä verkkosivustoista, jotka sisällyttävät parallaksivaikutuksen web-suunnitteluun HTML5-, jQuery-, JavaScript- ja JavaScript-polyfills-täytteiden sekä CSS3: n avulla PHP-ympäristössä.

OK Studios

OK-studiot, jotka sijaitsevat Hampurissa, Saksassa, käyttävät verkkosivustollaan tehokasta rinnastusvieritystä, joka mainostaa projektejaan, suunnittelua, tekniikkaa, laboratorioita ja muita liiketoimintaan liittyviä aiheita.

QMusic Titanic

Hollantilainen verkkosivusto QMusic Titanic käyttää parallaksivieritystä erittäin tehokkaalla tavalla, jolloin kävijä voi sukeltaa lyhyeen Titanicin historiaan vesilinjan alapuolella ja sen sairastuneesta katastrofista lopulliseen löytöön Atlantin pohjassa. Valtameri.

Soleil Noir

Pariisissa sijaitseva Soleil Noir Studio käyttää rinnastusvieritystä Believe In -sivullaan, joka tuo esiin kahdeksantoista inspiraation osaa uskoakseen viihdeeseen, muotiin, iOS: iin, terveyteen, salamaan, itseesi, tulevaisuuteen ja muihin aiheisiin.

Tulevat artikkelit osoittavat parallaksivaikutuksen sisällyttämisen web-suunnitteluun käyttämällä taustakuvien, etualalla olevien kuvien, osioiden, artikkeleiden, jQueryn, CSS3: n ja HTML5: n yhdistelmää.

© Copyright 2020 | mobilegn.com