Staatiline sait näeb lame välja. Pildid ja taustad on liikumatud, kerimine on mehaaniline, sügavustunne puudub. Aga sa tahad, et kihid nihkuksid üksteise suhtes, luues volüümi ja köites pilku. Parallaks teeb täpselt seda: taust liigub aeglasemalt kui esiplaan, tekitades brauseriaknas illusiooni kolmemõõtmelisest ruumist.

Parallaksi käsitsi WordPressis rakendamine pole lihtne. CSS-tehnika background-attachment: fixed ei tööta iOS-is, JS-teegid nagu Jarallax või Rellax nõuavad sinu teema jaoks kohandamist, vead z-index või overflow seadetes lõhuvad kujunduse. Parallaksi pluginad lahendavad selle valu: visuaalsed seaded kiirusele ja suunale, videotausta tugi, mobiilseadmetega kohanemine.

Valisime välja neli pluginat erinevateks stsenaariumiteks: alates kergest parallaksist ühe pildi jaoks kuni taustaehitajani, mis toetab YouTube'i videot ja hiireparallaksit. Kõik neli ühilduvad WordPressi praeguste versioonide ja Gutenbergiga.

💡 Kiirülevaade:

• Määra oma kasutusjuht: täislaiuses hero-sektsioon videotaustaga, üksik pilt postituse sisus või slaidiesitlus sügavusefektiga.
• Vali plugin oma redaktorile: Gutenbergi jaoks maksimaalsete võimalustega võta Advanced WordPress Backgrounds, Elementori saitidele on optimaalne Element Pack Lite, klassikalise redaktori puhul töötab Parallax Image [dd-parallax] lühikood.
• Enne paigaldamist kontrolli ühilduvust oma teema ja leheehitajaga, et parallaksiefektid töötaksid korrektselt koos olemasoleva kujundusega.

Pluginate võrdlustabel

1. Advanced WordPress Backgrounds: maksimaalsed efektid ja videotaust

Advanced WordPress Backgrounds (AWB), kõige funktsionaalsem parallaksiplugin selles valikus. See lisab Gutenbergi ploki Background (AWB), mille sisse paigutad suvalise sisu ning ploki seadetes määrad tausta: värv, pilt, postituse esiletõstetud pilt, muster, ise majutatud video või YouTube'i/Vimeo video. Iga taustatüübi jaoks lülitatakse parallaks sisse, tuginedes suure jõudlusega JS-teegile Jarallax.

Siin on kuus parallaksiefekti: klassikaline kerimine, skaala (suuruse muutumine kerimisel), läbipaistvus (läbipaistvuse muutumine), kerimine+skaala, kerimine+läbipaistvus ja hiireparallaks, kui taust nihkub koos kursoriga. Efekti kiirust juhitakse liuguriga. Eraldi seade lubab või keelab parallaksi mobiilis, mis on oluline, sest background-attachment: fixed töötab iOS-is ebastabiilselt.

Plugin toetab srcset atribuuti responsiivsete piltide jaoks. Läbipaistvuse ja värviga ülekate tumendab tausta loetava teksti jaoks. Kohandatud CSS polsterdus annab täpse kontrolli ploki positsioneerimise üle.

Praktikas katab AWB ülesanded maandumislehtedel videotaustaga, hero-sektsioonides YouTube'i videotega, plokkides hiireparallaksiga. Üheainsa pildi jaoks postituse sisus võib see olla üleliigne.

• Plussid: 6 tüüpi parallaksiefekte, sealhulgas hiireparallaks, videotaust (YouTube, Vimeo, ise majutatud) algus- ja lõpuaja seadetega, Gutenbergi plokk koheselt + WPBakery Page Builder, regulaarsed uuendused (v1.12.11, juuni 2026), ühilduvus WordPress 7.0-ga
• Miinused: videotaust mobiilis ei lülitu automaatselt välja (ainult käsitsi seadistamine), üleliigne ühe lihtsa pildi jaoks
• Hind: Tasuta, Pro versiooni pole

🔗 Advanced WordPress Backgrounds WordPress.org-is

2. Parallax Image: üks lühikood ühe pildi jaoks

Kui AWB on Šveitsi armeenuga, siis Parallax Image on skalpell. Plugin teeb täpselt ühte asja: lisab täislaiuses pildi parallaksiefektiga [dd-parallax] lühikoodi kaudu. Mootoriks on parallax.js pixelcogilt, kerge skript ilma jQuery sõltuvusteta.

