Litteän muotoilun verkkosivut luetaan. Parallaksisivustot muistetaan. Sama sisältö, sama asettelu, mutta tausta liikkuu hitaammin kuin etuala, ja sivu saa syvyyttä, tilaa hengittää ja elokuvallista tunnelmaa. Käyttäjä ei vain rullaa tekstin läpi, vaan rullaa tarinan läpi.

Ongelma on, että useimmat WordPress-sivustot näyttävät samalta: ylätunniste, ruudukko, sivupalkki, alatunniste. Parallaksi rikkoo tuon kaavan ilman asettelun uudelleenjärjestelyä, teemaa vaihtamatta ja joskus kokonaan ilman lisäosia. Mutta kaikki parallaksitoteutukset eivät toimi kunnolla: nykivää vieritystä mobiilissa, suorituskykyongelmia, esteettömyysristiriitoja, tiedättehän te.

Alla on täydellinen erittely: mitä parallaksivieritys on, milloin se kannattaa, mitkä teemat ja lisäosat tarjoavat valmiita tuloksia ja miten välttää suorituskyvyn romuttaminen. Mukana vaiheittaiset kuvakaappaukset, työkaluvertailut ja vastaukset yleisiin kysymyksiin.

💡 Pikakatsaus:

• Ymmärrä, miten parallaksivieritys toimii ja miksi sivustosi tarvitsee sitä
• Arvioi riskit: mobiilisuorituskyky, esteettömyys, taustakuvan valinta
• Valitse teema, jossa on sisäänrakennettu parallaksi, tai lisää Slider Revolution liukusäätimiä varten
• Asenna ilmainen lisäosa Advanced WordPress Backgrounds (AWB), yleiskäyttöinen ratkaisu Gutenbergille, Classic Editorille ja WPBakerylle

Mitä parallaksiefekti on

Parallaksiefekti on tekniikka, jossa verkkosivun tausta vierii hitaammin kuin etualan sisältö. Se luo illuusion syvyydestä: sisältö näyttää leijuvan kuvan päällä, ja sivu saa kolmiulotteisen vaikutelman.

Tekniikka siirtyi web-suunnitteluun peliteollisuudesta, jossa parallaksia oli käytetty vuosia taustakerrosten luomiseen tasohyppelypeleissä. Nykyään se on vakiovaruste premium-teemoissa, sivunrakentajissa ja itsenäisissä lisäosissa. Jopa ilmaisessa Twenty Seventeen -teemassa, joka tuli WordPressin oletuksena, oli sisäänrakennettu parallaksi.

Moderni web-suunnittelu on mennyt pidemmälle: CSS-ominaisuus scroll-timeline mahdollistaa parallaksin luomisen kokonaan ilman JavaScriptiä, käyttäen puhdasta animaatiota, joka on sidottu vierityksen etenemiseen. Mutta nopeaan käyttöönottoon tuotantosivustoilla lisäosat ja rakentajat ovat edelleen käytännöllisempiä.

Yllä oleva video on täydellinen opas parallaksin lisäämiseen WordPressissä (EN, 12 minuuttia). Tekijä näyttää asennuksen, nopeuden säädön, käytöstä poistamisen mobiilissa ja taustakuvien kanssa työskentelyn reaaliajassa.

Miksi käyttää parallaksia sivustollasi

Ensimmäinen ja ilmeisin syy on visuaalinen vau-efekti. Parallaksi tekee sivustosta modernin, tyylikkään ja mieleenpainuvan. Kun käyttäjä rullaa sivua ja tausta liikkuu eri nopeudella, se kiinnittää huomion. Sisältö pomppaa esiin.

Mutta hyödyt eivät lopu estetiikkaan. Parallaksi jakaa sivun luettaviin osioihin, erityisesti laskeutumissivuilla ja kotisivuilla, joilla kävijä pitää ohjata otsikosta toimintakehotukseen. Osio, jossa on parallaksitausta, erottaa luonnollisesti yhden sisältölohkon toisesta ja ohjaa huomiota.

Kolmas syy on sitoutuminen ja sivustolla vietetty aika. Vierailijat viipyvät pidempään sivuilla, joissa on interaktiivista vieritystä, mikä parantaa epäsuorasti käyttäytymismittareita ja konversiota. Tämä toimii erityisen hyvin yhden sivun sivustoilla, portfolioissa ja tuotteiden laskeutumissivuilla.

