10 cele mai bune pluginuri de defilare Parallax

  • Simon Gallagher
  • 0
  • 2059
  • 506

Site-urile de defilare îndelungate au devenit o tendință de design web foarte comună. Unul dintre cele mai cool subtipuri sunt site-urile de defilare paralax, în care imaginile se mută pentru a produce un efect de paralax. Pe măsură ce utilizatorul derulează în josul paginii, animațiile sunt declanșate și, în general, oferă un aspect nou și oricărui site web, dacă este implementat corect.

Efectuarea unui site de derulare parallax este deseori obositoare, deoarece necesită cunoștințe aprofundate despre CSS, Javascript și un design web bun pentru a scoate din evidență. Iată o listă cu Cele mai bune pluginuri de defilare Parallax care nu numai că îți facilitează crearea de site-uri de defilare paralax, dar, de asemenea, au o bibliotecă cu efecte de paralax bine dotate, astfel încât să devină mai ușor și mai rapid pentru a dezvolta o pagină web cu aspect bun.

DISCLAIMER: Înainte de a porni, rețineți că pentru a utiliza aceste pluginuri este necesară o anumită cunoaștere a tehnologiilor web (HTML / CSS / Javascript). Cele mai multe dintre plugin-urile enumerate utilizează jquery, astfel încât ar putea fi necesară cunoașterea Jquery.

Pluginele de defilare Parallax

1. ScrollMagic

ScrollMagic este unul dintre cele mai populare și bogate caracteristici de jquery acolo. Este o bibliotecă javascript care vă permite să creați efecte de defilare aparent magice. Folosind ScrollMagic puteți anima în funcție de poziția de defilare. Acest lucru înseamnă că puteți repara, muta sau anima elemente HTML în timp ce defilați, indiferent de durata dorită și, de asemenea, puteți adăuga cu ușurință efecte de paralax pe site-ul dvs. web. Este foarte personalizabil și este, de asemenea, ușor (6kb atunci când se face gzipped). Printre alte plugin-uri de derulare parallax, Scroll Magic are cea mai bună documentare și resurse externe. Este perfect compatibil și cu mobilul.

ScrollMagic are o listă de exemple. Verificați-le pentru inspirație și îndrumări privind utilizarea acestei biblioteci.

Despre:

Pagina de start: http://janpaepke.github.io/ScrollMagic/

Creat de: Jan Paepke

Instalare:

1. CDN:

 
 

2. Descărcați de la Github

2. skrollr

skrollr este o bibliotecă CSS ușoară ușoară și CSS, fără jQuery implicat. Este practic „Scroll Magic simplificat pentru CSS”. Pentru a utiliza skrollr, nu trebuie să cunoașteți Javascript sau niciun jQuery. Doar HTML și CSS sunt suficiente. skrollr utilizează atribute de date pentru a anima orice element HTML pe care îl doriți. Unul dintre dezavantajele principale ale skrollr este că animațiile funcționează numai în timp ce pagina este defilată. În caz contrar, toate efectele sunt suspendate. skrollr vă permite să animați toate proprietățile CSS ale elementelor dvs. HTML.

Despre:

Pagina de start: http://prinzhorn.github.io/skrollr/

Creat de: Prinzhorn

Instalare: descărcați de la Github

3. paginaPiling.js

Page Piling este un plugin jQuery care vă permite să vă creați site-ul dvs. în diferite secțiuni care se acumulează unul peste altul. La defilare sau accesând adresa URL, fiecare secțiune este dezvăluită într-o animație glisantă. pagePiling.js este compatibil cu toate platformele - desktop, tabletă și mobil - și funcționează cu majoritatea browserelor. Se degradează cu grație pe browserele mai vechi care nu acceptă animațiile sale (cum ar fi IE 7). Pentru a utiliza pluginul, trebuie să includeți un CSS și un fișier Javascript în HTML. pagePiling.js este inițializată de funcția (document) .ready:

$ (document) .ready (funcție ()
$ ( '# Pagepiling') pagepiling ().;
);

Pentru inițializări mai avansate, accesați README.md.

Despre:

Pagina de start: http://alvarotrigo.com/pagePiling/

Creat de: alvarotrigo

Instalare: descărcați de la Github

4. Alton

Alton este un plugin jQuery „scroll-jacking to us”. Declanșarea prin defilare înseamnă că defilarea nativă a browserului dvs. este dezactivată în favoarea defilării direcționate, care atunci când este inițiat (de către roata mouse-ului sau touchpad-ul) vă duce la următorul punct vertical de pe ecran sau în partea de sus a următorului container.

Alton permite trei funcționalități separate, numite „Hero”, „Bookend” și „Standard”. Standard vă permite să folosiți defilarea completă a paginii, cu fiecare secțiune de 100% înălțime. Un defilare prezintă secțiunea următoare sau secțiunea anterioară. Bookend vă permite să creați o experiență de tip bookend în timp ce Hero vă permite să derulați jack-ul numai în secțiunea „Hero”, restul paginii având (reactivat) derularea nativă.

