Defilare lină a paginii pe jquery. Cum să faci derulare lină pentru a ancora

Și așa, să aflăm pentru început ce sunt link-urile de ancorare sau doar ancorele. Legăturile de ancorare sunt link-uri care duc vizitatorul către anumite locuri de pe pagină. Practic, este ca un marcaj. Dacă pagina are un volum mare și este în esență împărțită în diferite blocuri, o puteți face astfel încât vizitatorul să poată merge imediat la partea dorită a paginii fără a utiliza scroll.

Aceste link-uri de ancorare sunt adesea folosite pe pagini FAQ.. Pe astfel de pagini, există multe articole diferite cu răspunsuri la întrebările frecvente. Pentru a nu derula manual textul, aceste întrebări sunt plasate la început cu link-uri către paragraful dorit. La fel de des, astfel de linkuri de ancorare sunt folosite în paginile de destinație (pagini de destinație). De asemenea, folosesc adesea astfel de ancore în paginile de destinație dacă clientul o cere. Paginile de destinație sunt adesea lungi și, prin urmare, astfel de ancore nu sunt un ajutor rău.

Un exemplu despre cum funcționează aceste link-uri poate fi văzut pe această pagină:

În cazul nostru, acesta este un simplu bloc div. Practic, pentru o tranziție simplă, asta este. Când faceți clic pe un astfel de link, vizitatorul va fi transferat instantaneu în partea din pagină în care se află blocul cu ancora.

Pentru a implementa o mișcare lină de-a lungul ancorelor, trebuie să conectați - jQuery. Odată am căutat mult timp scenariul potrivit și am scotocit printr-o grămadă de informații. Mai mult de jumătate arată scripturi care pur și simplu nu mai funcționează pe noile versiuni de biblioteci. Poate că ați găsit și aceste scripturi înainte de a ajunge pe site-ul meu. Apoi am dat peste acest script, care a fost o soluție excelentă pentru sarcinile mele.

Pentru început, într-o pălărie înainte de închidere cap sau la subsol înainte de închidere corp Trebuie să includeți biblioteca jQuery.

Asigurați-vă că acest lucru nu a fost deja făcut înainte, pentru a nu provoca un conflict și inoperabilitatea scripturilor.

Acum, după bibliotecă, conectăm scriptul în sine, care va anima tranziția lină.

A doua linie a scriptului specifică ID-ul blocului cu legături de ancorare. De exemplu, puteți organiza un bloc astfel:

A șasea linie conține numărul 1500 - timpul în milisecunde și este egal cu 1,5 secunde. Acesta este timpul pentru care se face trecerea la ancora dorită. Pentru a accelera sau încetini animația, trebuie doar să schimbați numărul.

Asta e tot, mulțumesc pentru atenție. 🙂

Bună prieteni. Vreau să ating un subiect ca tranziție lină la legătura de ancorare pe pagina site-ului. Dacă scrieți texte voluminoase pe site-ul dvs., îl formatați corect, capturile de ecran și alte elemente, atunci derularea lină la ancoră va face designul și mai atractiv. Dar să aflăm mai întâi ce este și cum va funcționa. Puteți vedea un exemplu de lucru pe această pagină făcând clic pe elementele din această listă.

Ce este o legătură de ancorare

Cum să faci un link de ancorare HTML

Legăturile de ancorare sunt realizate în limbaj de marcare hipertext. Crearea unei ancori în HTML nu este deloc dificilă. Este nevoie doar de puține cunoștințe în această limbă și de o înțelegere a modului în care funcționează. dacă nu aveți probleme cu asta, atunci o puteți face fără prea multe dificultăți. Deci, pentru a face o ancoră pe o pagină HTML, trebuie să scrieți ceva de genul următor în cod.

Și pentru a ajunge în acest loc pe pagina în care este indicată această etichetă, trebuie să scrieți acest lucru în link:

<href = "#ancoră" > Salt la o etichetă pe o pagină</a>

Salt la o etichetă pe o pagină

Cu această abordare, tranziția se va realiza printr-un salt instantaneu dintr-un loc în altul.

Defilare lină la ancorare

Odată cu dezvoltarea tehnologiilor web, a devenit posibil să se creeze site-uri mai frumoase, mai dinamice, cu diverse efecte și. Și este chiar grozav atunci când poți interesa vizitatorul în altceva decât conținut și lași o impresie bună de a vizita site-ul. Într-o anumită măsură, acest lucru joacă în mâinile proprietarului site-ului. Pentru o tranziție lină la ancora, vom folosi biblioteca și vom conecta un script foarte mic.

