Lameda kujundusega veebisaite loetakse. Parallaksiga veebisaite mäletatakse. Sama sisu, sama paigutus, kuid taust liigub esiplaanist aeglasemalt ja leht saab sügavuse, hingamisruumi ja filmiliku kvaliteedi. Kasutaja ei keri lihtsalt teksti, vaid kerib läbi loo.

Probleem on selles, et enamik WordPressi saite näeb välja ühesugune: päis, ruudustik, külgriba, jalus. Parallaks murrab selle malli ilma paigutust ümber struktureerimata, ilma teemat muutmata, mõnikord üldse ilma pluginateta. Kuid mitte iga parallaksi lahendus ei tööta korralikult: tõmblev kerimine mobiilis, jõudlusprobleemid, ligipääsetavuse konfliktid, teate küll seda rutiini.

Allpool on täielik ülevaade: mis on parallaks-kerimine, millal see end ära tasub, millised teemad ja pluginad pakuvad valmislahendusi ning kuidas vältida jõudluse põhjalaskmist. Koos samm-sammult ekraanipiltide, tööriistade võrdluse ja vastustega levinud küsimustele.

💡 Kiirülevaade:

• Saage aru, kuidas parallaks-kerimine töötab ja miks teie sait seda vajab
• Hinnake riske: mobiilne jõudlus, ligipääsetavus, taustapildi valik
• Valige sisseehitatud parallaksiga teema või lisage liugurite jaoks Slider Revolution
• Paigaldage tasuta plugin Advanced WordPress Backgrounds (AWB), universaalne lahendus Gutenbergile, Classic Editorile ja WPBakeryle

Mis on parallaks-efekt

Parallaks-efekt on tehnika, kus veebilehe taust kerib aeglasemalt kui esiplaanil olev sisu. See loob sügavuse illusiooni: sisu näib hõljuvat pildi kohal ja leht omandab kolmemõõtmelise kvaliteedi.

See tehnika jõudis veebidisaini mängutööstusest, kus parallaksi oli aastaid kasutatud platvormimängude taustakihtide loomiseks. Tänapäeval on see standardfunktsioon premium-teemades, leheehitajates ja eraldiseisvates pluginates. Isegi tasuta Twenty Seventeen teemal, mis tuli vaikimisi WordPressiga kaasa, oli sisseehitatud parallaks.

Kaasaegne veebidisain on läinud veelgi kaugemale: CSS-i atribuut scroll-timeline võimaldab luua parallaksi üldse ilma JavaScriptita, kasutades puhast animatsiooni, mis on seotud kerimise edenemisega. Kuid kiireks juurutamiseks tootmissaitidel jäävad pluginad ja leheehitajad praktilisemaks.

Ülaltoodud video on täielik juhend parallaksi lisamiseks WordPressis (EN, 12 minutit). Autor näitab paigaldamist, kiiruse seadistamist, mobiilis keelamist ja taustapiltidega töötamist reaalajas.

Miks kasutada parallaksi oma saidil

Esiteks ja kõige ilmsem, visuaalne vau-efekt. Parallaks muudab saidi kaasaegseks, stiilseks ja meeldejäävaks. Kui kasutaja kerib lehte ja taust liigub erineva kiirusega, köidab see tähelepanu. Sisu tuleb esile.

Kuid eelised ei piirdu esteetikaga. Parallaks jagab lehe loetavateks osadeks, eriti maandumislehtedel ja kodulehtedel, kus on vaja külastajat pealkirjast kutsuva tegevuseni juhtida. Parallaks-taustaga sektsioon eraldab loomulikult ühe sisuploki teisest, suunates tähelepanu.

Kolmas põhjus, kaasatus ja saidil veedetud aeg. Külastajad viibivad kauem interaktiivse kerimisega lehtedel, mis parandab kaudselt käitumismõõdikuid ja konversiooni. See toimib eriti hästi ühelehelistel saitidel, portfooliodes ja toodete maandumislehtedel.