Mitä ottaa huomioon ennen parallaksin toteuttamista

Jokaisella kolikolla on kääntöpuolensa. Tässä on, mitä pitää mielessä ennen parallaksiosioiden lisäämistä.

Taustakuvan valinta

Taustakuva on avainelementti. Sen tulisi olla olennainen sivun aiheen ja koko brändin kannalta. Jos sijoitat tekstiä tai otsikoita taustan päälle, on parempi käyttää hillittyä kuviota tai värikerrosta yksityiskohtaisen valokuvan sijaan. Sisältö ei saisi kilpailla taustan kanssa.

Valokuvissa vain korkea resoluutio. Sumuinen tai pikselöitynyt koko näytön tausta tuhoaa ammattimaisen ilmeen. Olemme koonneet kokoelman kuvapankkisivustoja, joissa on ilmaisia ja maksullisia kuvia, erillisessä katsauksessa 35 kuvapankkisivustosta.

Parallaksi mobiililaitteilla

Puhelimissa ja tableteissa parallaksi toimii epäluotettavasti. Eleisiin perustuva vieritys (pyyhkäisy) eroaa hiiren rullasta, efekti voi nykiä, viivästyä tai jäädä kokonaan näkymättä. Useimmat nykyaikaiset lisäosat ja teemat antavat poistaa parallaksin käytöstä mobiilissa yhdellä valintaruudulla, ja se on paras vaihtoehto käyttökokemuksen kannalta.

Esteettömyys

Liikkuvat taustat aiheuttavat ongelmia käyttäjille, joilla on vestibulaarisia häiriöitä: matkapahoinvointia, huimausta, tarkennusvaikeuksia. Media query prefers-reduced-motion mahdollistaa parallaksianimaatioiden automaattisen poistamisen tällaisilta vierailijoilta. Jos lisäosasi tai teemasi ei tue tätä, poista efekti vähintään mobiilissa.

Sisäänrakennetun parallaksin teeman valinta

Niille, jotka aloittavat projektin tyhjästä, helpoin reitti on valita teema, jossa parallaksi on jo valmiina. Useimmat premium-WordPress-teemat sisältävät tämän ominaisuuden ainakin kotisivulle. Jos tarvitset parallaksia sivuston eri sivuilla, katso kohti monikäyttöteemoja, joissa on edistynyt rakentaja.

Kolme testattua vaihtoehtoa:

• Divi, Elegant Themesin visuaalinen rakentaja, jossa on sisäänrakennettu parallaksitaustavaihtoehto mille tahansa osiolle;
• Ultra, Themifyn monikäyttöteema, jossa on Themify Builder ja joustavat parallaksiasetukset;
• Total, WPExplorerin monikäyttöteema, joka perustuu WPBakeryyn ja jossa on edistyneet parallaksivaihtoehdot (nopeus, suunta, mobiilikäytön esto).

Parallaksitaustan lisääminen Totalissa (WPBakery)

Alla on vaiheittainen esimerkki parallaksin määrittämisestä Total-teemassa. Total käyttää WPBakerya sivujen rakentamiseen, mutta vastaavia vaihtoehtoja on useimmissa WordPress-sivunrakentajissa.

Lisää ensin rivi ja sille sisältöä. Klikkaa kynäkuvaketta muokataksesi riviä. Jos ulkoasussa ei ole sivupalkkia, ota käyttöön "Stretch row" -vaihtoehto, jotta parallaksitausta täyttää rivin koko leveydeltä. Totalissa on myös koko näytön tila, joka venyttää taustan koko selainikkunan levyiseksi.

"Parallax"-osiossa lisää taustakuva ja aseta vieritysnopeus. Mitä suurempi luku, sitä enemmän kuva liikkuu ja sitä korkeampaa resoluutiota se vaatii.

Parallaksin lisäasetuksissa voit ottaa efektin käyttöön tai poistaa sen mobiililaitteilla, valita kuvan tyylin (cover, fixed, repeat), liikesuunnan ja tarkan nopeuden.

Taustan ja sisällön välisen kontrastin luomiseksi käytä "Overlay"-välilehteä, esimerkiksi puoliläpinäkyvää valkoista täyttöä kuvan päällä. Tallenna rivin ja sivun muutokset.

Parallaksisliderit Slider Revolutionilla

