Liikumisel tähendab parallaks objekti asukoha muutumist mingil taustal paigal oleva vaatleja suhtes. See termin on Internetis populaarsust kogunud. Eelkõige näeb sait huvitav välja, mille kujunduses on dünaamilisi elemente. Parallax on veebilehtede kujundamise tehnika, mida veebihaldurid kasutavad suure hulga külastajate meelitamiseks.
Mis on parallaks?
Parallaksi kerimist saab kasutada nii vertikaalselt kui ka sirgjooneliselt. Nintendo on parim näide. Paljud meist mäletavad nostalgiaga arvutimänge, mida esindab peategelaste liikumine ekraani vasakust servast paremale. Samuti on võimalik liikuda allapoole mööda vertikaalselt asetsevat sirgjoont. Sageli kasutatakse parallaksi efekti veebis. Vertikaalse liuguri loomiseks saate kasutada JavaScripti või CSS-i 3.
Kirjeldatud kolmemõõtmeline ruumiline efekt on just neile iseloomulik. Mängude loojad kasutasid mitut taustakihti. Need erinevad tekstuuri poolest, samas kui liikumine toimub erinev altkiirus.
Ärge arvake, et parallaks on lihts alt 3D-efekt. Lehel saate olemasolevaid ikoone teisaldada. Lisaks näeb see välja üsna atraktiivne. Eriti hea võimalus on kasutada igaühe jaoks individuaalset trajektoori. Sel juhul kasutatakse erinevaid ikoone, mis liiguvad mööda erinevaid trajektoore. See disain tõmbab tähelepanu.
Pilt ärkab ellu
Piltideta saiti on raske leida. Kvaliteetsed ja demonstratiivsed joonistused meelitavad külastajaid. Enim tähelepanu tõmbavad aga mitmesugused dünaamilised kujutised. Tõepoolest, kui saidi külastamisel on liikumist, tõmbab see tähelepanu. Suurendab märkimisväärselt tõenäosust, et külastaja naaseb ressursi juurde dünaamilise pildi juurde. Kas see tundus liikuvat või mitte? Seetõttu tasub saidile külastajate meelitamiseks uurida sellist asja nagu parallaksiefekt.
Liikuva pildi saidi näited:
- hvorostovsky.com;
- www.kagisointeractive.com.
Nagu näidetes näidatud, täiustavad kasutuskogemust alamüksuste rippmenüüd. Selline element säästab külastajate aega, mistõttu on see neile atraktiivne.
jPäringu teek
Termina jQueryParallax määratleb samanimelise teegi. Tänu sellele on 3D formaadis liikumise efekti lihtne saavutada. jQuery teegis luuakse 3D-taju mitmel viisil. Üks neist seisneb taustaobjektide horisontaalses samaaegses liikumiseserinev kiirus. Seda raamatukogu iseloomustab suur hulk erinevaid omadusi. Ja siin kirjeldatud nihe on vaid väike osa selle võimalustest.
Sait näeb üsna atraktiivne välja, mille loomiseks kasutati erinevaid kaasaegseid elemente. Üks neist on parallaks. Näidissaidid võivad välja näha järgmised:
- www.grabandgo.pt;
- www.fishy.com.br;
- www.noleath.com;
- buysellwebsite.com.
jParallaksit esindavad hiirega liikuvad kihid. Dünaamilisi elemente iseloomustab absoluutne positsioneerimine (positsioon:absoluutne;). Igaüht neist iseloomustab oma suurus ja liikumine individuaalsel kiirusel. See võib olla tekst või pilt (ressursi loojate soovil).
Saidi külastaja tajumine
Pärast seda pöörab inimene tavaliselt tähelepanu sellele, et leht oleks kujundatud kvaliteetselt, mugav alt ja asjatundlikult. Seda asjaolu austatakse tavaliselt. Juhtub, et tekib uudishimu ka teisi elemente proovida. Internetis on tohutult palju identseid saite. Kuidas muuta oma ressurss eriliseks?
Kui kujundus meeldib, jääb külastaja sinna pikemaks ajaks. Seega suureneb tõenäosus, et teda köidab postitatud teave, ta ilmutab huvi. Selle tulemusena kasutab inimene pakutavat teenust, toodet või sooduspakkumist.
Vanad lemmikmängud
Mõte "parallaks" peaks olema kõigile tuttav80ndate ja 90ndate konsoolifännid. See kehtib mängude kohta:
- Mario Bros.
- Mortal Kombat.
- Raha tänavad.
- Kuupatrull.
- Kilpkonnad ajas.
See tähendab, et parallaks on tehnika, mida on kasutatud üsna pikka aega. Need mängud on tõesti teatud nostalgiaga meeles. Lõppude lõpuks näivad nad olevat selle perioodi iseloomust läbi imbunud.
Ekraanil olevad kujutised luuakse sellise tehnikaga nagu parallakskerimine. Pole midagi üllatavat selles, et see tehnika on saavutanud väljateenitud populaarsuse. Selle disainikontseptsiooni võtavad sooj alt vastu need, kes mängisid 80-90ndatel või vaatasid sõprade vaba aega.
Parallaksi kerimine
Maailma juhtivate kaubamärkide turundajad on juba ammu kasutanud kõikvõimalikke tehnilisi edusamme. Seega on võimalik saidile huvi pakkuda isegi juhuslikule külastajale.
Parallaksi kerimist on Nike üsna eduk alt kasutanud. Ettevõtte algse veebisaidi kujundasid Weiden ja Kennedy. Kuid see disain ei püsinud. Ressursi uuendati järk-järgult, vastav alt meie aja suundumustele. Activatedrinks.com on näide saidist, mille kujundus meenutab seda, mida kasutasid selle perioodi Nike'i turundajad.
Kõlarid ei tohiks olla liiga palju
Ärge unustage, et saidi kujundus on sageli peamine kriteerium, mis külastajat suunab. Halvasti teostatudressurss jätab kasutajale enamasti mulje omanikfirma kergemeelsusest. Kuid igasuguste atraktiivsete kujunduselementidega sait viitab organisatsiooni omanike soovile külastajaid huvitada.
Siin tasub meeles pidada parallaksit. See on suurepärane tööriist. Kuid isegi nemad ei tohiks sellest liiga vaimustuda. Kuna leht, millel on palju erinevaid liikuvaid elemente, on üsna raskesti tajutav. Parim on muuta kujundus mõõduk alt stiilseks ja arusaadavaks.
Dünaamiline peaks olema üksikud elemendid, mis nõuavad valikut. Võib olla ka pilt, mis luuakse üksteise suhtes liikuvate kihtide abil. Ärge unustage, et kasutaja sait on mõeldud peamiselt külastajatele. See ei pea olema veebimeistri meistriteos, kes on sellesse pannud kõik oma teadmised. Lõppude lõpuks muudab selline lähenemine tajumise ainult keerulisemaks.
Kuidas luua saidi navigatsiooni
Kuidas teha parallaksi? See küsimus pakub huvi paljudele veebisaitide koostajatele. Siltide kirjutamise keerukust pole vaja teada. Internetis on väga mugav kasutada spetsiaalseid ressursse. Saadaolevate ettepanekute suurest hulgast võib eristada järgmisi abistajaid:
- Plax on programm, mida on üsna lihtne kasutada. See kipub hiirt liigutades muutma lehe sujuvaks.
- jQuery Parallax Image Slider – jQuery pistikprogramm, mida kasutatakse pildiliugurite loomiseks.
- Jquery Image Parallax – sobib läbipaistvate jooniste kujundamiseks. Tänu tema PNG-de kasutamisele omandavad GIF-id liikumisest animeerituna sügavuse.
- Curtain.js kasutatakse fikseeritud paneelidega lehe loomiseks. Sel juhul täheldatakse kardinate avamise mõju.
- Parallaksi kerimine: jQuery plugin loob hiirerattaga kerimisel parallaksiefekti.
Mõned kasulikud pistikprogrammid
Nagu teate, on teabel suurim väärtus. Ja mida rohkem on teada viise soovitud saavutamiseks, seda suurem on tõenäosus õige tulemuse saamiseks. Dünaamika loomiseks kasutatavad kasulikud pluginad:
- jQuery kerimisrada – kasutatakse objektide paigutamiseks määratud teele.
- Scrollorama on jQuery pistikprogramm. Seda kasutatakse atraktiivse materjalikujunduse vahendina. Võimaldab mugava kerimise tõttu lehel olevat teksti "elustada".
- Scrolldeck on jQuery pistikprogramm. See on suurepärane esitluslahendus üheleheliste saitide jaoks.
- jParallaks tähistab kihtide liikumist sõltuv alt hiirekursori liikumisest.
- Stellar.js on pistikprogramm, mille abil luuakse kõik elemendid, millele on lisatud parallaksi kerimise efekt.
Parallaks ankurdatud kursori külge
See parallaks näeb üsna muljetavaldav välja. Esmapilgul liikumatusaidi leheobjektid liiguvad, kui hiirekursor läheneb. Tundub, et see ärkab ellu ja järgib liigutatavat elementi.
Esiteks peaksite peatuma pildil. Vajalik pilt asetatakse raami, samas kui selle servad tuleb peita. Meetod on väga lihtne ja saadud joonis näeb üsna atraktiivne välja.
Saidi parallaksiefekt on suurepärane viis kujundada. Selle kasutamine viitab sellele, et ressursi loomisele pöörati piisav alt tähelepanu. Seetõttu tasub pöörata tähelepanu pakutavatele teenustele või teabele, mida lugeda. Sellised saidid näevad identsete, kuid lihts alt kujundatud ressursside taustal soodsamad välja.