Mida enne parallaksi juurutamist kaaluda

Igal mündil on kaks külge. Siin on, mida enne parallaks-sektsioonide lisamist meeles pidada.

Taustapildi valimine

Taustapilt on võtmeelement. See peaks olema asjakohane lehe teema ja brändi kui terviku jaoks. Kui paigutate taustale teksti või pealkirju, on parem kasutada summutatud mustrit või värvikihti, mitte üksikasjalikku fotot. Sisu ei tohiks taustaga võistelda.

Fotode puhul ainult kõrge eraldusvõime. Hägune või pikslitesse lagunev täisekraanitaust hävitab professionaalse välimuse. Oleme koostanud kogumi tasuta ja premium-piltidega fotopankade saite eraldi 35 fotopanga saidi ülevaates.

Parallaks mobiilseadmetes

Telefonides ja tahvelarvutites töötab parallaks ebausaldusväärselt. Žestipõhine kerimine (pühkimine) erineb hiirerattast, efekt võib kokutada, takerduda või üldse mitte kuvada. Enamik kaasaegseid pluginaid ja teemasid võimaldab parallaksi mobiilis keelata ühe linnukesega ja see on kasutajakogemuse seisukohast parim valik.

Ligipääsetavus

Liikuvad taustad tekitavad probleeme vestibulaarsete häiretega kasutajatele: liikumishaigus, iiveldus, keskendumisraskused. Meediapäring prefers-reduced-motion võimaldab selliste külastajate jaoks parallaks-animatsioonid automaatselt keelata. Kui teie plugin või teema seda ei toeta, keelake efekt vähemalt mobiilis.

Sisseehitatud parallaksiga teema valimine

Neile, kes alustavad projekti nullist, on lihtsaim tee valida teema, milles parallaks on juba sisseehitatud. Enamik premium WordPressi teemasid sisaldab seda funktsiooni vähemalt kodulehe jaoks. Kui vajate parallaksi saidi erinevatel lehtedel, vaadake mitmeotstarbeliste teemade poole, millel on täiustatud leheehitaja.

Kolm tõestatud valikut:

• Divi Elegant Themesilt, visuaalne leheehitaja, millel on sisseehitatud parallaks-taustavalik mis tahes sektsiooni jaoks;
• Ultra Themifylt, mitmeotstarbeline teema koos Themify Builderiga ja paindlike parallaks-seadetega;
• Total WPExplorerilt, WPBakeryl põhinev mitmeotstarbeline teema koos täiustatud parallaks-valikutega (kiirus, suund, mobiilis keelamine).

Parallaks-taustapildi lisamine Totalis (WPBakery)

Allpool on samm-sammuline näide parallaksi seadistamisest Totali teemas. Total kasutab lehtede ehitamiseks WPBakeryt, kuid sarnased võimalused on olemas enamikus WordPressi leheehitajates.

Esmalt lisa rida ja lisa sellele sisu. Klõpsa pliiatsiikoonil, et rida muuta. Kui kujundusel pole külgriba, luba „Stretch row" valik, et parallaks-taust täidaks rea täislaiuses. Totalil on ka täisekraanirežiim, mis venitab tausta üle kogu brauseriakna.

Jaotises „Parallax" lisa taustapilt ja määra kerimiskiirus. Mida suurem number, seda rohkem pilt nihkub ja seda kõrgemat eraldusvõimet see nõuab.

Täpsemates parallaksi seadetes saad efekti mobiilseadmetes lubada või keelata, valida pildi stiili (cover, fixed, repeat), liikumise suuna ja täpse kiiruse.

Tausta ja sisu vahelise kontrasti loomiseks kasuta vahekaarti „Overlay", näiteks pool-läbipaistev valge täide pildi kohal. Salvesta rida ja lehe muudatused.

Parallaks-slaiderid Slider Revolutioniga

