În acest articol, vom examina primele 20 de plug-in-uri jQuery pentru crearea de animații ale elementelor site-ului în timpul derulării paginii. Astfel de soluții au fost utilizate în dezvoltarea web pentru o lungă perioadă de timp și au devenit deja rădăcini printre dezvoltatori.
Ei bine, atunci. Cu ajutorul plug-in-urilor, prezentate în această colecție, puteți crea un site modern cu o dinamică excelentă. Cred că fiecare persoană interesată de dezvoltarea site-urilor a văzut aceste plug-in-uri în acțiune. Când parcurgeți pagina, blocurile, diferite elemente sau text apar fără probleme. ieșiți, filare, etc. După cum arată practica, clienții plăc cu adevărat astfel de fentyflyushki.
Efectele de punere în aplicare atunci când derulați într-o pagină nu este la fel de dificilă cum s-ar părea la prima vedere. Tot ce aveți nevoie este un plug-in de calitate și mâini drepte. Desigur, un designer de layout-ul novice poate avea dificultăți, dar merită să stai pentru o vreme, să înțelegi principiile muncii și sarcina va părea foarte simplă.
În ciuda faptului că animația de pe site-ul pentru multe dintre suflet, nu exagerati, altfel veți fi suprasolicitat, vizual slab percepută de pagină, în care toți ochii vor fi pe toate aceste „fluiere“ și nu la informațiile pe care doriți să transmită vizitatorului . În plus, cu cât scripturile sunt mai conectate, cu atât mai lent funcționează pagina. În browserele vechi, este posibil ca întregul lucru să nu funcționeze deloc. Conectați efectele cu înțelepciune. Adesea, un aspect simplu, neted și discret al blocurilor este suficient. Acest efect conferă paginii o netezime și dinamică, face site-ul live. În practica mea, a trebuit să văd o mulțime de site-uri cu efecte fără un sens de proporție. Te face să te simți rău, singurul sentiment care apare. Dar, probabil, dezvoltatorii spera pentru "efectul Wow". Ei bine, atunci. Utilizați totul cu înțelepciune și cu moderare!
Toate pluginurile sunt absolut gratuite. dar aș recomanda familiarizarea cu licențele, pentru că în unele cazuri pentru o utilizare comercială trebuie să îndepliniți o serie de condiții.
Un plugin bun pentru implementarea elementelor de animație la derulare. Are o mulțime de opțiuni animate pentru apariția blocurilor și este destul de ușor de configurat.
- exemplu
- descărcare
ScrollMagic
Un alt plug-in popular cu care puteți implementa o animație complexă care va funcționa atunci când parcurgeți clipul mouse-ului. În acest caz, pluginul vă permite să faceți paralaxă cu adevărat complexă. css3 efecte de mișcare, schimbarea fundalului la o pagină și, în general, forme deformate. ScrollMagic este adesea folosit pe site-urile de promovare unde este necesar să animați foarte mult.
- exemplu
- descărcare
Un simplu și ușor plug-in cu care puteți implementa o animație spectaculoasă atunci când defilați. Puteți scala, roti, muta, reduce sau mări transparența oricărui element.
- exemplu
- descărcare
Superscrollorama
Superscrollorama este un plug-in puternic, dar greu pentru crearea de animații în timpul derulării. În arsenalul său, există multe setări diferite pentru animația textului, elemente individuale DIV, inclusiv efecte parallaxe.
Informații mai detaliate pot fi găsite în documentația pentru acest plugin jQuery.
- exemplu
- descărcare
Un plugin excelent pe care îl folosim adesea în proiectele noastre. De la vă permite să efectuați cu ușurință și rapid diverse efecte de apariție atunci când derulați pagina. Pluginul este ușor și nu încarcă pagina.
- exemplu
- descărcare
pluginul jQuery OnePage vă permite să împărțiți pagina în ecrane separate cu o înălțime de 100% și să animați tranziția pe ele. Este nevoie doar de o ușoară apăsare pentru a începe să derulați la următorul ecran. Același efect a fost folosit și pe site-ul promoțional Iphone 5s.
Există probleme cu adaptabilitatea. precum și practic în toate plug-in-urile similare. Dacă textul nu se potrivește în înălțime, acesta este pur și simplu tăiat și bara de derulare nu apare.
- exemplu
- descărcare
- exemplu
- descărcare
jInvertScroll
jInvertScroll vă permite să creați derularea orizontală paralaxă orizontală. La acel moment, atunci când porniți rola mouse-ul în jos, toate elementele de pe pagină, mutați orizontal la aceeași la diferite viteze, ceea ce creează un efect de paralaxă.
- exemplu
- descărcare
Waypoints este un plugin jQuery care vă permite să afișați orice element atunci când un vizitator se află într-un anumit punct al paginii. De exemplu, atunci când un vizitator terminat de citit articolul pe site-ul, și se apropie de capătul părții din textul paginii apare o casetă de mesaj cu o propunere pentru a citi următorul articol sau un articol similar.
- exemplu
- descărcare
Scrollocue
Plugin-ul original pentru sarcini specifice. Vă permite să navigați prin selectarea blocurilor făcând clic dreapta pe pagină. Cu fiecare clic nou, elementul este evidențiat mai jos, astfel pagina se derulează puțin. Deplasarea cu săgeți de pe tastatură este, de asemenea, acceptată.
- exemplu
- descărcare
Jquery plugin pentru a crea un site cu stilul de derulare pe orizontală Windows 8. Pe măsură ce dezvoltatorii spun - este o soluție cross-browser.
- exemplu
- descărcare
Bara progresivă de derulare
O soluție interesantă cu care puteți arăta progresul citirii informațiilor de pe pagină. De asemenea, există posibilitatea de a rupe textul în secțiuni și toate acestea vor fi afișate vizual în orice loc convenabil pentru dvs. pe pagină.
- exemplu
- descărcare
multiScroll.js
multiScroll.js este un plugin jQuery, asemănător cu cele două ecrane de tip slip-on. dar are o diferență semnificativă. Dacă în situațiile anterioare ecranul a fost rotit, atunci acesta arată mai mult ca un glisor de imagine modern. Ecranul este împărțit în două părți egale, iar cel din stânga este derulat în sus, iar cel din dreapta este în jos. Astfel, conținutul este aproape rupt.
Acest plugin poate fi folosit, de exemplu, pentru a crea un portofoliu de fotograf sau designer. Cred că vizitatorii vor aprecia site-ul dvs.
- exemplu
- descărcare
browserSwipe.js
Următorul plug-in de derulare pe ecran complet. cu ajutorul căruia este creată o tranziție eficientă pe ecrane. Printre efectele disponibile - tranziția culisantă, tranziția cu rotația întregului ecran, derularea scalabilă și orizontală pe ecrane. Puteți combina toate efectele pe o singură pagină.
- exemplu
- descărcare
jQuery.panelSnap
Dispozitiv de derulare cu glisare full-screen. Pluginul nu este deosebit de diferit, la prima vedere, de cele precedente, dar are o zonă de derulare internă. Dacă ne îndreptăm spre sfârșitul conținutului intern, atunci următorul ecran va trece automat la următorul ecran. Teoretic, aceasta este soluția problemei pentru site-urile adaptive. Dacă fereastra interioară este făcută la dimensiune completă, pe ecrane mici, conținutul care nu se potrivește înălțime nu va fi pierdut.
- exemplu
- descărcare
Oglindă 3D îndoită
Datorită acestui plugin puteți implementa pe site-ul dvs. un efect 3D interesant când navigați pe ecrane. Pluginul este adaptabil și funcționează pe diverse dispozitive mobile.
- exemplu
- descărcare
HorizonScroll.js
Un alt plugin pentru derularea derularii întregi a ecranului. De data asta este o defilare orizontală. Susține tranzițiile pe ecrane folosind săgețile de pe tastatură.
- exemplu
- descărcare
jQuery.scrollSpeed - Defilare ușoară a paginii
Efectul modern, care este folosit pe o varietate de site-uri moderne - derularea paginii netede. În unele browsere, această funcționalitate este implementată intern, iar altele, cum ar fi Chrome, derulează site-ul cu jerks. Acest plugin vă permite să atenuați defilarea.
Există multe setări, cum ar fi - viteza de derulare, inerția și așa mai departe.
- exemplu
- descărcare
ScrollFlow
pluginul jQuery vă permite să animați aspectul diferitelor blocuri de pe pagină. inclusiv imagini de fundal care creează un efect de parallax.
- exemplu
- descărcare
jQuery Air Sticky Block - bloc lipicios în bara laterală
pluginul jQuery al dezvoltării noastre. Când derulați pagina, puteți bloca blocul în bara laterală. Potrivit pentru site-uri adaptive. Când conținutul este reconstruit, atunci când coloana "sare" pentru conținutul principal, efectul lipicios este dezactivat.
- exemplu
- descărcare
zezya