Kun tarvitset staattisen taustan sijaan kokonaisen sliderin parallaksiefektillä, paras työkalu on Slider Revolution. Tämä premium-lisäosa sisältää satoja vaihtoehtoja: fontit, tasot, siirtymäefektit, asettelut ja tietysti monitasoisen parallaksin. Yksityiskohtainen Slider Revolution -opas on erillisessä artikkelissa.

Kuinka parallaksi otetaan käyttöön Slider Revolutionissa

Asenna lisäosa ja tuo joko valmis slider-pohja tai luo slider tyhjästä.

Muokkaa dian päätaustaa: lisää lähdekuva ja siirry "Parallax / 3D" -välilehdelle määrittääksesi parallaksitason. Kun sitten lisäät tasoja (tekstiä, kuvia, painikkeita), valitse kullekin tasolle Parallax / 3D -vaihtoehto, jolloin parallaksisyvyys herättää elementit eloon toisistaan riippumatta.

Valmis slider lisätään shortcodella mihin tahansa artikkeliin tai sivuun. Jos käytät WPBakerya, vedä yksinkertaisesti Slider Revolution -elementti sivulle ja valitse slider pudotusvalikosta.

Ilmainen lisäosa Advanced WordPress Backgrounds (AWB)

Jos sinulla on jo asennettu teema, joka ei tue parallaksia, sinun ei tarvitse vaihtaa sitä. Advanced WordPress Backgrounds (AWB) on ilmainen lisäosa virallisesta WordPress.org-hakemistosta, joka lisää parallaksitaustat mille tahansa sivuelementille: lohkolle, otsikolle tai kokonaiselle osiolle. Lisäosaa kehitetään aktiivisesti: viimeisin päivitys kesäkuussa 2026, yhteensopivuus WordPress 7.0:n kanssa vahvistettu.

AWB tukee kolmea taustatyyppiä: väri, kuva ja video (YouTube/Vimeo/itse isännöity). Toimii Gutenbergin, Classic Editorin ja WPBakeryn kanssa.

AWB:n asentaminen

Siirry WordPressin hallintapaneeliin: Lisäosat → Lisää uusi. Kirjoita hakuun "Advanced WordPress Backgrounds", napsauta Asenna → Ota käyttöön.

Taustan lisäystapa riippuu editorista. WordPress.orgin lisäosakuvauksen mukaan kaikilla kolmella editorilla on käytettävissä: taustatyyppi (väri, kuva tai video), näyttökoko (cover, contain tai pattern), taustan sijainti prosentteina, peittävä kerros värivalinnalla ja läpinäkyvyydellä Alpha-valitsimen kautta, parallaksivieritys nopeusasetuksella, skaalaus ja läpinäkyvyys sekä hiiriparallaksi (tausta siirtyy hieman kursorin mukana).

Valikossa Asetukset → AWB on välilehti yleisillä parametreilla. Täällä voit poistaa parallaksi- ja videoefektit mobiililaitteilta ja tietyiltä selaimilta.

AWB Gutenbergissa

AWB on täysin yhteensopiva lohkoeditorin kanssa ja tarjoaa oman lohkonsa.

Lisää AWB-lohko ja lisää sitten sen sisään mitä tahansa muita lohkoja sisältöinesi.

Napsauta AWB-lohkoa ja siirry oikean paneelin "Lohko"-välilehteen. Täällä määrität kaikki taustaparametrit: tyyppi, kuva, parallaksi, peittävä kerros.

AWB Classic Editorissa

Klassisessa editorissa AWB toimii shortcoden kautta. Valitse teksti, joka tarvitsee parallaksitaustan, ja napsauta AWB-kuvaketta editorin työkalupalkissa.

Valitse taustakuva ja määritä muut parametrit: peittävän kerroksen väri, parallaksityyppi, nopeus. Napsauta "Lisää".

Shortcode näyttää suunnilleen tältä:

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]

Lyhytkoodilähestymistavan haittapuoli on, että tausta-asetukset eivät näy visuaalisessa editorissa, vaan koodia on muokattava käsin. Mukavaa työskentelyä varten on parempi käyttää Gutenbergia tai WPBakerya.

AWB ja WPBakery

WPBakeryn kanssa integrointi on äärimmäisen yksinkertaista. Minkä tahansa rivin asetuksiin ilmestyy ylimääräinen "Backgrounds (AWB)" -välilehti, jossa voit luoda ja määrittää parallaksitaustan ilman lyhytkoodeja, täysin visuaalisesti.

