Site-urile lungi de defilare au devenit o tendință foarte comună în designul web. Unul dintre cele mai subtile tipuri de acest lucru sunt site-urile de parallax scrolling, în care imaginile se deplasează pentru a da un efect de parallax. Pe măsură ce utilizatorul scroll în jos pagina, animațiile sunt declanșate și, în general, oferă un aspect nou și simt unui web site dacă este implementat corect.
Efectuarea unui site parallax scrolling este adesea obositoare, deoarece necesită cunoștințe aprofundate despre CSS, Javascript și designul de web bun pentru a scoate. Iată o listă a celor mai bune pluginuri Parallax Scrolling, care nu numai că ușurează crearea site-urilor de parallax scrolling, ci și o bibliotecă de efecte paralela bine dotate, astfel încât să devină mai ușoară și mai rapidă pentru a dezvolta o pagină web bună .
DISCLAIMER : Înainte de a porni, rețineți că pentru a utiliza aceste pluginuri este necesară cunoașterea tehnologiilor web (HTML / CSS / Javascript). Cele mai multe dintre pluginurile listate utilizează jquery, deci cunoașterea Jquery ar putea fi, de asemenea, necesară.
Parolale de derulare Parallax
1. ScrollMagic
ScrollMagic este unul dintre pluginurile cele mai populare și bogate în jquery. Este o bibliotecă javascript care vă permite să creați efecte aparent magice de defilare. Folosind ScrollMagic puteți anima în funcție de poziția dvs. de defilare. Aceasta înseamnă că puteți să reparați, să mutați sau să animați elemente HTML în timp ce defilați, indiferent de durata dorită și, de asemenea, să adăugați cu ușurință efecte parallax pe site-ul dvs. Web. Este foarte personalizabil și este, de asemenea, ușor (6kb atunci când gzipped). Printre celelalte pluginuri de parallax scroll, Scroll Magic are cea mai bună documentație și resurse externe. Este perfect compatibil și cu telefonul mobil.
ScrollMagic are o mulțime de exemple enumerate. Verificați-i pentru inspirație și îndrumare cu privire la utilizarea acestei biblioteci.
Despre:
Pagina de start: //janpaepke.github.io/ScrollMagic/
Creat de: Jan Paepke
Instalare:
1. CDN:
2. Descărcați de la Github
2. skrollr
skrollr este o bibliotecă ușor Javascript și CSS, fără implicarea jQuery. Este în esență "Scroll Magic simplificat pentru CSS". Pentru a utiliza scrollr, nu trebuie să știți Javascript sau orice jQuery. Doar HTML și CSS sunt suficiente. skrollr folosește atributele de date pentru a anima orice element HTML dorit. Unul dintre principalele dezavantaje ale skrollr-ului este că animațiile funcționează doar în timp ce pagina este derulată. În caz contrar, toate efectele sunt puse în așteptare. skrollr vă permite să animați toate proprietățile CSS ale elementelor dvs. HTML.
Despre:
Pagina de start: //prinzhorn.github.io/skrollr/
Creat de: Prinzhorn
Instalare: descărcare de la Github
3. pagePiling.js 
Page Piling este un plugin jQuery care vă permite să vă creați site-ul web în diferite secțiuni care se asortează unul peste celălalt. După derulare sau prin accesarea adresei URL, fiecare secțiune este dezvăluită într-o animație elegantă alunecoasă. pagePiling.js este compatibil cu toate platformele - desktop, tabletă și mobil - și funcționează cu cele mai multe browsere. Acesta se degradează grațios pe browserele mai vechi care nu acceptă animațiile sale (cum ar fi IE 7). Pentru a utiliza pluginul, trebuie să includeți un fișier CSS și un fișier Javascript în interiorul HTML. pagePiling.js este inițializată de funcția (document) .ready:
$( document ).ready( function () {
$( ' #pagepiling ' ).pagepiling();
});
Pentru mai multe inițiative avansate, mergeți prin README.md.
Despre:
Pagina de start: //alvarotrigo.com/pagePiling/
Creat de: alvarotrigo
Instalare: descărcare de la Github
4. Alton
Alton este un plug-in jQuery "scroll-to us". Parcurgerea prin derulare înseamnă că defilarea nativă a browserului dvs. este dezactivată în favoarea derulării direcționate care, atunci când este inițiată (de la rotița mouse-ului sau de pe touchpad), vă duce la următorul punct vertical de pe ecran sau în partea de sus a containerului următor.
Alton permite trei funcții separate, numite "Hero", "Bookend" și "Standard". Standard vă permite să utilizați derularea completă a paginii, fiecare secțiune având o înălțime de 100%. O defilare produce următoarea secțiune sau secțiunea anterioară. Bookend vă permite să creați o experiență de tip "bookend-kind", în timp ce Hero vă permite să derulați numai mufa "Hero", cu restul paginii având scroll-ul (reactivat) nativ.
Despre:
Pagina de start: //paper-leaf.com/alton-jquery-scroll-jacking-plugin/
Creat de: foaie de hârtie
Instalare: descărcare de la Github
5. Stellar.js
Stellar este un plugin jQuery prin care puteți adăuga cu ușurință efecte scrolling parallax. Pentru a rula, mai întâi trebuie să executați funcția $ .stellar (). Setările de animație pentru elementele individuale pot fi configurate utilizând atributele de date pentru acel element.
Stellar chiar vă permite să aveți fundal parallax, care sunt fundaluri care repoziționează pe defilați. Una dintre cele mai utile funcții ale Stellar.js este compensarea.
Toate elementele se vor întoarce la poziționarea lor inițială atunci când părintele lor offset corespunde marginii ecranului plus sau minus offsetul opțional propriu. Acest lucru vă permite să creați cu ușurință modele de parallax complicate. (Documentație stelar)
Despre:
Pagina de start: //markdalgleish.com/projects/stellar.js/
Creat de: Mark Dalgeish
Instalare: descărcare 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 în mod virtual parcurgerea multiplă este faptul că vă permite să creați un efect în care fiecare secțiune a paginii se încarcă în două părți divizate, care se strecoară în locul încărcării paginii. Consultați pagina de pornire pentru a vedea cum arată acest lucru în browserul dvs. multiScroll.js vă permite să setați viteza de derulare, relaxare, opțiunea de derulare a tastaturii și multe alte proprietăți, astfel încât să puteți personaliza efectul exact așa cum trebuie.
Despre:
Pagina de start: //alvarotrigo.com/multiScroll/
Creat de: alvarotrigo
Instalare: descărcare de la Github
7. ScrollMe
ScrollMe este un plugin pentru adăugarea de efecte paralele de parlare la pagina dvs. Poate scala, roti, traduce și schimba opacitatea elementelor din pagină, pe măsură ce defilați în jos. ScrollMe nu necesită Javascript și numai 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 folosit pentru adăugarea efectelor CSS. Este ușor și toate animațiile sunt netede, atâta timp cât le folosiți moderat.
Despre:
Pagina de start: //scrollme.nckprsn.com/
Creat de: Nick Pearson
Instalare: descărcare de la Github
8. Parolalați parcurgerea
Parallax Scroll este un plug-in jQuery ușor de folosit, care vă permite să creați efectul de parogramă de parlare a imaginii găsite pe site-uri precum Spotify. Este destul de simplu de utilizat - specificați clasele CSS necesare pentru suporturile de imagini. Mai degrabă decât utilizarea tag-uri, pentru a utiliza acest plugin, trebuie să utilizați elemente care au o imagine de fundal specificată (utilizând proprietatea CSS "background-image".) Puteți face elementele receptive folosind interogările CSS @media.
Despre:
Pagina de start: //parallax-scroll.aenism.com/
Creat de: Aen
Instalare: descărcare de la Github
9. Jarallax
Jarallax este o bibliotecă CSS și Javascript care este specializată în efecte de derulare a paralaxelor. Jarallax este configurat folosind Javascript (fără jQuery, doar pur vanilă JS). Acesta susține caracteristicile de derulare netedă, relaxarea și animația paralaxelor. Jarallax este susținut de majoritatea browserelor, de pe platforme. Site-ul Jarallax are o documentație excelentă despre cum să personalizați Jarallax pentru nevoile dvs. Jarallax are, de asemenea, tutoriale video care arată cum să configurați Jarallax pentru site-ul dvs. și cum să începeți.
Despre:
Pagina de start: //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 scroll. Acesta este alimentat de TweenMax și Greensock Tweening Engine, care crește performanța animației și netezirea. Animațiile cu animație Superscrollorama sunt chemați prin jQuery și puteți utiliza și cele mai multe funcții TweenMax.js. Din nefericire, aceste animații nu sunt pe deplin suportate de dispozitivele mobile (deoarece dispozitivele touch screen se ocupe de defilare într-un mod diferit). Cu toate acestea, folosind metoda setScrollContainerOffset, efectele Superscrollorama pot fi accesate pe dispozitivele mobile.
Iată codul pentru a face acest lucru:
.setScrollContainerOffset(x, y)
(x: decalajul x al consolei scroll, y: decalajul x al consolei scroll)
Despre:
Pagina de start: //johnpolacek.github.io/superscrollorama/
Creat de: johnpolacek
Instalare: descărcare de la Github
VEZI ALTE: 10 cele mai bune generatoare de site-uri statice