Kui vajad mitte staatilist tausta, vaid täisväärtuslikku slaiderit koos parallaks-efektiga, on parim tööriist Slider Revolution. See tasuline plugin sisaldab sadu võimalusi: fonte, kihte, üleminekuefekte, paigutusi ja loomulikult mitmekihilist parallaksi. Üksikasjalik Slider Revolutioni juhend on eraldi artiklis.

Kuidas Slider Revolutionis parallaksi lubada

Paigalda plugin ja kas impordi valmis slaidimall või loo slaid nullist.

Muuda slaidi peamist tausta: lisa lähtepilt ja mine vahekaardile „Parallax / 3D", et määrata parallaksi tase. Seejärel, kihte (tekst, pildid, nupud) lisades, vali iga kihi jaoks Parallax / 3D valik, parallaksi sügavus toob elemendid üksteisest sõltumatult ellu.

Valmis slaid lisatakse shortcode’i abil igasse postitusse või lehele. Kui kasutad WPBakeryt, lohista lihtsalt Slider Revolutioni element lehele ja vali slaid rippmenüüst.

Tasuta plugin Advanced WordPress Backgrounds (AWB)

Kui sul on juba paigaldatud teema, mis parallaksit ei toeta, ei pea sa seda vahetama. Advanced WordPress Backgrounds (AWB) on tasuta plugin ametlikust WordPress.org kataloogist, mis lisab parallaks-taustad igale leheelemendile: plokile, pealkirjale või tervele sektsioonile. Pluginat arendatakse aktiivselt: viimane uuendus juunis 2026, ühilduvus WordPress 7.0-ga on kinnitatud.

AWB toetab kolme taustatüüpi: värv, pilt ja video (YouTube/Vimeo/oma majutusega). Töötab Gutenbergi, klassikalise redaktori ja WPBakeryga.

AWB paigaldamine

Mine WordPressi administraatoriliidesesse: Pluginad → Lisa uus. Otsingusse sisesta „Advanced WordPress Backgrounds", klõpsa Paigalda → Aktiveeri.

Tausta lisamise meetod sõltub redaktorist. Vastavalt plugina kirjeldusele WordPress.org-is on kõigil kolmel redaktoril juurdepääs: tausta tüübile (värv, pilt või video), kuvamõõdule (cover, contain või muster), tausta asukohale protsentidega, ülekattele koos värvivaliku ja läbipaistvusega Alpha-liuguri kaudu, parallaks-kerimisele koos kiiruse seadistuse, skaleerimise ja läbipaistvusega ning hiireparallaksile (taust nihkub kergelt kursori liikumisel).

Menüüs Seaded → AWB on vahekaart globaalsete parameetritega. Siin saad parallaksi- ja videoefektid mobiilseadmete ning kindlate brauserite jaoks välja lülitada.

AWB Gutenbergis

AWB on täielikult ühilduv plokiredaktoriga ja pakub oma plokki.

Lisa AWB plokk, seejärel lisa selle sisse suvalised teised plokid oma sisuga.

Klõpsa AWB plokil ja mine parempoolsel paneelil vahekaardile „Plokk". Siin seadistad kõik tausta parameetrid: tüüp, pilt, parallaks, ülekate.

AWB klassikalises redaktoris

Klassikalises redaktoris töötab AWB lühikoodi kaudu. Vali tekst, mis vajab parallaks-taustapilti, ja klõpsa redaktori tööriistaribal AWB ikooni.

Vali taustapilt ja seadista teised parameetrid: ülekatte värv, parallaksi tüüp, kiirus. Klõpsa „Lisa".

Lühikood näeb välja umbes selline:

1
[nk_awb awb_type="image" awb_image="1234" awb_image_size="full" awb_image_background_size="cover" awb_image_background_position="50% 50%" awb_parallax="scroll" awb_parallax_speed="0.5"]Your content inside the parallax background[/nk_awb]

Lühikoodi lähenemise miinus on see, et taustaseaded ei ole visuaalses redaktoris nähtavad, koodi tuleb käsitsi muuta. Mugavaks tööks on parem kasutada Gutenbergi või WPBakeryt.

