Rellax.js - Free Parallaxin ominaisuudet Vanilla JavaScriptin avulla
Parallaxin vieritys näyttää uskomattomalta, kun se tehdään oikein. Se ei ole ominaisuus, jota haluat jokaisella verkkosivustolla, mutta mainospaikoilla ja aloitussivuilla, parallaksielementeillä tartu huomiota nopeasti.
On olemassa tonnia ilmaisia JavaScript-kirjastoja animoituja vieritystehosteita mutta monet ovat paisuneet tai liian monimutkaisia joillekin ihmisille.
Siksi suosittelen Rellax.js parallaksisi tarpeisiin. Se on ilmainen avoimen lähdekoodin plugin, joka on rakennettu vanilja-JavaScriptiin ei ole mitään riippuvuuksia.
Oletuksena se on vaatii vain yksinkertaisen toimintopuhelun Parallaksiluokan määrittäminen sivuelementteihin. Sitten, kun selaat, nämä elementit pysy kiinteänä ja siirry käyttäjän näkökulmasta.
Voit muokata näitä elementtejä, jotta ne näkyvät lähempänä, kauempana tai sivuelementtien takana. Tämä luo illuusio syvyydestä sivulla ja kaikki toimii yksinkertaisen JavaScript-kirjaston kautta.
Kaikki Rellax-lähdekoodi on saatavilla ilmaiseksi GitHubissa, jos haluat ladata kopion.
Koko asennus käyttää yhtä JS-toimintoa kohdistaminen .rellax luokkaa näin:
var rellax = uusi Rellax ('. rellax'); Huomaa, että voit käyttää melko paljon minkä tahansa luokan haluat, mutta esimerkki demo käyttää .rellax yksinkertaisuuden vuoksi.
Täältä vain kääri parallaksielementtejä sisällä div kanssa .rellax luokka ja aseta nopeusmäärite. Tämä toimii data-rellax-nopeus mukautettu määrite, joka hyväksyy arvot -10 - +10.
Tässä on esimerkinpätkä esittelysivun HTML-koodista:
Olen erittäin hidas ja sileä
Voit myös keskiosia sivulla ja muokkaa elementin sijainteja CSS: n kautta.
Rellax ei kerro, miten sivua voidaan jäsentää tai miten CSS-elementit määritetään sivulla. Kaikki se on luo luonnollinen parallaksi-vieritysvaikutus puhdas JavaScript. Kuinka käytät tätä, on sinusta yksin.
Jos haluat nähdä a live-esittely, katsele pääsisältöä tai selaa GitHub-repoa. Tämä sisältää joitakin asiakirjoja sekä linkkejä live-sivustoihin Rellax.js-ohjelmiston avulla.
Ja mikä parasta, joukkue on aina valmis ottamaan vetopyynnöt, joten jos huomaat ongelmia tai ehdotuksia ominaisuuksista, lähetä pikaviesti joukkueelle.