⁉️🤔 Usein kysytyt kysymykset

Pitääkö minun vaihtaa teemaani parallaksia varten?

Ei. Jos nykyinen teemasi ei tue parallaksia, ilmainen AWB-lisäosa riittää. Se lisää efektin mille tahansa elementille millä tahansa sivulla kätevän käyttöliittymän kautta koskematta muuhun teemaan. Teeman vaihtaminen on järkevää vain, jos olet joka tapauksessa aloittamassa puhtaalta pöydältä ja haluat sisäänrakennetun parallaksin suoraan paketista.

Hidastaako parallaksi sivustoa?

Huolellisella määrityksellä vain vähän. AWB käyttää kevyttä Jarallax-kirjastoa (ilman jQuerya versiosta 1.11 lähtien), ja modernit selaimet optimoivat transform-ominaisuuden grafiikkaprosessorilla. Hidastumisen pääasiallinen syy on liian raskas taustakuva. Optimoi valokuvat WebP- tai AVIF-muotoon, pidä koko 200-300 kilotavun sisällä, niin nopeus ei kärsi.

Toimiiko parallaksi iPhoneilla ja Androidilla?

Riippuu toteutuksesta. iOS:llä web-parallaksi on perinteisesti ongelmallinen: kiinteä tausta (background-attachment: fixed) jätetään Safarissa huomiotta. AWB-lisäosa ratkaisee tämän JavaScript-animaation avulla ja toimii vakaasti. Paras käytäntö mobiililaitteille on kuitenkin poistaa parallaksi kokonaan käytöstä (valintaruutu AWB:ssä tai teeman asetuksissa): pienellä näytöllä efekti on hädin tuskin havaittavissa, ja akkuresursseja säästyy.

Voiko parallaksin luoda kokonaan ilman lisäosia?

Voi. CSS-ominaisuus animation-timeline: scroll() mahdollistaa parallaksianimaation sitomisen vierityksen etenemiseen ilman yhtäkään JavaScript-riviä. Selainten tuki on kuitenkin vielä puutteellinen (Safari mukana 2024, Firefox vuodesta 2025). Yhteensopivuuden vuoksi vanhempien selainten kanssa lisäosa on edelleen luotettavampi.

Mikä tekee AWB:stä paremman kuin muut ilmaiset parallaksilisäosat?

AWB erottuu kolmella tavalla: ensinnäkin tuki kolmelle editorille (Gutenberg, Classic, WPBakery) ilman ristiriitoja; toiseksi säännölliset päivitykset, lisäosa on testattu WordPress 7.0:aan asti; kolmanneksi hiiriparallaksi ja videotaustat ilmaisversiossa, jotka ovat usein Pro-ominaisuuksia kilpailijoilla.

Tarvitaanko parallaksia hakukoneoptimointiin?

Ei suoraan. Parallaksi on visuaalinen tekniikka, ei sijoitustekijä. Mutta epäsuorasti se voi auttaa: pidempi sivullaoloaika, matalampi välitön poistumisprosentti, hakukoneet ottavat nämä huomioon. Tärkeintä on, ettei latausnopeutta ja tekstin luettavuutta uhrata efektin vuoksi.

Mikä työkalu valita omaan tehtävääsi

Jos teemasi tukee jo parallaksia, käytä sisäänrakennettuja asetuksia, se riittää etusivuille ja laskeutumissivuille.

Jos teemassasi ei ole parallaksia, AWB kattaa useimmat tyypilliset skenaariot ilmaiseksi: nopea asennus, intuitiivinen käyttöliittymä, toimii Gutenbergin ja WPBakeryn kanssa, globaali käytöstä poisto mobiilissa. Monikerroksista parallaksia sisältäviin liukusäätimiin Slider Revolution on animaatioiden joustavuudessa vertaansa vailla.

Parallaksi ei ole ihmelääke. Sivustoilla, joissa on tiheää tekstisisältöä (pitkät artikkelit, dokumentaatio), se haittaa enemmän kuin auttaa. Mutta laskeutumissivulle, portfoliolle, tuotteen promosivulle tekniikka on edelleen yksi web-suunnittelun vahvimmista. Käyttäjä unohtaa tekstin, mutta muistaa, kuinka sivu "hengitti" hänen vierittäessään.