AWB koos WPBakeryga

WPBakery puhul on integratsioon maksimaalselt lihtne. Rea seadetes kuvatakse täiendav vahekaart „Backgrounds (AWB)", kus saab parallaks-taustasid luua ja seadistada ilma lühikoodideta, kõik on visuaalne.

⁉️🤔 Korduma kippuvad küsimused

Kas parallaksi jaoks peab teemat vahetama?

Ei. Kui teie praegune teema parallaksit ei toeta, piisab tasuta AWB pluginast. See lisab efekti igale elemendile igal lehel mugava liidese kaudu, ilma et ülejäänud teemat puudutaks. Teema vahetamine on mõttekas ainult siis, kui alustate niikuinii nullist ja soovite sisseehitatud parallaksit kohe karbist välja.

Kas parallaks aeglustab saiti?

Hoolika seadistamise korral vaid veidi. AWB kasutab kerget Jarallax teeki (ilma jQueryta alates versioonist 1.11) ja kaasaegsed brauserid optimeerivad transform-i GPU abil. Peamine aeglustumise tegur on liiga raske taustapilt. Optimeerige fotod WebP või AVIF formaati, hoidke suurus 200-300 KB piires ja kiirus ei kannata.

Kas parallaks töötab iPhone'ides ja Androidides?

Sõltub teostusest. iOS-is on veebiparallaks traditsiooniliselt problemaatiline: fikseeritud tausta (background-attachment: fixed) ignoreerib Safari. AWB plugin lahendab selle JavaScript-animatsiooni abil, töötab stabiilselt. Kuid parim tava mobiilile on parallaks täielikult välja lülitada (märkeruut AWB-s või teema seadetes): väikesel ekraanil on efekt vaevu märgatav ja akuressurssi säästetakse.

Kas parallaksit saab luua ka täiesti ilma pluginateta?

Saab. CSS omadus animation-timeline: scroll() võimaldab parallaks-animatsiooni siduda kerimise edenemisega ilma ühegi JavaScripti reata. Siiski on brauseritugi endiselt puudulik (Safari lisas 2024. aastal, Firefox alates 2025. aastast). Vanemate brauseritega ühildumiseks on plugin endiselt usaldusväärsem.

Mis teeb AWB paremaks teistest tasuta parallaksi pluginatest?

AWB paistab silma kolmel viisil: esiteks, kolme redaktori (Gutenberg, Classic, WPBakery) tugi ilma konfliktideta; teiseks, regulaarsed uuendused, plugin on testitud kuni WordPress 7.0-ni; kolmandaks, hiireparallaks ja videotaustad tasuta versioonis, mis on konkurentidel sageli Pro funktsioonid.

Kas parallaks on SEO jaoks vajalik?

Otseselt mitte. Parallaks on visuaalne tehnika, mitte pingerea tegur. Kuid kaudselt võib see aidata: pikem lehel viibimise aeg, madalam põrkemäär, otsingumootorid arvestavad seda. Peamine on mitte ohverdada efekti nimel laadimiskiirust ja teksti loetavust.

Millist tööriista oma ülesande jaoks valida

Kui teie teema juba toetab parallaksit, kasutage sisseehitatud seadeid, sellest piisab avalehtede ja maandumislehtede jaoks.

Kui teie teemal parallaks puudub, katab AWB enamiku tüüpilisi stsenaariume tasuta: kiire paigaldus, intuitiivne liides, töötab Gutenbergi ja WPBakeryga, globaalne väljalülitamine mobiilis. Mitmekihilise parallaksiga slaidide jaoks on Slider Revolution animatsiooni paindlikkuses ületamatu.

Parallaks ei ole imerohi. Tiheda tekstisisuga saitidel (pikad lugemised, dokumentatsioon) pigem segab kui aitab. Kuid maandumislehe, portfoolio, toote promolehe jaoks jääb see tehnika veebidisaini üheks tugevaimaks. Kasutaja unustab teksti, kuid mäletab, kuidas leht kerides „hingas".