Despre:

Pagina de start: http://paper-leaf.com/alton-jquery-scroll-jacking-plugin/

Creat de: hârtie-frunze

Instalare: descărcați de la Github

5. Stellar.js

Stellar este un plugin jQuery prin care puteți adăuga cu ușurință efecte de derulare paralax. Pentru a rula, mai întâi trebuie să executați funcția $ .stellar (). Setările de animație pentru elemente individuale pot fi configurate folosind atribute de date pe acel element.

Stellar vă permite chiar să aveți fundaluri de paralax, care sunt fundaluri care se repoziționează pe defilare. Una dintre cele mai utile caracteristici ale Stellar.js este compensarea.

Toate elementele se vor întoarce la poziționarea inițială atunci când părinții lor compensați se întâlnesc cu marginea ecranului plus sau cu minus propriul decalaj opțional. Acest lucru vă permite să creați modele complexe de paralax foarte ușor. (Documentație Stelară)

Despre:

Pagina de start: http://markdalgleish.com/projects/stellar.js/

Creat de: Mark Dalgeish

Instalare: descărcați de la Github

6. multiScroll.js

Acest plugin este creat de același dezvoltator (alvarotrigo) care a făcut pluginul pagePiling.js. Ceea ce face defilarea multiplă este practic, vă permite să creați un efect în care fiecare secțiune de pagină se încarcă în două părți împărțite, care alunecă în loc pe măsură ce se încarcă pagina. Consultați pagina principală pentru a vedea cum arată acest lucru în browserul dvs. multiScroll.js vă permite să setați viteza de derulare, ușurarea, opțiunea de derulare a tastaturii și multe alte proprietăți, astfel încât să puteți personaliza efectul la exact cum trebuie să fie.

Despre:

Pagina de start: http://alvarotrigo.com/multiScroll/

Creat de: alvarotrigo

Instalare: descărcați de la Github

7. ScrollMe

ScrollMe este un plugin pentru adăugarea efectelor simple de paralax la pagina dvs. Poate scala, roti, traduce și modifica opacitatea elementelor din pagină, în timp ce defilați. ScrollMe nu necesită Javascript și doar cunoștințele CSS sunt suficiente. Prin adăugarea clasei „animateme” și a atributelor de date necesare, puteți anima orice element HTML. ScrollMe este cel mai bine utilizat pentru a adăuga efecte CSS. Este ușor și toate animațiile sunt netede, atât timp cât le folosești cu moderație.

Despre:

Pagina de start: http://scrollme.nckprsn.com/

Creat de: Nick Pearson

Instalare: descărcați de la Github

8. Defilare Parallax

Parallax Scroll este un plugin jQuery ușor de utilizat, care vă permite să creați efectul de defilare a imaginii paralax găsit pe site-uri precum Spotify. Este destul de simplu de utilizat - trebuie doar să specificați clasele CSS necesare pentru deținătorii de imagini. Decât să folosești

Jarallax este o bibliotecă CSS și Javascript care este specializată în efecte de defilare paralax. Jarallax este configurat folosind Javascript (Fără jQuery, doar vanilie JS pură). Suporta funcții de derulare netezite, ușurare și animație paralaxă. Jarallax este acceptat de majoritatea browserelor de pe platforme. Site-ul Jarallax are documentație excelentă despre cum puteți personaliza Jarallax pentru nevoile dvs. Jarallax are, de asemenea, tutoriale video care arată cum să configurați Jarallax pentru site-ul dvs. web și cum să începeți.

Despre:

Pagina de start: http://www.jarallax.com/

Creat de: Jarallax

Instalare: descărcați de pe site-ul Jarallax

10. Superscrollorama

Superscrollorama este un plugin bazat pe jQuery care acceptă animații de defilare. Este alimentat de TweenMax și Greensock Tweening Engine, ceea ce crește performanța animației și netezimea. Animațiile Superscrollorama sunt numite prin jQuery și puteți utiliza, de asemenea, majoritatea funcțiilor TweenMax.js. Din păcate, aceste animații nu sunt complet acceptate de dispozitivele mobile (deoarece dispozitivele cu ecran tactil se ocupă de derulare într-un mod diferit). Cu toate acestea, folosind metoda setScrollContainerOffset, efectele Superscrollorama pot fi accesate pe dispozitive mobile.

Iată codul pentru a face acest lucru:

.setScrollContainerOffset (x, y)

(x: decalarea x a containerului de defilare, y: decalarea x a conținutului de defilare)

Despre:

Pagina de start: http://johnpolacek.github.io/superscrollorama/

Creat de: johnpolacek

Instalare: descărcați de la Github

VEZI DE asemenea: 10 cele mai bune generatoare de site statice




Nimeni nu a comentat acest articol încă.

Ghiduri de cumpărare gadget, tehnologii care contează
Publicăm ghiduri detaliate pentru achiziționarea de echipamente, creăm liste interesante cu cele mai bune produse de pe piață, acoperim știri din lumea tehnologiei