1 2 3 4 5 6 7 8 9 10 11 12 13 14

< script type= "text/javascript" >$(document).ready (funcție () ( $("a" ) .click (funcție () ( elementClick = $(this ) .attr ("href" ) ; destinație = $(elementClick) .offset () .top ; if ($.browser .safari ) ( $("body" ) .animate ( ( scrollTop: destinație ) , 1100 ) ; ) else ( $("html" ) .animate ( ( scrollTop: destinație ) , 1100 ) ; ) return false ; ) ) ; ) ) ;

Există trei moduri de a conecta acest script. Primul este să inserați pe pagină între etichetele head. Al doilea este să îl puneți într-un fișier separat și să îl conectați separat astfel:

Etichetați pe pagină pentru a merge la ea

În al doilea rând, dacă doriți o defilare lină nu la toate ancorele, ci numai la anumite, trebuie să schimbați a treia linie a scriptului astfel:

Salt la o etichetă pe o pagină

O altă nuanță pe care am vrut să o menționez este că, spre deosebire de o simplă ancoră HTML, ancora jQuery nu scrie un link către ancora în bara de adrese a browserului atunci când navighezi la ea. Pentru a înțelege despre ce vorbesc, voi da un exemplu despre cum ar putea arăta un link de ancorare din bara de adrese a unui browser.

#ancoră

Salutare dragi prieteni!

Astăzi vrem să vă spunem despre derularea lină a paginii de destinație la elementul dorit.

Derularea lină (sau derularea lină) permite vizitatorului de aterizare să navigheze prin secțiuni fără a pierde contactul vizual cu conținutul ofertei.

Puteți vedea un exemplu din . Pe această pagină, derularea lină este declanșată atunci când faceți clic pe butonul „Livrare comandă”.

De asemenea, aș dori să vă atrag atenția asupra faptului că utilizarea derulării fluide este, de asemenea, relevantă în combinație cu un meniu static. Anterior, am publicat un ghid pentru crearea unui , care, de asemenea, simplifică foarte mult navigarea pe paginile de destinație cu o cantitate mare de informații și vă permite să creșteți conversiile.

Așadar, vă sugerăm să folosiți un ghid ilustrat detaliat despre crearea unei derulări fluide pentru un singur element:

1) Deschideți pagina de destinație în editorul vizual LPgenerator

2) Copiați codul:

3) Folosind instrumentul „Scripturi”, lipiți codul copiat pe pagină

Setați poziția codului: „Înainte de etichetă” :

4) Scrieți în cod identificatorul butonului, la apăsare se va produce derularea. Identificatorul este scris între ghilimele simple.

5) Puteți vizualiza ID-ul elementului în proprietățile sale extinse din dreapta:

6) Atenţie: dacă elementul, când se dă clic, începe să defileze, nu este un buton, atunci eliminați litera „a” din cod:

Vă rugăm să rețineți: după derulare, elementul va avea zero padding din marginea de sus a ferestrei, adică va fi chiar în partea de sus a paginii.

Prin urmare, dacă doriți să mutați vizitatorul în formularul de prospect, vă recomandăm să specificați în cod identificatorul titlului sau elementului acestuia care se află deasupra primului câmp de formular, de exemplu, o săgeată:

Atenție: derularea lină nu funcționează pentru secțiuni. Prin urmare, nu specificați ID-ul secțiunii în cod.

8) În mod implicit, timpul de defilare la elementul specificat este de 1000ms = 1 sec. Puteți face derularea mai lentă (de ex. 5000ms = 5 sec).

Scrieți momentul potrivit în cod:

9) Verificați poziția scenariului, nu uitați să dați un nume pentru scenariu. După aceea, salvați modificările și salvați pagina de destinație în editorul vizual.

Salutări dragi prieteni. După cum probabil ați observat, în aproape toate browserele, defilarea pe site-uri este foarte clară și nu frumoasă. Și, bineînțeles, aș dori să fac derularea pentru site-ul meu mai lină, bineînțeles, acest lucru se poate face și, în plus, să nu forțez prea mult. Acest lucru se face cu un simplu plugin jQuery și câteva reguli CSS. Și pentru a vedea cum funcționează totul, vă sugerez să aruncați o privire la demonstrația de mai jos.

Ι

Acum să trecem la atașarea unei derulări fluide la site-ul nostru.

HTML

