Defilare lină html. Tranziție lină la legătura de ancorare. Cum să faci un link de ancorare HTML
Salutări, dragi prieteni. După cum probabil ați observat, în aproape toate browserele, derularea pe site-uri web este foarte clară și nu frumoasă. Și, desigur, aș dori să fac derularea site-ului meu mai lină; bineînțeles, acest lucru se poate face și, în plus, fără a solicita prea mult. Acest lucru se face folosind un simplu Plugin JQueryși mai multe reguli CSS. Și pentru a vedea cum funcționează totul, vă sugerez să aruncați o privire la demonstrația de mai jos.
ΙEi bine, acum să trecem la atașarea unei derulări fluide la site-ul nostru.
HTMLMai î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 lină, și împreună cu acesta există separate Reguli CSS care schimbă însăși bara de defilare de pe site. Vom vorbi mai multe despre bara de defilare în lecția următoare, dar deocamdată doar defilare lină. Și iată regulile și pluginul:
Toate. Acum am făcut deja primul și important pas. Acum trebuie să adăugăm o regulă simplă la Stiluri CSS site-ul nostru.
CSS html, corp (înălțime: 100%; )Acest lucru este necesar pentru a informa pluginul nostru că lățimea paginii este întinsă și este 100% din î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ă aruncăm o privire mai atentă la exemplul demonstrativ. Și vom începe cu HTML.
HTML în demonstrație Defilare lină pentru site Conținut Bună ziua, Acesta este un text pentru a demonstra derularea lină a paginilor de pe site-ul dvs. Chiar nu arată rău, nu-i așa :) Acest text se va repeta. (funcție($)( $(fereastră).load(funcție())( $("corp").mCustomScrollbar(( tema:"întunecat-subțire" )); )); ))(jQuery);După cum puteți vedea, aici am folosit markup HTML5 complet standard, cu toate scripturile inserate și fișiere CSS despre care am vorbit mai sus. Cred că nu este nimic de explicat aici; dacă nu înțelegeți nimic, asigurați-vă că întrebați în comentarii.
Ei bine, acum să aruncăm o privire la regulile CSS.
CSS din demo @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 de fundal: #fff; culoare: #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; lățime: 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, de asemenea, puteți vedea că fonturile Google sunt atașate aici pentru a face demonstrația să arate frumos vizual.
Bună prieteni. Aș dori să ating un subiect, cum ar fi o tranziție lină la un link de ancorare pe o pagină de site. Dacă scrii pe site-ul tău texte voluminoase, formatați-l corect, cu capturi de ecran și alte elemente, apoi defilare lină la ancora va oferi designului și mai multă atractivitate. 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 un link de ancorareCum se face un link de ancorare HTMLLegăturile de ancorare sunt realizate în limbaj marcare hipertext. Crearea unei ancori în HTML nu este deloc complicată. Tot ce aveți nevoie este puțină cunoaștere a acestui limbaj și înțelegerea modului în care funcționează. Dacă nu aveți probleme cu aceasta, atunci o puteți face fără prea multe dificultăți. Deci, pentru a ancora Pagina 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:
| Salt la o etichetă pe o pagină |
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 ancorareOdată cu dezvoltarea tehnologiilor web, a devenit posibil să se creeze site-uri web mai frumoase, mai dinamice, cu diverse efecte etc. Și este cu adevărat grozav atunci când poți interesa un vizitator în altceva decât conținutul și poți lăsa o impresie bună de a vizita site-ul. ÎN până la un punct acest lucru joacă în mâinile proprietarului site-ului. Pentru o tranziție lină la ancora, vom folosi biblioteca și o vom conecta complet scenariu 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 ; ) ) ; ) ) ; |
$(document).ready(function() ( $("a").click(function () ( 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); ) returnează fals; )); ));
Există trei moduri de a conecta acest script. Primul este să inserați pe pagina dintre etichete de cap. Al doilea este să-l duci la dosar separatși conectați separat astfel:
Etichetați pe pagină pentru a merge la ea
În al doilea rând, dacă doriți ca defilarea lină să aibă loc nu pentru toate ancorele, ci numai pentru anumite ancore, trebuie să schimbați a treia linie a scriptului astfel:
Salt la o etichetă pe o pagină
O altă nuanță pe care aș dori să o menționez este că, spre deosebire de o simplă ancoră HTML, ancora jQuery nu se înregistrează în bara de adresa linkul browserului către ancoră 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 către o ancoră în bara de adrese a unui browser.
| #ancoră |
Deci, să aflăm mai întâi ce link-uri de ancorare sau doar ancore sunt. Legăturile de ancorare sunt link-uri care duc vizitatorul către anumite locuri de pe pagină. În esență, acestea sunt ca semne de carte. Dacă pagina este mare și în esență împărțită în diferite blocuri, vă puteți asigura că vizitatorul poate merge imediat la partea dorită a paginii fără a utiliza un scroll.
Aceste link-uri de ancorare sunt adesea folosite pe paginile F.A.Q. . Pe astfel de pagini, există multe puncte diferite cu răspunsuri la FAQ. Pentru a evita derularea manuală a textului, aceste întrebări sunt situate la început cu link-uri către paragraful dorit. Aceste link-uri de ancorare sunt adesea folosite și î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 de un ajutor rău.
Un exemplu despre cum funcționează astfel de legături poate fi văzut pe această pagină:
În cazul nostru, este simplu bloc div. Practic, asta este pentru o tranziție simplă. 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.
A implementa mișcare lină pentru ancore, trebuie să conectați jQuery. Cândva, 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 ale bibliotecilor. Poate că ați găsit și aceste scripturi înainte de a veni pe site-ul meu. Apoi am dat peste acest script, care a fost o soluție excelentă pentru sarcinile mele.
Pentru început, trebuie să includeți biblioteca jQuery în antetul înainte de capul de închidere sau în subsolul înainte de corpul de închidere.
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 realiza animația de tranziție lină.
$(document).ready(function())( $("#meniu").on("click","a", function (eveniment) ( event.preventDefault(); var id = $(this).attr ( "href"), top = $(id).offset().top; $("corp,html").animate((scrollTop: sus), 1500); )); ));
A doua linie a scriptului specifică ID-ul blocului cu legături de ancorare. Ca exemplu, puteți organiza următorul bloc:
- Link către ancora 1
- Link către ancora 2
- Link către ancora 3
- Link către ancora 4
A șasea linie conține numărul 1500 - timp în milisecunde și egal cu 1,5 secunde. Acesta este timpul în care se face trecerea la ancora dorită. Pentru a accelera sau încetini animația, pur și simplu schimbați numărul.
Asta e tot, mulțumesc pentru atenție. 🙂
Bună ziua. Astăzi vreau să vă povestesc despre asta efect interesant ca un pergament neted către o ancoră. De exemplu, acesta ar putea fi un meniu din partea de sus a paginii care, atunci când este făcut clic, va derula ușor la elementul corespunzător.
Probabil ați observat un efect similar pe alte pagini de destinație. Astăzi veți învăța cum să o implementați.
Defilare lină la ancorare folosind javascriptÎntr-unul dintre proiecte, sarcina a fost să implementeze un efect similar cu derulare lină la element specific când faceți clic pe unul dintre elementele de meniu.
Să începem prin a ne conecta biblioteca jquery la proiectul nostru și scrieți calea către scriptul care este responsabil pentru derularea lină:
Ne-am ocupat de asta. Acum trebuie să puneți etichete și ancore la care va avea loc derularea.
Vă voi spune exemplul meniului care era în proiectul de închiriere de echipamente profesionale pentru lucrări de construcții și curățenie. Iată-l sursă:
După cum puteți vedea, totul este standard și fără trucuri. Blocurile corespunzătoare meniului au fost create ulterior pe pagina de destinație. Au dezvăluit un serviciu specific. A fost necesar să se facă o tranziție lină la aceste blocuri.
Pentru a naviga la locul dorit de pe site, trebuie doar să adăugați un link către identificator blocul dorit. Hai să facem asta.
Acum trebuie să setați identificatorii „curățare”, „clădire”, „acțiuni” la blocurile corespunzătoare. Pentru mine a aratat asa:
Acordați atenție atributului name="cleaning". Trebuie să se potrivească cu ID-ul. Iată scenariul în sine:
$(funcție () ( $("a.scrollto").click(funcție () ( let elementClick = $(this).attr("href") let destination = $(elementClick).offset().top; $ ("html:not(:animated),body:not(:animated)").animate(( scrollTop: destination ), 1100); return false; )); ));
Dacă, ca și mine, trebuie să implementați derularea la mai multe elemente, atunci puneți identificatori într-un mod similar și gata! Foarte mod convenabilși ușor de implementat. Nu spun că este cel mai bun, dar funcționează. Dacă cineva îl poate simplifica, scurta sau îmbunătăți cumva, v-aș fi foarte recunoscător. Cât despre mine, deci acest efect poate fi de folos multora.
Vă rugăm să rețineți că la începutul articolului am indicat numele și calea scriptului după cum urmează:
Adică, trebuie să creați un folder în rădăcina site-ului dvs. numit js și să plasați un fișier numit perehod.js în el. Și apoi introduceți codul de script în sine. Ăsta sunt eu, pentru orice eventualitate. Dacă cineva nu înțelege?
Și asta e tot pentru azi. Acum știi cum să implementezi asta efect rece, ca o pagină netedă, derulați la o ancoră. Pa tuturor; la revedere tuturor!
P.s.: Mulțumesc celor care au răspuns la apel în rețelele sociale ajutor cu idei pentru articole noi. Nu stiu de ce te-ai hotarat sa ii scrii mesaje private, este mai bine să o lăsați în comentarii, așa că va fi mai ușor pentru alții să scrie o recenzie dacă văd că cineva mai curajos a făcut-o deja.
U aceasta metoda există un dezavantaj, nu funcționează bine cu wow.js, pe care l-am folosit pentru a crea animația din articol. Unele animații nu sunt redate și rămân la locul lor. loc gol. Dacă cineva știe cum să remedieze acest lucru, vă rugăm să scrieți în comentarii sau în