Lühikood toetab kuut parameetrit: img (failinimi meediakogust või URL), height (vaateava kõrgus pikslites), speed (kiirus 0 kuni 10, kus 0 = staatiline, 10 = maksimaalne nihe), z-index, mobile (eraldi pilt mobiilile), offset (venitamine täislaiusele). Avava ja sulgeva sildi vaheline tekst kuvatakse parallaks-tausta peal, mis on mugav hero-sektsioonide jaoks koos pealkirja ja nupuga.

Pluginat testiti klassikaliste WordPressi teemadega (Twenty Fourteen, Twenty Seventeen) ja Bootstrapi teemadega. See töötab kaasaegsete plokiteemadega, kuid TinyMCE nupp on saadaval ainult klassikalises redaktoris. Arendaja ei avaldanud kunagi Gutenbergi vidinat.

Viimane uuendus oli novembris 2024 (v1.9.1, CVE paigad). Pluginat pole formaalselt testitud viimase kolme suurema WordPressi versiooniga, kuid praktikas töötab lihtne lühikood koos parallax.js-ga jätkuvalt stabiilselt.

Praktikas sobib Parallax Image klassikalistele teemadele ilma plokiredaktorita, kui on vaja kiiresti lisada üks parallaks-pilt lühikoodi abil.

• Plussid: äärmiselt lihtne (üks lühikood, üks parallaks), kerge parallax.js skript ilma jQuery sõltuvusteta, eraldi pilt mobiilile mobile parameetri kaudu
• Miinused: ainult klassikaline redaktor (pole Gutenbergi plokki), funktsionaalseid uuendusi pole alates 2024. aastast, ainult pildid (pole videotausta)
• Hind: Tasuta

🔗 Parallax Image WordPress.org-is

3. Element Pack Lite: parallaksi vidinad Elementorile

Element Pack Lite pole lihtsalt parallaksiplugin, vaid täielik komplekt 300+ vidinast ja laiendusest Elementorile. Nende hulgas on kaks spetsiaalset parallaksitööriista: Parallax Section (parallaksiefekt tervele sektsioonile) ja Parallax Background (parallaks-taust üksikutele plokkidele ja veergudele). Pluss Floating Effects ja animatsioonipaneel elementide liikumise peenhäälestuseks.

Vidinad on integreeritud Elementori liidesesse: lohista soovitud vidin lõuendile, seadista kiirus, suund ja päästik (kerimine või kursor). Parallaks-sektsiooni jaoks määra taustapilt ja käitumine: kerimine, skaala, läbipaistvus. Eraldi luba või keela mobiilis.

Tasuta versioon sisaldab 30+ vidinat, sealhulgas parallaksielemente. Saitidele, mis juba kasutavad Elementorit, on Element Pack Lite loomulik valik: ei nõua eraldi pluginat parallaksi jaoks, parallaksi vidinad töötavad ühes liideses koos sadade teiste tööriistadega.

Praktikas on plugin optimaalne Elementori saitidele, kus parallaks on üks paljudest ülesannetest, mitte ainus. Kui ehitad Elementoriga, on Element Pack Lite juba must-have nimekirjas.

• Plussid: kaks parallaksi vidinat + Floating Effects + animatsioonid ühes pluginas, 100 000+ aktiivset paigaldust, aktiivne tugi, ühilduvus WordPress 7.0-ga, viimane uuendus juuli 2026 (v8.7.6)
• Miinused: töötab ainult Elementoriga (mitte Gutenbergi ega Classic Editori jaoks), 300+ vidinat võib tunduda üleliigne, kui vajad ainult parallaksit
• Hind: Tasuta

🔗 Element Pack Lite WordPress.org-is

4. Parallax Slider Block: slaidiesitlus sügavusefektiga

Parallax Slider Block lahendab kitsa, kuid nõutud ülesande: pildislaidi parallaksiefektiga kerimisel. See on natiivne Gutenbergi plokk. Paigalda plugin, lisa redaktoris Slider Block plokk, laadi pildid üles.

Ploki seadetes määrad: parallaksiefekti kiiruse, slaidiesitluse kõrguse (pikslites või vh), vahe slaidide vahel, ülemineku animatsiooni, responsiivsed juhtelemendid mobiilile. Lisatud kohandamisvalikud: vari, nurga ümardamine, ääris, kohandatud CSS. Slaidi pealkirja tüpograafiat seadistatakse reaalajas.

Plugina lõi WPDeveloperi meeskond, samad arendajad, kes teevad Essential Addonsit Elementorile (2+ miljonit paigaldust) ja NotificationX-i. Kood on kerge, ressursse laaditakse ainult lehtedel, kus plokki kasutatakse.

Viimane uuendus oli juulis 2024 (v1.2.7), formaalselt pole pluginat testitud viimase kolme WordPressi versiooniga. Praktikas töötab see stabiilselt WordPress 6.6-ga.