Mai întâi, va trebui să atașăm biblioteca jQuery. Dacă îl aveți deja atașat, săriți peste acest pas:

Apoi trebuie să atașăm pluginul jQuery în sine, care este responsabil pentru derularea noastră lină și, împreună cu acesta, există reguli CSS separate care schimbă bara de defilare în sine pe site. Vom vorbi mai multe despre bara de defilare în lecția următoare, dar deocamdată doar defilare lină. Și iată regulile în sine și pluginul:

Tot. Am făcut acum primul și cel mai important pas. Acum trebuie să adăugăm o regulă simplă la stilurile CSS ale site-ului nostru.

css

html, corp( înălțime: 100%; )

Acest lucru este pentru a clarifica pluginului nostru că lățimea paginii este întinsă și este 100% înălțime. Asigurați-vă că adăugați această regulă la CSS, altfel derularea nu va funcționa.

Scenariul

Și acum îmi propun să analizăm mai detaliat exemplul demo. Și vom începe cu HTML.

HTML în demonstrație

Conţinut

---

---

După cum puteți vedea, am folosit aici un marcaj HTML5 complet standard, cu toate scripturile și fișierele CSS pe care le-am discutat mai sus incluse. Cred că nu este nimic de explicat aici, dacă nu înțelegeți ceva, asigurați-vă că întrebați în comentarii.

Acum să aruncăm o privire la regulile CSS.

CSS de la demonstrație

