JavaScript-kirjastot viileille Vieritysefekteille

Verkkosivujen suunnittelu herää eloon hyvin toteutetulla animaatiolla. Jos etsit oikeita kirjastoja lisätäksesi tehosteita projektiisi, tässä olen tehnyt listan kirjastoista, joita voit käyttää tehosteiden antamiseen vieritystapahtuman perusteella.

kun käyttäjä selaa verkkosivuasi, toiminto voidaan suunnitella käynnistämään erilaisia animaatiovaihtoehtoja, kuten fade effects, blur, 3D, parallax ja paljon muuta. Täällä on 25 JS-kirjastoa, jotka voivat auttaa sinua saavuttamaan tällaisen vastauksen sivustosi suunnittelussa.

Lue lisää: 15 esimerkkiä verkkosivujen suunnittelussa oikein tehdystä vierityksestä

vieritys paljastaa

kirjaston, jonka avulla on helppo lisätä vieritysanimaatiota sekä verkkoon että mobiiliin. Voit asettaa mukautetun helpottaminen, 3D kierrosta, kesto ja monet mor parametrit elementti haluat animoida.

riippuvuudet: ei mitään | Koko: 2.9 kb | lisenssi: mit

Aniview

liitännäisen, joka toimii yhdessä animaation kanssa.CSS mahdollistaa animaatiot vain silloin, kun elementtisi tulee viewportiin.

Dependencies: jQuery / Size: 1KB / Licence: N / A

Fade into View

liitännäinen, joka lisää fade in/out-efektin elementteihin, kun ne saapuvat tai poistuvat ennalta määrätyistä katseluporteista.

Dependencies: jQuery | Size: 3,81 kb | Licence: N/A

WOW

WOW paljastaa animaation.CSS animaatiot vieritystapahtuman yhteydessä. Voit määrittää animaation keston, viiveet, siirtymät ja toistot suoraan HTML-merkinnästä, sitten vain soittaa elementin luokkaan JS: stä.

Riippuvuudet: Animoivat.css / koko: 8,23 kb / lisenssi: MIT

ScrollMagic

tämä liitännäinen näyttää ”maagisen” efektin, kun käyttäjä vierittää sivua. Se on täydellinen animointi, pinning elementti, tai toggling CSS-luokan, kaikki perustuu vieritys sijainti. ScrollMagic voi työskennellä yhdessä GSAP: n ja VelocityJS: n kanssa animaatiokohtauksen luomisessa. Katso koko demot täältä.

riippuvuudet: jQuery, GSAP, nopeus.js / koko: 16,9 kb | lisenssi: mit

jScrollability

jScrollability mahdollistaa yksittäisten verkkosivujen luomisen monimutkaisilla vierityspohjaisilla animaatioilla. Kun käyttäjä sroll, Elementti animoi perustuu vierityspaikat. Animaatiot toimivat rullasyvyyden perusteella, ja voit tietysti asettaa animaation alun ja lopun.

Dependencies: jQuery | Size: 1,86 kb / Licence: mit

pushIn.js

yksinkertainen kirjasto, johon voi lisätä dolly-in-tai push-in-efektin mihin tahansa elementtiin, joka toimii käyttäjän vierittäessä sivua. Se on helppo toteuttaa: lisää vain alku -, pysäytys-ja nopeusparametrit data-params HTML-elementtiisi.

Dependencies: none / Size: 4,94 kb / Licence: N/A

Scrollissimo

tämä on JS-kirjasto, johon voi lisätä sujuvia vieritysohjattuja animaatioita. Se hyödyntää Greensockin tweens ja aikajanoja luoda tasaisempia animaatioita.

Riippuvuudet: GreenShock TweenLite/TweenMax / Koko: 2.94kb / Ajokortti: ei sovelleta

jQuery Animation Scroll Plugin

tämä on jQuery-liitännäinen, jolla voi lisätä näkymäikkunan käynnistävän animaation Greensockin avulla. Sen avulla on helppo animoida elementtejä helpottamalla, muuntamalla, skaalaamalla, kiertämällä ja 3D-animaatioilla.

riippuvuudet: jQuery, GreenShock / koko: 14kb | lisenssi: GNU GPL

Circlr

Circlr mahdollistaa pyörimisanimaation luomisen elementtiin, jonka käynnistää vieritys, hiiritapahtumat tai kosketustapahtumat. Se on täydellinen tehdä Näyteikkuna tuote, jota voidaan tarkastella kaikista 360 astetta, aktivoitu käyttäjän Selaa.

riippuvuudet: ei mitään / koko: 6,05 kb / lisenssi: MIT

Scrollimator