Praktikas sobib Parallax Slider Block maandumislehtedele ja portfooliotesse, kus on vaja sügavusefektiga slaidiesitlust, mitte staatilist parallaks-tausta.

• Plussid: natiivne Gutenbergi plokk (paigalda ja kasuta), kerge (pole jQueryt, ressursid laaditakse ainult seal, kus kasutatakse), WPDeveloperi meeskond hea mainega
• Miinused: ainult slaidiesitlus (pole staatilist parallaks-tausta), viimane uuendus juuli 2024 (pole uusi funktsioone), 1000+ paigaldust (väiksem publik kui teistel valiku pluginatel)
• Hind: Tasuta

🔗 Parallax Slider Block WordPress.org-is

Video: parallaksiefekt töös

Parem üks kord näha kui seadeid lugeda. WP Royal Themesi meeskonna video näitab samm-sammult parallaks-kerimisefekti seadistamist WordPressis: alates plugina paigaldamisest kuni lõpptulemuseni elaval saidil.

⁉️🤔 Korduma kippuvad küsimused

Kas parallaks aeglustab saiti?

Kaasaegsed parallaksipluginad kasutavad requestAnimationFrame ja IntersectionObserver tehnikaid: efekt aktiveerub ainult siis, kui plokk on vaateavas. AWB Jarallaxil ja Parallax Image parallax.js-il laadivad alla alla 5 KB gzip. Aeglustumised tekivad, kui paned odavale hostingule täisekraani videotausta ilma vahemäluta. Siin pole probleem parallaksis, vaid videos.

Kas parallaks töötab iPhone'is?

iOS Safari ignoreerib ajalooliselt background-attachment: fixed atribuuti renderdamise eripärade tõttu. Just seepärast kõik valikus olevad pluginad kas asendavad fixed-i transformidega (AWB, Parallax Slider Block) või pakuvad mobiilile eraldi staatilist pilti (Parallax Image mobile parameetri kaudu). Enne avaldamist kontrolli saiti kindlasti päris iPhone'is.

Kas parallaksit saab teha ilma pluginata?

Saab. Minimaalne variant: plokk seadetega background-image ja background-attachment: fixed kohandatud CSS-is. Kuid mobiilis see puruneb. Usaldusväärsem tee: ühenda Jarallaxi või rellax.js teek käsitsi ja kirjuta oma teemale ümbris. Arendaja jaoks on see okei, sisuhalduri jaoks säästab plugin tunde silumist.

Milline plugin valida Gutenbergile ja milline Elementorile?

Gutenbergile: AWB (maksimaalsed võimalused) või Parallax Slider Block (ainult slaidiesitlus). Elementorile: Element Pack Lite, sest parallaksi vidinad on leheehitaja liidesesse sisse ehitatud ega nõua pluginatega žongleerimist. Parallax Image lühikoodi kaudu töötab igas redaktoris: universaalne varuvariant.

Mida teha, kui parallaks-taust ei kuvata?

Kolm levinud põhjust: 1) z-index konflikt teiste elementidega (tõsta väärtust plugina seadetes), 2) teema konteiner lõikab ülevoolu ära (kontrolli inspektoris overflow: hidden vanemplokkidel), 3) pilt ei laadi (kontrolli URL-i brauseri konsoolis). AWB-s lahendab probleemi sageli Stretch valiku lubamine.

Mida oma ülesande jaoks valida

Valik sõltub stsenaariumist ja tööriistadest.

• Kui teed maandumislehte või hero-sektsiooni videotaustaga, võta Advanced WordPress Backgrounds. See on ainus plugin valikus, mis suudab YouTube'i/Vimeo tausta parallaksiga ja isegi video algus- ja lõpuaja seadetega.

• Kui töötad Elementoris, on Element Pack Lite juba sinu must-have nimekirjas. Parallaksi vidinad tulevad komplektis sadade teiste kasulike tööriistadega.

• Kui vajad lihtsalt sügavusefektiga slaidiesitlust, katab Parallax Slider Block ülesande ilma saiti lisaraamatukogudega üle koormamata.

• Kui sul on klassikaline teema ilma plokiredaktorita ja on vaja kiiresti lisada üks parallaks-pilt, saab Parallax Image [dd-parallax] lühikood sellega viie minutiga hakkama.

WordPressi parallaksi peamine reegel: mõõdukus. Üks, maksimaalselt kaks parallaksiplokki lehe kohta. Efekt peaks sisu rõhutama, mitte sellest kõrvale juhtima. Õigesti seadistatud parallaks lisab saidile sügavust ja esmaklassilist tunnet. Kolm parallaks-sektsiooni järjest muudavad maandumislehe lõbustuspargi atraktsiooniks, kust tahaks lahkuda.