@import url(http://fonts.googleapis.com/css?family=Bad+Script&subset=latin,cyrillic); @import url(http://fonts.googleapis.com/css?family=Lobster&subset=latin,cyrillic); body( culoarea fundalului: #fff; culoarea: #555; dimensiunea fontului: 14px; familia de fonturi: „Script prost”, cursiv; margine: 0; umplutură: 0; lățime minimă: 480px; ) html, body( înălțime: 100%; ) h2( dimensiunea fontului: 80px; alinierea textului: centru; familia de fonturi: „Lobster”, cursivă; greutatea fontului: 700; stilul fontului: cursiv; culoare: #444; ) hr( înălțime: 0; chenar: niciunul; chenar-jos: 1px solid #eee; chenar-sus: 1px solid #eee; margin-bottom: 50px; clar: ambele; ) .cont( dimensiunea fontului: 30px; marginea: 0 auto ;padding-top: 20px;width: 50%;max-width: 50%; ) .text( padding-top: 15px; padding-bottom: 20px )

Regulile CSS sunt, de asemenea, foarte simple și nu sunt multe dintre ele și puteți vedea că fonturile Google sunt atașate aici pentru ca demonstrația să arate vizual frumos.

Recent, animațiile care se joacă pe măsură ce derulați pagina câștigă din ce în ce mai multă popularitate. Cu toate acestea, am observat că marea majoritate a browserelor nu sunt proiectate pentru acest tip de animații. Derularea paginilor cu mouse-ul în ele nu se face fără probleme (ca în Firefox), ci în pași. Ca rezultat, animațiile de defilare de pe pagini sunt, de asemenea, redate în smucitură. După părerea mea, problema aici nu este deloc în browsere, ci în plugin-urile care sunt folosite pentru a crea aceste animații. Pentru că ei sunt cei care fac săriturile. Cred că pentru orice animație ar trebui să existe o viteză maximă de redare la care animația să fie lină, iar utilizatorul să poată înțelege ce s-a întâmplat pe pagină. Dacă ești de acord cu mine, atunci mișcă-te lin și fără smucituri sub pisică.

În acest articol, vom vorbi despre un plugin pentru crearea de animații controlate de scroll, pe care l-am numit Scrollissimo. Cel mai apropiat analog al său este pluginul ScrollMagic. Dintre caracteristicile comune pe care le au - scopul lor și faptul că Greensock a fost ales ca motor de animație. Dacă din anumite motive încă nu îl cunoașteți, atunci, poate, pentru a înțelege pe deplin tot ce se întâmplă, ar trebui să citiți articolele despre Greensock care au fost deja publicate pe Habré. De exemplu .

Pe lângă caracteristicile comune, aceste plugin-uri au și diferențe. Dar aș dori în special să subliniez principalul lucru - animația lină. Ca să nu sune nefondat, iată dovada pentru tine. Pagina principală a ScrollMagic îmi confirmă și cuvintele.

Cum să-l folosească?

Ne conectăm

Pentru a începe să utilizați Scrollissimo, trebuie să faceți două lucruri. Mai întâi, conectați Greensock. Puteți include doar bibliotecile minime necesare (TweenLite, TimelineLite și CSS):

sau, includeți o bibliotecă care conține toate cele de mai sus:

Și în al doilea rând, conectăm Scrollissimo în sine. Biblioteca este disponibilă din depozit. Iar pentru utilizatorii bower, există și opțiunea de instalare cu comanda

Bower instalează scrollissimo
Descărcat, acum conectează-te:

Opțional, puteți (dar nu neapărat) include jQuery pentru confortul dvs. Mai târziu în articol, voi scrie cod folosindu-l pentru o mai mare lizibilitate.

Am oferit posibilitatea de a declanșa Scrollissimo nu numai la derularea întregii pagini, ci și la orice alt eveniment, cu toate acestea, în marea majoritate a situațiilor, trebuie să vă abonați la evenimentul de defilare a paginii:

$(fereastra).scroll(function()( Scrollissimo.knock(); ));
Acum, de fiecare dată când are loc evenimentul de defilare, Scrollissimo va calcula progresul curent al animației și îl va reda.

NOTĂ: Dacă nu doriți ca pluginul să numere derularea paginii în sine, atunci puteți transmite propria dvs. valoare a proprietății scrollTop metodei knock(). De exemplu, Scrollissimo.knock(1000) va spune pluginului că dvs. au defilat pagina cu 1000 de pixeli.

NOTĂ: Pentru a accepta dispozitivele tactile, există un adaptor tactil scrollissimo.touch.js care luptă împotriva înghețarii paginii în timpul derulării.

Totul, acum poți anima direct! Scrollissimo poate anima interpolari (animații unice) și cronologie (o coadă de animații individuale). Să începem cu gemenii.

Cea mai simplă animație

Să presupunem că avem un frumos div roșu pe nume Divy. Își dorește foarte mult să crească, dar până acum are doar 50 de pixeli lățime și înălțime.

#Divy(poziție: fix; sus: 0; stânga: 0; înălțime: 50px; lățime: 50px; fundal: roșu; )
Să facem astfel încât după 1000 de pixeli de la începutul paginii să devină 300 de pixeli lățime. Pentru a face acest lucru, creăm mai întâi interpolarea corespunzătoare, ca și cum am face o animație normală cu Greensock:

VardivyTween = new TweenLite($("#Divy"), 1000, ( lățime: 300 ));
NOTĂ: După cum ați observat, singura diferență față de animația standard de pe Greensock este că specificăm durata animației nu în secunde, ci în pixeli (în cazul nostru, 1000).

Amenda! Rămâne doar să-i dai acestui geamăn să fie mâncat de Scrollissimo:

Scrollissimo.add(divyTween, 0, 6);
Acum să încetinim și să analizăm această linie. Primul argument este același geamăn pe care l-am creat. Al doilea argument este de unde să începeți animația. În cazul nostru, acesta este începutul paginii (0 pixeli). Există un al treilea argument. Aici ajungem la caracteristica principală care distinge Scrollissimo de pluginurile obișnuite. Al treilea argument este viteza maximă de redare a animației. Această viteză este măsurată în unități abstracte adimensionale și selectată „cu ochi”. Voi răspunde imediat la întrebarea „Ce se va întâmpla dacă nu specificați al treilea parametru?” Dacă nu specificați viteza maximă, atunci nu va fi. Această animație se va reda la fel ca și pluginurile normale.

Cronologie

Deci, Divy a crescut în lățime. Și cum îl putem ajuta să crească în înălțime? Aici ne vor ajuta lanțurile de animație sau, în termenii Greensock, cronologia. Dacă le-ați folosit înainte pentru a crea animații, atunci nu este nimic nou pentru dvs. La fel cum am procedat cu geamănul de mai sus, procedăm cu cronologia. jsFiddle

VardivyTimeline = new TimelineLite(); divyTimeline.to($("#Divy"),1000 ( latime: 300 )); divyTimeline.to($("#Divy"), 1000, ( înălțime: 300 )); Scrollissimo.add(divyTimeline, 0, 6);

Concluzie

Asta este tot ce este nevoie pentru a crea cu succes animații de defilare cu Scrollissimo. Pe aceasta, probabil, voi încheia articolul. În concluzie, voi spune că pluginul este în dezvoltare activă, are loc de creștere și îmbunătățire. Prin urmare, voi fi bucuros să răspund la orice întrebări, sfaturi și solicitări de caracteristici.

Machiază, animă!