Dakle, prvo saznajmo što su anchor veze ili samo sidra. Anchor linkovi su linkovi koji vode posjetitelja na određena mjesta na stranici. U svojoj srži, ovo su poput knjižnih oznaka. Ako je stranica velika i u biti podijeljena na različite blokove, možete osigurati da posjetitelj može odmah prijeći na željeni dio stranice bez korištenja listanja.
Ove sidrene veze često se koriste na F.A.Q stranicama. . Na takvim stranicama postoji mnogo različitih stavki s odgovorima na često postavljana pitanja. Kako bi se izbjeglo ručno listanje kroz tekst, ova pitanja se nalaze na početku s poveznicama na željeni odlomak. Ove sidrene veze također se često koriste na odredišnim stranicama. Također često koristim takva sidra na odredišnim stranicama ako to kupac zahtijeva. Odredišne stranice su često dugačke i stoga takva sidra nisu loša pomoć.
Primjer rada takvih veza možete vidjeti na ovoj stranici:
U našem slučaju, ovo je jednostavan div blok. Uglavnom, to je sve za jednostavan prijelaz. Kada kliknete na takvu poveznicu, posjetitelj će odmah biti prebačen na dio stranice gdje se nalazi blok sa sidrom.
Da biste implementirali glatko kretanje duž sidara, morate povezati jQuery. Jednom davno sam dugo tražio pravi scenarij i preturao po hrpi informacija. Više od polovice pokazuje skripte koje jednostavno više ne rade na novim verzijama biblioteka. Možda ste i vi pronašli ove skripte prije dolaska na moju stranicu. Onda sam naišao na ovu skriptu, koja je bila izvrsno rješenje za moje zadatke.
Za početak, morate uključiti jQuery biblioteku u zaglavlje prije završnog zaglavlja ili u podnožje prije završnog tijela.
Pazite da to već nije učinjeno prije kako ne bi došlo do sukoba i neoperabilnosti skripti.
Sada, nakon knjižnice, povezujemo samu skriptu koja će izvesti animaciju glatkog prijelaza.
$(document).ready(function())( $("#menu").on("click","a", function (event) ( event.preventDefault(); var id = $(this).attr ( "href"), top = $(id).offset().top; $("body,html").animate((scrollTop: top), 1500 ));
Drugi redak skripte navodi ID bloka s vezama sidra. Kao primjer, možete organizirati sljedeći blok:
- Link na sidro 1
- Link na sidro 2
- Link na sidro 3
- Link na sidro 4
U šestom redu nalazi se broj 1500 - vrijeme u milisekundama i jednako 1,5 sekundi. To je vrijeme u kojem se vrši prijelaz na željeno sidro. Da biste ubrzali ili usporili animaciju, jednostavno promijenite broj.
To je sve, hvala na pažnji. 🙂
Pozdrav prijatelji. Želio bih se dotaknuti teme poput glatkog prijelaza na vezu sidra na web stranici. Ako pišete opsežne tekstove na svojoj web stranici, ispravno je formatirate, koristite snimke zaslona i druge elemente, glatko pomicanje do sidra učinit će dizajn još privlačnijim. Ali prvo saznajmo što je to i kako će funkcionirati. Možete vidjeti primjer rada na ovoj stranici klikom na stavke u ovom popisu.
Što je anchor veza Kako napraviti HTML anchor vezuAnchor veze su izrađene u jeziku za označavanje hiperteksta. Stvaranje sidra u HTML-u nije nimalo teško. Sve što trebate je malo znanja ovog jezika i razumijevanja kako funkcionira. Ako nemate problema s tim, onda to možete učiniti bez većih poteškoća. Dakle, da biste stvorili sidro na HTML stranici, trebate napisati nešto poput sljedećeg u kodu.
A da biste otišli na ovo mjesto na stranici gdje je navedena ova oznaka, morate napisati ovo na linku:
| Skoči na oznaku na stranici |
Skoči na oznaku na stranici
S ovim pristupom, prijelaz će se izvršiti trenutnim skokom s jednog mjesta na drugo
Glatko pomicanje do sidraRazvojem web tehnologija postalo je moguće izrađivati ljepše, dinamičnije web stranice s raznim efektima i sl. I stvarno je super kada posjetitelja možete zainteresirati nečim drugim osim sadržajem i ostaviti dobar dojam posjeta stranici. U određenoj mjeri to ide na ruku vlasniku stranice. Za glatki prijelaz na sidro koristit ćemo biblioteku i spojiti vrlo malu skriptu.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 | < script type= "text/javascript" >$(dokument) .ready (funkcija () ( $("a" ) .klik (funkcija () ( elementClick = $(ovo) .attr ( "href") ; odredište = $(elementClick) .offset () .top ; if ($.browser .safari ) ( $("body" ) .animate ( ( scrollTop: destination ) , 1100 ) ; ) else ( $( "html" ) .animate ( ( scrollTop: destination ) , 1100 ) ;) return false ); |
$(document).ready(function() ( $("a").click(function () ( elementClick = $(this).attr("href"); odredište = $(elementClick).offset().top ; if($.browser.safari)( $("body").animate(( scrollTop: odredište), 1100); )else( $("html").animate(( scrollTop: odredište), 1100); ) return false; ));
Postoje tri načina za povezivanje ove skripte. Prvi je da ga umetnete na stranicu između oznaka glave. Drugi je staviti ga u zasebnu datoteku i zasebno ga povezati ovako:
Označite na stranici da biste je otvorili
Drugo, ako želite glatko pomicanje ne za sva sidra, već samo za određena, trebate promijeniti treći redak skripte ovako:
Skoči na oznaku na stranici
Još jedna nijansa koju sam želio spomenuti je da, za razliku od jednostavnog HTML sidra, jQuery sidro ne piše vezu na sidro u adresnoj traci preglednika prilikom navigacije do njega. Kako biste razumjeli o čemu govorim, dat ću primjer kako bi poveznica na sidro mogla izgledati u adresnoj traci preglednika.
| #sidro |
Pozdrav, dragi prijatelji!
Danas vam želimo reći o glatkom pomicanju odredišne stranice do željenog elementa.
Glatko pomicanje (ili glatko pomicanje) omogućuje posjetitelju odredišne stranice kretanje između odjeljaka bez gubitka vizualnog kontakta sa sadržajem ponude.
Možete vidjeti primjer iz. Na ovoj se stranici glatko pomicanje pokreće kada kliknete na gumb "Naruči dostavu".
Također bih želio skrenuti vašu pozornost na činjenicu da je korištenje glatkog pomicanja također relevantno u kombinaciji sa statičnim izbornikom. Prethodno smo objavili vodič za izradu jednog, koji također uvelike pojednostavljuje navigaciju na odredišnim stranicama s velikom količinom informacija i omogućuje vam povećanje konverzije.
Stoga predlažemo korištenje detaljnog ilustriranog vodiča za stvaranje glatkog pomicanja za jedan element:
1) Otvorite odredišnu stranicu u vizualnom uređivaču LPgeneratora
2) Kopirajte kod:
jq_144("#block-newID a").click(function(e)( // #block-newID zamijeniti ID-om elementa na koji kliknemo e.preventDefault(); jq_144("body, html"). animate(( scrollTop: jq_144("#block-newID").offset().top), 1000 // zamijeni #block-newID s ID-om elementa koji se pomiče ));
3) Pomoću alata "Skripte" zalijepite kopirani kod na stranicu
Postavite poziciju koda: “Ispred oznake”:
4) Upišite u kod identifikator gumba, kada se klikne, on će se pomicati. Identifikator je napisan unutar jednostrukih navodnika.
5) Identifikator elementa možete vidjeti u njegovim proširenim svojstvima s desne strane:
6) Pažnja: ako element koji pokreće pomicanje kada se klikne nije gumb, uklonite slovo 'a' u kodu:
Imajte na umu: nakon pomicanja, element će imati nultu udaljenost od gornje granice prozora, to jest, bit će na samom vrhu stranice.
Stoga, ako želite premjestiti posjetitelja na obrazac za potencijalne klijente, preporučujemo da u kodu navedete identifikator njegovog zaglavlja ili elementa koji se nalazi iznad prvog polja obrasca, na primjer strelicu:
Pažnja: glatko pomicanje ne radi za odjeljke. Stoga nemojte navoditi identifikatore odjeljaka u kodu.
8) Prema zadanim postavkama, vrijeme pomicanja do navedenog elementa je 1000 ms = 1 sekunda. Možete usporiti pomicanje (npr. 5000 ms = 5 sekundi).
Unesite potrebno vrijeme u šifru:
9) Provjerite položaj skripte, ne zaboravite dati skripti naziv. Nakon toga spremite promjene i spremite odredišnu stranicu u vizualni uređivač.
Pozdrav dragi prijatelji. Kao što ste možda primijetili, u gotovo svim preglednicima listanje na web stranicama je vrlo oštro i nije lijepo. I naravno, želio bih učiniti pomicanje svoje stranice glatkijim; naravno, to se može učiniti i, štoviše, bez previše naprezanja. To se radi pomoću jednostavnog jQuery dodatka i nekoliko CSS pravila. A da biste vidjeli kako sve to radi, predlažem da pogledate demo u nastavku.
ΙPa, sada prijeđimo na pričvršćivanje glatkog pomicanja na našu stranicu.
HTMLPrvo ćemo morati priložiti biblioteku JQuery. Ako ga već imate priloženog, preskočite ovaj korak:
Zatim trebamo priložiti sam JQuery dodatak koji je odgovoran za naše glatko skrolanje, a uz njega postoje i zasebna CSS pravila koja mijenjaju samu traku za klizanje na stranici. Više ćemo govoriti o traci za pomicanje u sljedećoj lekciji, ali za sada samo glatko pomicanje. A ovdje su pravila i dodatak:
Svi. Sada smo već napravili prvi i važan korak. Sada moramo dodati jedno jednostavno pravilo CSS stilovima naše web stranice.
CSS html, tijelo (visina: 100%; )Ovo je neophodno kako bi naš dodatak znao da je širina stranice rastegnuta i iznosi 100% visine. Svakako dodajte ovo pravilo svom CSS-u, inače pomicanje neće raditi.
Skripta
A sada predlažem da pobliže pogledamo demo primjer. Počet ćemo s HTML-om.
HTML u demo-u Glatko pomicanje za sadržaj stranice Pozdrav, ovo je tekst za demonstraciju glatkog pomicanja stranica na vašoj stranici. Stvarno ne izgleda loše, zar ne :) Ovaj tekst će se ponavljati. (function($)( $(window).load(function())( $("body").mCustomScrollbar(( theme:"dark-thin" )); )); ))(jQuery);Kao što vidite, ovdje sam koristio potpuno standardne HTML5 oznake, sa svim umetnutim skriptama i CSS datotekama o kojima smo govorili gore. Mislim da se ovdje nema što objašnjavati, ako vam nešto nije jasno, svakako pitajte u komentarima.
Pa, sada pogledajmo CSS pravila.
CSS iz 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); tijelo (boja pozadine: #fff; boja: #555; veličina fonta: 14px; obitelj fonta: "Loš skript", kurziv; margina: 0; ispuna: 0; min. širina: 480px; ) html, tijelo( visina: 100%; ) h2( veličina fonta: 80px; poravnanje teksta: sredina; obitelj fonta: "Lobster", kurziv; težina fonta: 700; stil fonta: kurziv; boja: #444; ) hr( visina: 0; rub-bottom: 1px solid #eee; margin-bottom: 50px; font-size: 30px; margin-up: 20px; width: 50%; .text(padding-top : 15px; padding-bottom: 20px)CSS pravila su također vrlo jednostavna i nema ih puno, a možete vidjeti i da su ovdje priloženi Google fontovi kako bi demo izgledao vizualno lijepo.
Nedavno su animacije koje se reproduciraju dok se pomičete po stranici postale sve popularnije. Međutim, primijetio sam da velika većina preglednika nije dizajnirana za takve animacije. Pomicanje stranica mišem ne odvija se glatko (kao u Firefoxu), već u koracima. Kao rezultat toga, animacije pomicanja na stranicama također se reproduciraju trzavo. Po mom mišljenju, problem ovdje uopće nije u preglednicima, već u dodacima koji se koriste za izradu tih animacija. Jer oni su ti koji dopuštaju nagle skokove. Vjerujem da za svaku animaciju treba postojati neka najveća brzina reprodukcije pri kojoj će animacija biti glatka i korisnik će moći razumjeti što se dogodilo na stranici. Ako se slažete sa mnom, krenite glatko i bez trzanja pod mačkom.
U ovom ćemo članku govoriti o dodatku za stvaranje animacija kontroliranih pomicanjem, koji sam nazvao Scrollissimo. Njegov najbliži analog je dodatak ScrollMagic. Zajednička im je svrha i činjenica da je Greensock odabran kao pokretač animacije. Ako iz nekog razloga još niste upoznati s tim, možda biste za potpuno razumijevanje svega što se događa trebali pročitati članke o Greensocku koji su već objavljeni na Habréu. Na primjer .
Osim sličnosti, ovi dodaci imaju i razlike. Ali posebno bih želio istaknuti glavnu stvar - glatku animaciju. Da ovo ne zvuči neutemeljeno, evo vam i dokaza. ScrollMagic početna stranica također potvrđuje moje riječi.
Kako ga koristiti?Spojite se Kako biste počeli koristiti Scrollissimo morate učiniti dvije stvari. Prvo spojite Greensock. Možete povezati samo minimalno potrebne biblioteke (TweenLite, TimelineLite i CSS):
ili povežite jednu biblioteku koja sadrži sve gore navedeno:
I drugo, povezujemo sam Scrollissimo. Knjižnica je dostupna iz repozitorija. A za korisnike bowera također je moguće instalirati naredbom
Bower instalirajte scrollissimo
Preuzeto, sada se povežite:
Možete izborno (ali ne nužno) uključiti jQuery radi vlastite udobnosti. Kasnije u članku ću napisati kod koristeći ga za veću čitljivost.
Predvidio sam mogućnost pokretanja Scrollissima ne samo pri pomicanju cijele stranice, već i na bilo kojem drugom događaju, ali u velikoj većini situacija morate se pretplatiti na događaj pomicanja stranice:
$(prozor).scroll(function())( Scrollissimo.knock(); ));
Sada, svaki put kada se dogodi događaj pomicanja, Scrollissimo će izračunati trenutni napredak animacije i reproducirati je.
NAPOMENA: Ako vam dodatak ne treba sam brojati pomicanje stranice, možete proslijediti vrijednost svojstva scrollTop metodi knock(). Tako će, na primjer, Scrollissimo.knock(1000) reći dodatku da ste pomicali. stranica 1000 piksela.
NAPOMENA: Za podršku uređajima osjetljivim na dodir, postoji adapter za dodir scrollissimo.touch.js, koji se bori protiv zamrzavanja stranice tijekom pomicanja.
To je to, sada možete izravno animirati! Scrollissimo može animirati blizance (pojedinačne animacije) i vremenske trake (red pojedinačnih animacija). Počnimo s blizancima.
Najjednostavnija animacija Recimo da imamo prekrasnu crvenu divu Divy. Stvarno želi rasti, ali zasad je širok i visok samo 50 piksela.
#Divy( pozicija: fiksna; gore: 0; lijevo: 0; visina: 50px; širina: 50px; pozadina: crvena; )
Učinimo to da već nakon 1000 piksela od početka stranica bude široka 300 piksela. Da bismo to učinili, prvo ćemo stvoriti odgovarajući tween, kao da radimo običnu animaciju koristeći Greensock:
Var divyTween = new TweenLite($("#Divy"), 1000, ( width: 300 ));
NAPOMENA: Kao što ste primijetili, jedina razlika u odnosu na standardnu animaciju na Greensocku je ta što trajanje animacije ne navodimo u sekundama, već u pikselima (u našem slučaju 1000).
Sjajno! Sve što preostaje je dati ovog blizanca da ga proždere Scrollissimo:
Scrollissimo.add(divyTween, 0, 6);
Sada usporimo i pogledajmo ovu liniju. Prvi argument je isti tween koji smo stvorili. Drugi argument je s koje pozicije započeti animaciju. U našem slučaju, ovo je početak stranice (0 piksela). Treći argument ostaje. Ovdje dolazimo do glavne značajke koja razlikuje Scrollissimo od običnih dodataka. Treći argument je maksimalna brzina reprodukcije animacije. Ova brzina se mjeri u apstraktnim bezdimenzionalnim jedinicama i bira se "na oko". Odmah ću odgovoriti na pitanje "Što se događa ako ne navedete treći parametar?" Ako ne navedete maksimalnu brzinu, ona neće postojati. Ova će se animacija reproducirati na isti način kao što bi se reproducirali obični dodaci.
Var divyTimeline = new TimelineLite(); divyTimeline.to($("#Divy"),1000 (širina: 300 )); divyTimeline.to($("#Divy"), 1000, ( visina: 300 )); Scrollissimo.add(divyTimeline, 0, 6);
Zaključak To je sve što trebate za uspješno stvaranje animacija pomicanja pomoću Scrollissima. Ovdje ću vjerojatno završiti članak. Zaključno, reći ću da je dodatak u aktivnom razvoju, ima prostora za rast i poboljšanje. Stoga će mi biti drago primiti sva pitanja, savjete i zahtjeve za značajkama.Raspored, animirajte!