Scrollimator näyttää sijainnin ja vierityksen edistymisen sekä palauttaa arvot, joiden avulla voit muuttaa käyttäjän vierityskäyttäytymiseen liitettyjä animaatioita. Se tukee pysty-ja vaakasuunnassa vieritys.

riippuvuudet: ei mitään / Koko: 37.7 kb / lisenssi: Ei sovelleta

Crossfade

Crossfade on liitännäinen, jolla crossfade-efekti lisätään kuvaan. Sumea vaikutus jatkuu, kun käyttäjä rullaa alempana.

riippuvuudet: jQuery / koko: 3,19 kb / lisenssi: MIT

Page Scroll Effect

tämä on codyhousen luoma kirjasto kokeellisille sivun vieritystehosteille. Se hyödyntää velociteya.js animations.

riippuvuudet: jQuery, Velocity.js / koko: 17,6 kb | lisenssi: N/A

jquery.parallaksi-vieritys

tämän kirjaston avulla voit lisätä sileän parallaksi-efektin pystysivun vieritykseen. Tuo vain jQuery ja jquery.helpottaa.1.3.js, lisää sitten 'data-parallax' – attribuutti ja valinnaiset patametrit elementtiisi efektin mukauttamiseksi.

riippuvuudet: jQuery, jQuery.kevennys / koko: 8,72 kb / lisenssi: GNU GPL

parallaksi.js

parallaksi.js on yksinkertainen plugin, joka lisää parallax vieritys vaikutus, innoittamana Spotify verkkosivuilla.

riippuvuudet: jQuery / koko: 6,63 kb / lisenssi: MIT

Enlax

Enlax on superkevyt kirjasto, jota käytetään parallaksi-efektin soveltamiseen mihin tahansa vieritettävään elementtiin. Voit asettaa tausta-tai etualan elementtejä hav ethis vaikutus. Se toimii sekä pysty-että vaakasuunnassa vieritys.

riippuvuudet: jQuery | Size: 1.53 kb | Licence: mit

hämärtää vierittämällä

tämän kirjaston avulla voit lisätä sumennusefektin kuvaan, jonka käynnistää sivun vieritys. Mitä syvemmälle sivua vieritetään, sitä sumeammaksi kuva muuttuu.

Dependencies: none / Size: 1.1 kb / Licence: N/A

boxLoader

boxLoader on yksinkertainen liitännäinen elementtien lataamiseen sivun vierityksen yhteydessä. Parametri sinun pitäisi asettaa ovat suuntiin (x tai y), kanta prosenttia, vaikutus ja myös kesto.

riippuvuudet: jQuery / koko: 3,42 kb / lisenssi: Ei sovelleta

kallellaan sivun vieritys

kun käyttäjä rullaa sivun läpi, tämä plugin paljastaa mahtava 3D kallistettu vaikutus elementti olet määrittänyt.

riippuvuudet: jQuery / Koko: 1.5 kb / lisenssi: GNU GPL

AhRelax

AhRelax tarjoaa tavan tehdä nopeita vierityspohjaisia animaatioita. Se on kevyt ja on myös hyvä suorituskyky. Voit lukea siitä lisää täältä.

riippuvuudet: jQuery / koko: 1,6 kb / lisenssi: MIT

Fancy Selaa

jos joskus nähdä ylivuoto vieritys vaikutus Android tai iOS, tämän plugin voit nyt soveltaa tämän sivuston. Voit lisätä animaation, joko pomppia tai hehkua, kun käyttäjä saavuttaa sivun ylä – / alalaidan.

riippuvuudet: jQuery | Size: 2.64 kb | lisenssi: GNU GPL

Parallax image scroll

tämä liitännäinen saa elementit leijumaan ja liikkumaan käyttäjän vierittäessä sivua alas tai ylös.

riippuvuudet: jQuery / koko: 8,69 kb / lisenssi: MIT

Rlsmooth

tämä on pieni liitännäinen, jolla luodaan virtaava vaikutus, kun käyttäjä scolls alas tai ylös sivun. Saatavilla on kolme efektiä: slide, fade ja show.

riippuvuudet: jQuery / koko: 1,95 kb / lisenssi: MIT

Scrollme

lisää sivun vieritykseen yksinkertaisia efektejä, kuten skaalaa, kiertää, kääntää ja muuttaa elementtien peittävyyttä. Se on helppo asentaa: vain tuoda jQuery, tämä plugin, ja asettaa animaatio parametrit elementin markup.

Dependencies: jQuery / Size: 5,45 kb / Licence: N / A

Parallax ImageScroll

tämän liitännäisen avulla voit antaa parallax-efektin mille tahansa sivulla olevalle kuvalle. Se hyödyntää CSS3 muuttaa tehdä vaikutus työtä. Tämä plugin on tuki jQuery ja AMD.

riippuvuudet: jQuery / koko: 8,01 kb / lisenssi: MIT