Liikeessä parallaksi tarkoittaa objektin sijainnin muutosta jotakin taustaa vasten suhteessa paikallaan olevaan tarkkailijaan. Tämä termi on saavuttanut suosion Internetissä. Erityisesti sivusto näyttää mielenkiintoiselta, jonka suunnittelussa on dynaamisia elementtejä. Parallax on web-sivujen suunnittelutekniikka, jota verkkovastaavat käyttävät houkutellakseen suuria kävijöitä.
Mikä on parallaksi
Parallaksivieritystä voidaan käyttää sekä pystysuorassa että suorassa linjassa. Nintendo on paras esimerkki. Monet meistä muistavat nostalgialla tietokonepelejä, joita edustaa päähenkilöiden liikkuminen näytön vasemm alta puolelta oikealle. On myös mahdollista liikkua alaspäin pystysuoraan sijoitettua suoraa pitkin. Parallaksiefektiä verkossa käytetään usein. Voit luoda pystysuoran liukusäätimen JavaScriptin tai CSS:n avulla 3.
Kuvattu kolmiulotteinen tilavaikutelma on juuri heille ominaista. Pelien luojat käyttivät useita taustakerroksia. Ne eroavat rakenteeltaan, kun taas liike suoritetaan eri tavallanopeus.
Älä ajattele, että parallaksi on vain 3D-tehoste. Sivulla voit siirtää olemassa olevia kuvakkeita. Lisäksi se näyttää varsin houkuttelev alta. Erityisen hyvä vaihtoehto on käyttää omaa liikerataa kullekin niistä. Tässä tapauksessa käytetään erilaisia kuvakkeita, jotka liikkuvat eri reittiä pitkin. Tämä malli herättää huomion.
Kuva herää eloon
On vaikea löytää sivustoa ilman kuvia. Laadukkaat ja näyttävät piirustukset houkuttelevat kävijöitä. Mutta eniten huomiota kiinnitetään erilaisiin dynaamisiin kuviin. Itse asiassa, jos sivustolla vierailee liikettä, se herättää huomion. Lisää merkittävästi todennäköisyyttä, että vierailija palaa resurssiin dynaamiseen kuvaan. Näyttikö se liikkuvan vai ei? Siksi vierailijoiden houkuttelemiseksi sivustolle kannattaa tutkia sellaista asiaa kuin parallaksiefekti.
Esimerkkejä liikkuvan kuvan sivustosta:
- hvorostovsky.com;
- www.kagisointeractive.com.
Kuten esimerkeistä näkyy, käyttökokemusta parannetaan alakohtiin avattavien valikoiden avulla. Tällainen elementti säästää vierailijoiden aikaa, joten se on heille houkutteleva.
jKyselykirjasto
Termi jQueryParallax määrittelee samannimisen kirjaston. Sen ansiosta liikkeen vaikutus on helppo saavuttaa 3D-muodossa. jQuery-kirjastossa 3D-havainnointi luodaan monin eri tavoin. Yksi niistä koostuu taustaobjektien samanaikaisesta horisontaalisesta liikkeestäeri nopeus. Tälle kirjastolle on ominaista suuri määrä erilaisia ominaisuuksia. Ja tässä kuvattu siirtymä on vain pieni osa sen ominaisuuksista.
Sivusto näyttää varsin houkuttelev alta, jonka luomiseen käytettiin erilaisia moderneja elementtejä. Yksi niistä on parallaksi. Esimerkkisivustot voivat näyttää tältä:
- www.grabandgo.pt;
- www.fishy.com.br;
- www.noleath.com;
- buysellwebsite.com.
jParallaksia edustavat tasot, jotka liikkuvat hiiren kanssa. Dynaamisille elementeille on ominaista absoluuttinen asemointi (position:absolute;). Jokaiselle niistä on ominaista oma koko ja liike yksilöllisellä nopeudella. Se voi olla tekstiä tai kuva (resurssin tekijöiden pyynnöstä).
Kävitys sivuston vierailijasta
Sen jälkeen ihminen yleensä kiinnittää huomiota siihen, että sivu on suunniteltu laadukkaasti, kätevästi ja asiantuntevasti. Tätä tosiasiaa yleensä kunnioitetaan. Sattuu niin, että herää uteliaisuus kokeilla muita elementtejä. Internetissä on v altava määrä identtisiä sivustoja. Kuinka tehdä resurssistasi erityisen?
Jos pidät suunnittelusta, vierailija viipyy pidempään. Siten todennäköisyys, että hänet houkuttelee lähetetyt tiedot, kasvaa, hän osoittaa kiinnostusta. Tämän seurauksena henkilö käyttää tarjottua palvelua, tuotetta tai kampanjatarjousta.
vanhat suosikkipelit
"Parallaksin" käsitteen pitäisi olla tuttu kaikille80- ja 90-luvun konsolifanit. Tämä koskee pelejä:
- Mario Bros.
- Mortal Kombat.
- Streets of Rage.
- Moon Patrol.
- Kilpikonnat ajassa.
Toisin sanoen parallaksi on tekniikka, jota on käytetty melko pitkään. Nämä pelit muistetaan todella nostalgialla. Loppujen lopuksi ne näyttävät olevan täynnä tuon ajanjakson luonnetta.
Näytön kuvat luodaan käyttämällä tekniikkaa, kuten parallaksivieritystä. Ei ole mitään yllättävää, että tämä tekniikka on saavuttanut ansaitun suosion. Tämä muotoilukonsepti on otettu lämpimästi vastaan 80-90-luvuilla leikkineiden tai ystävien vapaa-ajan katsojien keskuudessa.
Parallaksivieritys
Maailman johtavien merkkien markkinoijat ovat pitkään käyttäneet kaikenlaisia teknisiä edistysaskeleita. Näin on mahdollista kiinnostaa myös satunnainen vierailija sivustolle.
Nike on käyttänyt parallaksivieritystä melko menestyksekkäästi. Yrityksen alkuperäisen verkkosivuston suunnittelivat Weiden ja Kennedy. Mutta tämä malli ei säilynyt. Resurssia päivitettiin asteittain aikamme trendien mukaisesti. Activatedrinks.com on esimerkki sivustosta, jonka ulkoasu muistuttaa Niken aikakauden markkinoijien käyttämää sivustoa.
Kaiuttimia ei saa olla liikaa
Muista, että sivuston suunnittelu on usein tärkein vierailijaa ohjaava kriteeri. Huonosti toteutetturesurssi jättää yleensä käyttäjälle vaikutelman omistajayrityksen kevytmielisyydestä. Mutta sivusto, jossa on kaikenlaisia houkuttelevia suunnitteluelementtejä, osoittaa organisaation omistajien halun kiinnostaa kävijöitä.
Tässä kannattaa muistaa parallaksi. Tämä on upea työkalu. Mutta heidänkään ei pitäisi olla liian innostunut. Koska sivua, jolla on suuri määrä erilaisia liikkuvia elementtejä, on melko vaikea havaita. Suunnittelusta on parasta tehdä kohtalaisen tyylikäs ja ymmärrettävä.
Dynaamisten tulee olla yksittäisiä elementtejä, jotka vaativat valinnan. Saattaa olla myös kuva, joka luodaan käyttämällä tasoja, jotka liikkuvat toistensa suhteen. Älä unohda, että käyttäjäsivusto on suunniteltu ensisijaisesti vierailijoille. Sen ei tarvitse olla verkkovastaavan mestariteos, joka on laittanut siihen kaiken tietonsa. Loppujen lopuksi tällainen lähestymistapa vain vaikeuttaa havaintoa.
Sivuston navigoinnin luominen
Kuinka tehdä parallaksi? Tämä kysymys kiinnostaa monia verkkosivustojen rakentajia. Tunnisteiden kirjoittamisen hienouksia ei tarvitse tietää. On erittäin kätevää käyttää erityisiä resursseja Internetissä. Saatavilla olevien ehdotusten suuresta määrästä voidaan erottaa seuraavat avustajat:
- Plax on ohjelma, jota on melko helppo käyttää. Se pyrkii tekemään sivusta sujuvan liikuttamalla hiirtä.
- jQuery Parallax Image Slider – jQuery-laajennus, jota käytetään kuvan liukusäätimien luomiseen.
- Jquery Image Parallax - sopii läpinäkyvien piirustusten suunnitteluun. Hänen PNG-kuvien käytön ansiosta GIF-kuvat saavat syvyyttä liikkeen animoituina.
- Curtain.js:ää käytetään sivun luomiseen kiinteillä paneeleilla. Tässä tapauksessa verhojen avaamisen vaikutus havaitaan.
- Scrolling Parallax: jQuery Plugin luo parallaksiefektin hiiren rullaa vieritettäessä.
Hyödyllisiä lisäosia
Kuten tiedät, tiedolla on suurin arvo. Ja mitä useampia tapoja halutun saavuttamiseksi tunnetaan, sitä todennäköisemmin oikea tulos saadaan. Hyödyllisiä lisäosia dynamiikan luomiseen:
- jQuery Scroll Path - käytetään objektien sijoittamiseen määritetylle polulle.
- Scrollorama on jQuery-laajennus. Sitä käytetään houkuttelevan materiaalisuunnittelun työkaluna. Voit "elvyttää" sivulla olevan tekstin kätevän vierityksen ansiosta.
- Scrolldeck on jQuery-laajennus. Se on loistava esitysratkaisu yksisivuisille sivustoille.
- jParallaksi edustaa tasojen liikettä hiiren osoittimen liikkeestä riippuen.
- Stellar.js on laajennus, jolla mikä tahansa elementti on suunniteltu lisäämällä parallaksivieritystehoste.
Parallaksi ankkuroitu kursoriin
Tämä parallaksi näyttää varsin vaikuttav alta. Liikkumaton ensi silmäykselläsivuston sivuobjektit liikkuvat, kun hiiren osoitin lähestyy. Se näyttää heräävän henkiin ja seuraa liikkuvaa elementtiä.
Ensin sinun pitäisi pysähtyä kuvaan. Tarvittava kuva sijoitetaan kehykseen, kun taas sen reunat on piilotettava. Menetelmä on hyvin yksinkertainen, ja tuloksena oleva piirros näyttää varsin houkuttelev alta.
Parallaksiefekti sivustolle on loistava tapa suunnitella. Sen käyttö osoittaa, että resurssin luomiseen on kiinnitetty asianmukaista huomiota. Siksi tarjolla oleviin palveluihin tai luettavaan tietoon kannattaa kiinnittää huomiota. Tällaiset sivustot näyttävät edullisemmilta identtisten, mutta yksinkertaisesti suunniteltujen resurssien taustalla.
