JavaScript-kirjastot Cool Scrolling Effectsille
Verkkosivujen suunnittelu tulee elämään hyvin toteutetulla animaatiolla. Jos etsit asianmukaisia kirjastoja, joilla voit lisätä tehosteita projektiisi, tässä olen tehnyt luettelon joistakin kirjastoista voit antaa vaikutuksia vieritystapahtuman perusteella.
Kun käyttäjä vierittää sivusi alaspäin, toimi voidaan suunnitella käynnistämään erilaisia animaatiovaihtoehtoja kuten häipymisvaikutukset, hämärtyminen, 3D, parallaksi ja paljon muuta. Täällä on 25 JS-kirjastoa, jotka auttavat sinua saavuttamaan tällaisen vastauksen sivustosi suunnittelussa.
Selaa Paljastaa
Kirjasto, jonka avulla on helppo lisätä vierityspalvelua sekä web- että mobiililaitteille. Voit asettaa mukautetun helpottamisen, 3D-kierron, keston ja monet mor-parametrit elävälle elementille.
riippuvuudet: ei yhtään | Koko: 2.9kb | Lisenssi: MIT
Aniview
Plugin, joka toimii yhdessä Animate.CSS: n kanssa, jotta animaatiot otetaan käyttöön vain, kun elementti tulee katseluympäristöön.
riippuvuudet: jQuery | Koko: 1kb | Lisenssi: N / A
Fade Into View
Lisäosa, joka lisää häivytys- / poistotehon elementteihin, kun ne tulevat ennalta määrättyihin näkymänäkymiin tai poistuvat niistä.
riippuvuudet: jQuery | Koko: 3.81kb | Lisenssi: N / A
VAU
WOW paljastaa Animate.css-animaatioita vieritystapahtuman jälkeen. Voit määrittää animaation keston, viiveet, siirtymät ja iteraatiot heti HTML-merkinnästä, ja soita vain elementin luokkaan JS: ltä.
riippuvuudet: Animate.css | Koko: 8.23kb | Lisenssi: MIT
ScrollMagic
Tämä laajennus näyttää "maagisen" vaikutuksen, kun käyttäjä vierittää sivua. Se sopii erinomaisesti animaatioon, elementin kiinnittämiseen tai CSS-luokan vaihtamiseen, kaikki perustuvat vierityspaikkaan. ScrollMagic voi työskennellä yhdessä GSAP: n ja VelocityJS: n kanssa animaatiotilanteessa. Katso täydelliset demot täältä.
riippuvuudet: jQuery, GSAP, Velocity.js | Koko: 16.9kb | Lisenssi: MIT
jScrollability
jScrollabilityilla voit luoda yksittäisiä verkkosivuja, joissa on monimutkaisia vierityspohjaisia animaatioita. Kun käyttäjä on vieressä, elementti animoi vierityspisteiden perusteella. Animaatiot suoritetaan vierityskyvyn perusteella, ja tietysti voit asettaa animaation alun ja lopun.
riippuvuudet: jQuery | Koko: 1,86kb | Lisenssi: MIT
pushIn.js
Yksinkertainen kirjasto, joka lisää dolly-in tai push-in -toiminnon mihin tahansa elementtiin, joka toimii, kun käyttäjä selaa sivun läpi. Se on helppo toteuttaa: lisää vain käynnistys-, pysäytys- ja nopeusparametrit data-parametrien HTML-elementtiin.
riippuvuudet: ei mitään | Koko: 4,94 kb | Lisenssi: N / A
Scrollissimo
Tämä on JS-kirjasto, joka lisää sileitä vierityspainikkeita. Siinä hyödynnetään Greensockin tweenejä ja aikatauluja, jotta animaatiot saadaan sujuvammiksi.
riippuvuudet: GreenShock TweenLite / TweenMax | Koko: 2.94kb | Lisenssi: N / A
jQuery Animation Scroll Plugin
Tämä on jQuery-laajennus, jonka avulla voit lisätä viewport-laukaistun animaation Greensockin avulla. Se helpottaa elementtien animointia helpottamalla, muuntamalla, mittakaavalla, pyörimällä ja 3D-animaatioilla.
riippuvuudet: jQuery, GreenShock | Koko: 14 kb | Lisenssi: GNU GPL
Circlr
Circlr-sovelluksen avulla voit luoda kierto-animaation elementtiin, jonka laukaiseminen, hiiritapahtumat tai kosketustapahtumat käynnistävät. Se on täydellinen, jos haluat tehdä näyttelyn kaikista tuotteista, joita voidaan tarkastella kaikista 360 astetta.
riippuvuudet: ei mitään | Koko: 6.05kb | Lisenssi: MIT
Scrollimator
Scrollimator näyttää sijainnin ja vierityksen edistyksen ja palauttaa arvot, joita voit muuttaa käyttäjän vierityskäyttäytymiseen liitettyjen animaatioiden välillä. Se tukee pystysuoraa ja vaakasuoraa vieritystä.
riippuvuudet: ei mitään | Koko: 37,7 kb | Lisenssi: N / A
Crossfade
Crossfade on plugin, joka lisää ristiinfadefektin kuvaan. Epäselvä vaikutus jatkuu, kun käyttäjä siirtyy alaspäin.
riippuvuudet: jQuery | Koko: 3.19kb | Lisenssi: MIT
Sivun vieritysvaikutus
Tämä on kirjasto CodyHousen luomille kokeellisille sivun vieritysvaikutuksille. Se hyödyntää velocitey.js animaatiot.
riippuvuudet: jQuery, Velocity.js | Koko: 17,6 kb | Lisenssi: N / A
jquery.parallax-scroll
Tämän kirjaston avulla voit lisätä sileän parallaksivaikutuksen pystysuoraan sivun vieritykseen. Tuo vain jQuery ja jquery.easing.1.3.js ja lisää sitten 'Data-parallaksi' ominaisuus ja valinnaiset parametrit elementtisi mukauttamiseksi.
riippuvuudet: jQuery, jQuery.easing | Koko: 8.72kb | Lisenssi: GNU GPL
parallax.js
Parallax.js on yksinkertainen plugin, joka lisää parallaksin vieritysvaikutusta, jonka inspiroi Spotify-sivusto.
riippuvuudet: jQuery | Koko: 6.63kb | Lisenssi: MIT
Enllax
Enllax on erittäin kevyt kirjasto, jota käytetään parallaksivaikutuksen soveltamiseen mihin tahansa vierityselementtiin. Voit asettaa taustan tai etualan elementit hyökkäämään. Se toimii sekä pysty- että vaakatasossa.
riippuvuudet: jQuery | Koko: 1,53kb | Lisenssi: MIT
Hämärtää selaamalla
Tämän kirjaston avulla voit lisätä kuvaan hämärtävän vaikutuksen, joka käynnistyy sivun vierittämisen avulla. Mitä syvemmälle selaat sivua alaspäin, sitä epätarkempi kuva tulee.
riippuvuudet: ei mitään | Koko: 1.1kb | Lisenssi: N / A
boxLoader
boxLoader on yksinkertainen plugin, jonka avulla voit ladata elementtejä sivun vierityksen aikana. Määrittämäsi parametri ovat suunnat (x tai y), sijainti prosentteina, vaikutus ja kesto.
riippuvuudet: jQuery | Koko: 3,42 kb | Lisenssi: N / A
Kallistettu sivun vieritys
Kun käyttäjä selaa sivua, tämä laajennus paljastaa upean 3D-kallistetun vaikutuksen asetettuun elementtiin.
riippuvuudet: jQuery | Koko: 1.5kb | Lisenssi: GNU GPL
AhRelax
AhRelax tarjoaa mahdollisuuden tehdä nopeasti selaamiseen perustuvia animaatioita. Se on lighweight ja on myös erinomainen suorituskyky. Voit lukea lisää tästä.
riippuvuudet: jQuery | Koko: 1.6kb | Lisenssi: MIT
Fancy Scroll
Jos näet joskus ylivuodon vieritystehosteen Androidissa tai iOS: ssa, tämän laajennuksen avulla voit nyt soveltaa sitä sivustossasi. Voit lisätä animaation, joko paluun tai hehkun, kun käyttäjä saavuttaa sivun ylä- / alareunan.
riippuvuudet: jQuery | Koko: 2,64 kb | Lisenssi: GNU GPL
Parallax-kuva vierittää
Tämä laajennus tekee elementeistä kelluvat ja liikkuvat, kun käyttäjä siirtyy sivulle tai ylöspäin.
riippuvuudet: jQuery | Koko: 8.69kb | Lisenssi: MIT
Rlsmooth
Tämä on pieni plugin, joka luo virtaavan vaikutuksen, kun käyttäjä skolloi sivua tai ylöspäin. Saatavilla on kolme vaikutusta: liukumäki, haalistuminen ja näyttäminen.
riippuvuudet: jQuery | Koko: 1.95kb | Lisenssi: MIT
Scrollme
Lisää sivun vieritykseen yksinkertaisia tehosteita, kuten skaalausta, pyörittämistä, kääntämistä ja elementtien läpinäkyvyyden muuttamista. Se on helppo asentaa: tuo vain jQuery, tämä laajennus ja aseta animaatioparametrit elementin merkintään.
riippuvuudet: jQuery | Koko: 5.45kb | Lisenssi: N / A
Parallax ImageScroll
Tämän laajennuksen avulla voit antaa parallaksivaikutuksen sivun kuvaan. Se käyttää CSS3-muunnosta tehostamaan vaikutusta. Tämä laajennus tukee jQueryä ja AMD: tä.
riippuvuudet: jQuery | Koko: 8.01kb | Lisenssi: MIT
