Luo hiiren ohjattu parallax taustavaikutus

Sep 12, 2025
Miten tehdään
parallax mouse site
(Kuva luotto: Renaud Rohlinger)

Parallax-selauspaikat ovat edelleen suosittuja syystä: he luovat miellyttävän ja harjoittavan selauskokemuksen käyttäjälle. Olemme jo tarkastelleet parhaita upeita parallax vieritys Verkkosivustot innostavat sinua, mutta mitä teet, jos haluat tehdä oman?

Onneksi ranskalainen luova kehittäjä Renaud Rohlinger on täällä näyttämään köydet siitä, miten voit luoda parallax vieritys tausta, jonka voit hallita hiirellä. Tutustu hämmästyttäviin tuloksiin hänen sivustonsa , ja sitten oppia Rohlingerista alla, miten voit kopioida vaikutuksen seuraavassa projektissa.

Voit myös kokeilla jotakin näistä Verkkosivuston rakentajat , ja kun harkitset sivuston suorituskykyäsi, tarkista sivujen ylläpito Palvelu toimii sinulle. Onko media raskas sivusto? Takaisin luotettavasti pilvivarasto .

01. Määritä HTML-asiakirjakehys

parallax mouse site

Avaaminen yksiväriseen splash-näyttöön, sivusto välittömästi rinnakkain animoituja 3D-taustat japanilainen typografia (Kuva luotto: Renaud Rohlinger)

Ensimmäinen vaihe on määritellä HTML-asiakirjan kehys. Tämä koostuu HTML-säiliöstä, joka kuvaa asiakirjaa pään ja kehon osina. Kun pääosasto yhdistää ulkoiset JavaScript- ja CSS-tiedostot, kehon osio käytetään määrittämään sivun sisältöelementit vaiheessa 2. 

 & lt ;! DocType HTML & GT;
& lt; html & gt;
& lt; pää & gt;
& lt; otsikko & gt; parallax tausta & lt; / otsikko ja gt;
& lt; Link Rel = "Stylesheet" tyyppi = "Text / CSS"
href = "tyylit.css" / & gt;
& lt; script src = "code.js" & gt; & lt; / script & gt;
& lt; / head & gt;
& lt; body & gt;
   *** Vaihe 2 Tässä
& lt; / body & gt;
& lt; / html & gt;

02. Tunnista HTML-sisältö

Kehon sisältö koostuu näytön tekstistä ja Div-säiliöstä käyttäen data-parallax attribuutti. Tämä säiliöelementti, jota käytetään parallax-taustalla, kunkin lapsen elementtien kanssa on muotoiltu vaadituilla taustakuvilla. Tässä esimerkissä säiliöllä on kolme kuvakerroksia, jotka luodaan lapsen div elementteistä. 

 & lt; h1 & gt; hello! & Lt; / h1 & gt;
& lt; div data-parallax & gt;
   & lt; div & gt; & lt; / div & gt;
   & lt; div & gt; & lt; / div & gt;
   & lt; div & gt; & lt; / div & gt;
& lt; / div & gt;

03. Luo CSS Parallax Container

parallax mouse site

Vierittämällä alas, asiat saavat enemmän värikkäitä, ja rohkaisee seurata kissan merkkiä ja napsauttaa tiesi pääportfolioon (Kuva luotto: Renaud Rohlinger)

Luo uusi tiedosto nimeltä Tyylit.css . Ensimmäinen vaihe tässä tiedostossa Asettaa oletussisällön värin valkoiseksi ja Parallax-taustasäiliön asetukset. Kiinteä paikannus levitetään parallax-säiliöön, jotta se pysyy samassa asennossa kuin sisältö selaa sen yli. Oletusväri käytetään sivun värinä, kun taas negatiivinen Z-indeksi sallii säiliön näkyvän sivun sisällön alla. 

 HTML, elin {
   Väri: #FFF;
}
[data-parallax] {
   Paikka: kiinteä;
   Leveys: 100vw;
   Korkeus: 100vh;
   Top: 0;
   Vasen: 0;
   Z-indeksi: -1;
   Tausta-väri: # 000;
}

04. Aseta CSS Parllax -kerrokset

Jokainen kuvakerros on asetettu käyttämään absoluuttista sijoittamista kokoa vastaamaan selainikkunaa. Tässä esimerkissä sijaitseva parallax-kuva perustuu tiettyyn kokoiseen kuvioon, joka on asetettu toistamaan. Voit halutessasi vain toistaa kuvan pystysuoraan käyttämällä toistoa tai vaakasuoraan käyttämällä toista-x. 

 [data-parallax] & gt; * {
   Asema: Absoluuttinen;
   Leveys: 100vW;
   Korkeus: 100vh;
   Tausta-REPEAT: Toista;
   Tausta-koko: 20vW 20vw;
}

05. Käytä CSS-taustakerroksia

parallax mouse site

Innokas löytää kehitystyötä sivuston julkisuudesta, Renaud-jätteet Ei mahdollisuutta esittää WebGL-kyvyttömyys (Kuva luotto: Renaud Rohlinger)

Kun kukin kuvakerroksista jakaa vaiheessa 4 määritellyt sijainnin ja koon asetukset, jokainen kerros käyttää yksilöllistä kuvaa. N: n lastenvalitsinta käytetään jokaisen yksittäisen elementin viittaamiseen parallax-säiliöön. Taustakuva-attribuuttia käytetään kaksi riviä, jotka luovat ristikkovaikutuksen kaakeloituna. Alemmat kerrokset käyttävät tummempia värejä auttaakseen käsitystä syvyydestä. 

 [data-parallax] & gt; *: nth-child (1) {
   taustakuva:
      lineaarinen gradientti (oikealle, # 333 1px,
  läpinäkyvä 1px),
      lineaarinen gradientti (pohjaan, # 333 1px,
  läpinäkyvä 1px);
}
[data-parallax] & gt; *: nth-lapsi (2) {
   taustakuva:
      lineaarinen gradientti (oikealle, # 777 1px,
läpinäkyvä 1px),
      lineaarinen gradientti (pohjalle, # 777 1px,
läpinäkyvä 1px);
}
[data-parallax] & gt; *: nth-lapsi (3) {
   taustakuva
      lineaarinen gradientti (oikealle, #fff,
läpinäkyvä 1px),
      lineaarinen gradientti (pohjaan, #fff 1px,
 läpinäkyvä 1px);
}

06. Suorita JavaScript kerros aloitus

Luo uusi tiedosto nimeltä code.js . Tämä vaihe löytää parallax-kontin ja aloittaa jokaisen kuvakerroksensa data-indeksi Attribuutti, jota käytetään vaiheessa 7. Tämä on suoritettava selainikkunan lataustilaan liitetystä toiminnosta siten, että koodi suoritetaan vain, kun sivun kehon sisältö on valmis. 

 Window.AdDeventListener ("Lataa", toiminto () {
   var Container = Asiakirja.
QuerySelector ("[data-parallax]);
   var lapsilasit = kontti.
   for (var n = 0; n & lt; lapset.length; n ++) {
      Lasten [n] .SeTattribute ("data-indeksi", n + 1);
   }
   **** Vaihe 7 Tässä
});

07. Laske JavaScript hiiren liikkeen

Vaikutus perustuu kuhunkin parallax-kerrokseen liittyvien kuvien siirtämiseen hiiren liikkeeseen. Vaiheessa 6 tunnistetulla parallax-säiliöllä on a mousemove Tapahtuman kuuntelija, joka käynnistää toiminnon parallax-kerroksisten taustakuvien sijoittamiseksi aina, kun hiiren liikkeen on. Jokaisella kerroksella on liikkeen laskenta, joka perustuu vaiheessa 6 käytetyn indeksinumeron perusteella. 

 CONTER.ADDEVENTLISTER ("MOUSEMOVE",
 Toiminto (e) {
   var elms = this.children;
   (var c = 0; c & lt; elms.length; c ++) {
      var Motion = Parseint (Elms [C].
getattribute ("data-indeksi") / 10;
      var x = ((e.clientx) * liike) + "px";
      var y = ((e.clienty) * liike) + "px"; Elms [C] .style.backgroundposition = x +
"" + y;
   }
});

Tämä artikkeli julkaistiin alun perin Creative Web Design Magazine Nettisivujen suunnittelija . Osta nyt numero 290.

Aiheeseen liittyvät artikkelit:

  • 10 parasta CSS-kehystä vuonna 2019
  • Kuinka lisätä Animaatio SVG: lle CSS: llä
  • 52 Web-suunnittelutyökalut, joiden avulla voit työskennellä älykkäämpiä vuonna 2019

Miten tehdään - Suosituimmat artikkelit

Kuinka ladata Instagram-kuvat: Kaikki mitä tarvitset tietää

Miten tehdään Sep 12, 2025

(Kuva luotto: Joseph Foley Instagram) Lataa Instagram-kuvat - Lataa Instagram-kuva..

8 hämmästyttävää uutta graafista suunnitteluautot

Miten tehdään Sep 12, 2025

Olitpa juuri alkamassa graafisessa suunnittelussa tai kokenut pro, aina jotain uutta oppia, haluatko pysyä pelin edessä. Graafinen suunnittelu on niin laaja kurinalaisuus, joka kattaa niin ..

Pysäytä robotit Google ReCAPTCHA: lla

Miten tehdään Sep 12, 2025

(Kuva luotto: tulevaisuus) Pidä robotteja aina on numero peli - valitettavasti helppokäyttöisten koneiden oppimisk..

Kuinka nopeasti luonnokset kädet

Miten tehdään Sep 12, 2025

Voit vetää kädet, sinun on tarkasteltava käden anatomian monimutkaisuutta ja tunnistaa yksinkertaiset säännöt, jotka autta..

Sculpt Realistiset anatomia Zbrushissa

Miten tehdään Sep 12, 2025

Sivu 1/2: Sivu 1 Sivu 1 Sivu 2 Jos haluat mennä pidempään kuin v..

Miten vaikuttaa Google-rankingille sisällön kanssa

Miten tehdään Sep 12, 2025

Sisältösi ei mene mihinkään, ellei ihmiset voi etsiä ja löytää sitä, joten sisältö on kirjoitettava ymmärryksessä, k..

Maalaa karvainen lemmikkieläinten muotokuva

Miten tehdään Sep 12, 2025

Valmis kissan muotokuva Maalaus lemmikkejä ja Eläinten piirtäminen voi olla hauskaa. Vaikka ..

Karikatyyrin anatomia: 15 Top Vinkkejä

Miten tehdään Sep 12, 2025

Kokopäiväisenä freelancer, olen tottunut työskentelemään eri tyylejä ja Piirustustekniikat . Näihin kuuluv..

Luokat