Jevn rulling av css-siden. Hvordan gjøre jevn rulling til et anker
Legg igjen en kommentar 6,950
Hilsen, kjære venner. Som du kanskje har lagt merke til, i nesten alle nettlesere er rulling på nettsider veldig skarp og ikke pen. Og selvfølgelig vil jeg gjerne gjøre rullingen for nettstedet mitt jevnere, selvfølgelig kan du gjøre dette, og dessuten ikke anstrenge deg for mye. Dette gjøres ved hjelp av en enkel jQuery-plugin og noen få CSS-regler. Og for å se hvordan det hele fungerer, foreslår jeg at du tar en titt på demoen nedenfor.
Ι
La oss nå gå videre til å legge ved jevn rulling til nettstedet vårt.
Html
Først må vi legge ved jQuery-biblioteket. Hvis du allerede har den vedlagt, hopp over dette trinnet:
Deretter må vi legge ved selve jQuery-pluginen, som er ansvarlig for vår jevne rulling, og sammen med den er det egne CSS-regler som endrer selve rullefeltet på siden. Vi vil snakke mer om rullefeltet mer detaljert i neste leksjon, men foreløpig bare jevn rulling. Og her er reglene og plugin-en:
Alt. Nå har vi allerede tatt det første og viktige steget. Nå må vi legge til en enkel regel til nettstedets CSS-stiler.
CSS
html, body (høyde: 100 %;)
Dette for å gjøre det klart for plugin-en vår at sidebredden er strukket og er 100 % høy. Sørg for å legge til denne regelen i CSS-en din, ellers vil ikke rullingen fungere.
Manus
Og nå foreslår jeg å se nærmere på demoeksemplet. Og vi starter med HTML.
HTML i demo
Jevn rulling for nettstedet
Innhold
Hei, Dette er en tekst for å demonstrere jevn rulling av sider på nettstedet ditt. Det ser virkelig bra ut, ikke sant :) Denne teksten skal gjentas.
Som du kan se, har jeg her brukt helt standard HTML5-markering, med alle skriptene og CSS-filene satt inn ovenfor som vi snakket om. Jeg tror at det ikke er noe å forklare her, hvis noe ikke er klart for deg, sørg for å spørre i kommentarfeltet.
CSS-reglene er også veldig enkle og det er ikke mange av dem, du kan også se at Googles fonter er vedlagt her for å få demoen til å se fin ut visuelt.
Hei kjære venner!
I dag vil vi fortelle deg om den jevne rullingen av landingssiden til ønsket element.
Jevn rulling (eller jevn rulling) lar den besøkende på landingssiden navigere gjennom seksjonene uten å miste visuell kontakt med innholdet i tilbudet.
Du kan se et eksempel fra. På denne siden utløses en jevn rulling når du klikker på knappen "Bestill levering".
Jeg vil også gjøre deg oppmerksom på at bruk av jevn rulling også er aktuelt i kombinasjon med en statisk meny. Tidligere publiserte vi en opprettingsveiledning som også i stor grad forenkler navigering på landingssider med høyt volum og bidrar til å øke antallet konverteringer.
Så her er en detaljert illustrert guide for å lage jevn rulling for et enkelt element:
1) Åpne landingssiden i den visuelle editoren LPgenerator
2) Kopier koden:
3) Bruk "Skript"-verktøyet, lim inn den kopierte koden på siden
Still inn plasseringen av koden: "Før merkelappen
”
:
4) Skriv ned i koden identifikatoren til knappen, når du klikker på hvilken rulling vil skje. Identifikatoren er skrevet innenfor enkle anførselstegn.
5) Du kan se elementidentifikatoren i dens utvidede egenskaper til høyre:
6) Merk følgende: hvis elementet du klikker på for å begynne å rulle ikke er en knapp, slett bokstaven 'a' i koden:
Merk: etter rulling vil elementet ha en nullforskyvning fra øvre kant av vinduet, det vil si at det vil være helt øverst på siden.
Derfor, hvis du ønsker å flytte en besøkende til et kundeemneskjema, anbefaler vi at du i koden spesifiserer identifikatoren for tittelen eller elementet som er plassert over det første feltet i skjemaet, for eksempel en pil:
OBS: jevn rulling fungerer ikke for seksjoner. Ta derfor ikke med seksjonsidentifikatoren i koden.
8) Som standard er tiden for å rulle til det spesifiserte elementet 1000 ms = 1 sek. Du kan gjøre rullingen langsommere (f.eks. 5000ms = 5 sek).
Skriv den nødvendige tiden i koden:
9) Sjekk plasseringen av skriptet, ikke glem å angi et navn for skriptet. Lagre deretter endringene og lagre landingssiden i det visuelle redigeringsprogrammet.
Og så, la oss først finne ut hva som er ankerlenker eller bare ankere. Ankerlenker er lenker som tar den besøkende til bestemte steder på siden. I kjernen er det som bokmerker. Hvis siden er stor og faktisk er delt opp med forskjellige blokker, kan du gjøre det slik at den besøkende umiddelbart kan gå til ønsket del av siden uten å bruke en rulle.
Slike ankerlenker brukes ofte på sider FAQ.... På slike sider er det mange ulike punkter med svar på ofte stilte spørsmål. For ikke å bla manuelt gjennom hele teksten, er disse spørsmålene plassert i begynnelsen med lenker til ønsket avsnitt. Slike ankerlenker brukes også ofte på landingssider (landingssider). Jeg bruker også ofte slike ankere i landingssider, dersom kunden spør om det. Landingssidene er ofte lange og derfor er ikke slike ankere noen dårlig hjelper.
Et eksempel på hvordan slike lenker fungerer finner du på denne siden:
I vårt tilfelle er dette en enkel div-blokk. I utgangspunktet, for en enkel overgang, det er det. Når du klikker på en slik lenke, vil den besøkende umiddelbart bli omdirigert til den delen av siden hvor blokken med ankeret er plassert.
For å implementere jevn bevegelse langs ankrene, må du koble til - jQuery... En gang i tiden lette jeg lenge etter det rette manuset og rotet i en haug med informasjon. Mer enn halvparten av dem viser skript som rett og slett ikke lenger fungerer på nye versjoner av biblioteker. Kanskje du også fant disse skriptene før du kom til siden min. Så kom jeg over dette manuset, som var en utmerket løsning for oppgavene mine.
Først i hatten foran avslutningen hode eller til kjelleren foran avslutningen kropp du må inkludere jQuery-biblioteket.
Pass på at dette ikke har blitt gjort før, for ikke å provosere frem en konflikt og inoperabilitet av skript.
Nå, etter biblioteket, kobler vi til selve skriptet, som vil animere den jevne overgangen.
Den andre linjen i skriptet spesifiserer ID-en til blokken med ankerlenker. Som et eksempel kan du organisere følgende blokk:
Den sjette linjen inneholder tallet 1500 - tiden i millisekunder og tilsvarer 1,5 sekunder. Dette er tiden overgangen til ønsket anker foretas. For å øke hastigheten eller senke animasjonen, bare endre nummeret.
Det er alt, takk for oppmerksomheten. 🙂
God ettermiddag. I dag vil jeg fortelle deg om en så interessant effekt som jevn rulling for å ankre... Det kan for eksempel være en meny øverst på siden, når du klikker på den vil den jevnt rulle til det tilsvarende elementet.
Du har sannsynligvis sett en lignende effekt på andre landingssider. I dag vil du lære hvordan du implementerer det.
Jevn rulling for å forankre ved hjelp av javascript
I et av prosjektene var oppgaven å implementere en lignende effekt med jevn rulling til et bestemt element når man klikker på et av menyelementene.
La oss starte med å koble jquery-biblioteket til prosjektet vårt og skrive banen til skriptet som er ansvarlig for jevn rulling:
Vi har taklet det. Nå må du sette etiketter og ankere som rullingen skal skje til.
Jeg vil fortelle deg om eksempelet på menyen som var i prosjektet for utleie av profesjonelt utstyr for bygge- og renholdsarbeid. Her er kildekoden:
Som du kan se er alt standard og ingen triks. Som et resultat ble det laget blokker tilsvarende menyene på landingssiden. De avslørte en spesifikk tjeneste. Det var nødvendig å gjøre en jevn overgang til disse blokkene.
For at overgangen til ønsket sted på nettstedet skal utføres, er det nok å legge til en lenke til identifikatoren til den nødvendige blokken. La oss gjøre det.
Nå er det nødvendig å sette identifikatorene "rengjøring", "bygning", "handlinger" til de tilsvarende blokkene. Det så slik ut for meg:
Legg merke til navnet = "rengjøring"-attributtet. Den må samsvare med ID-en. Her er selve manuset:
$ (funksjon () ($ ("a.scrollto"). klikk (funksjon () (la elementClick = $ (this) .attr ("href") la destinasjon = $ (elementClick) .offset (). topp; $ ("html: ikke (: animert), body: ikke (: animert)"). animate ((scrollTop: destinasjon), 1100); return false;));));
Hvis du, som meg, trenger å implementere rulling til flere elementer, så er det bare å sette inn identifikatorer, som dette og det er det! Veldig praktisk og lett å implementere. Jeg påstår ikke at det er det beste, men det fungerer. Hvis noen kan forenkle, forkorte eller på en eller annen måte forbedre det, vil jeg være deg veldig takknemlig. For meg kan denne effekten være nyttig for mange.
Vær oppmerksom på at i begynnelsen av artikkelen indikerte vi navnet og banen til skriptet som følger:
Det vil si at du må opprette en mappe i roten av nettstedet ditt kalt js og legge inn en fil som heter perehod.js. Og sett allerede inn skriptkoden i den. Dette er meg, for sikkerhets skyld. Plutselig vil noen ikke forstå.
Og det var alt for i dag. Nå vet du hvordan du implementerer en så kul effekt som jevn siderulling til ankeret. Ha det alle sammen!
P.s.: Takk til de som svarte på oppfordringen i sosiale medier om hjelp med ideer til nye artikler. Jeg vet ikke hvorfor du bestemte deg for å skrive i private meldinger, la det være bedre i kommentarfeltet, så det blir lettere for andre å skrive en anmeldelse hvis de ser at noen mer vågale allerede har gjort dette.
Denne metoden har en ulempe, den fungerer ikke bra med wow.js, som vi brukte da vi lagde animasjonen i denne artikkelen. Noen animasjoner spilles ikke, og en tom plass er igjen på deres plass. Hvis noen vet hvordan du fikser dette, vennligst skriv i kommentarfeltet eller inn
Nylig har animasjoner som spilles mens du ruller på siden fått mer og mer popularitet. Jeg la imidlertid merke til at de aller fleste nettlesere ikke er bygget for slike animasjoner. Å rulle gjennom sidene med musen er ikke jevn (som i Firefox), men trinnvis. Som et resultat spilles også rullende animasjoner på sidene i rykk. Etter min mening ligger ikke problemet her i det hele tatt i nettleserne, men i pluginene som brukes til å lage disse animasjonene. For det er de som tillater skarpe hopp. Jeg tror at for enhver animasjon bør det være en viss maksimal avspillingshastighet der animasjonen vil være jevn, og brukeren vil kunne forstå hva som skjedde på siden. Hvis du er enig med meg, så beveg deg jevnt og uten rykk under katten.
I denne artikkelen vil vi snakke om en plugin for å lage rullekontrollerte animasjoner, som jeg kalte Scrollissimo. Dens nærmeste analog er ScrollMagic-plugin. Felles for dem er formålet og det faktum at Greensock er valgt som animasjonsmotor. Hvis du fortsatt ikke er kjent med det av en eller annen grunn, så kanskje, for en fullstendig forståelse av alt som skjer, bør du lese artiklene om Greensock, som allerede er publisert på Habré. For eksempel .
I tillegg til likhetene har disse pluginene også forskjeller. Men jeg vil gjerne fremheve det viktigste - jevn animasjon. For at det ikke skal høres ubegrunnet ut, her er et bevis. Hovedsiden til ScrollMagic bekrefter også mine ord.
Hvordan bruke det?
Vi kobler sammen
For å begynne å bruke Scrollissimo, må du gjøre to ting. Først kobler du til Greensock. Du kan bare koble til minimumskravene til bibliotekene (TweenLite, TimelineLite og CSS):
eller koble til ett bibliotek som inneholder alle de ovennevnte:
Og for det andre kobler vi sammen selve Scrollissimo. Biblioteket er tilgjengelig fra depotet. Og for bower-brukere er det også mulig å installere med kommandoen
Bower installer scrollissimo Lastet ned, nå kobler vi til:
Eventuelt kan du (men ikke nødvendigvis) inkludere jQuery for din egen bekvemmelighet. Senere i artikkelen vil jeg skrive kode ved å bruke den for større lesbarhet.
Jeg har gitt muligheten til å utløse Scrollissimo ikke bare for å rulle hele siden, men også for alle andre hendelser, men i de aller fleste situasjoner må du abonnere på siderulle-hendelsen:
$ (vindu) .scroll (funksjon () (Scrollissimo.knock ();)); Nå, når rullehendelsen inntreffer, vil Scrollissimo beregne gjeldende fremdrift for animasjonene og spille den.
MERK: Hvis du ikke trenger plugin-modulen for å telle siden som ruller selv, kan du overføre scrollTop-egenskapsverdien til knock ()-metoden. For eksempel vil Scrollissimo.knock (1000) fortelle plugin-en at du har rullet siden med 1000 piksler.
MERK: For å støtte tacho-enheter er det en scrollissimo.touch.js berøringsadapter som bekjemper sidefrysing mens du ruller.
Det er det, nå kan du animere direkte! Scrollissimo kan animere tweens (enkeltanimasjoner) og tidslinjer (kø med enkeltanimasjoner). La oss starte med tvillingene.
Den enkleste animasjonen
La oss si at vi har en fin rød div som heter Divy. Han vil virkelig vokse, men så langt er han bare 50 piksler bred og høy.
#Divy (posisjon: fast; topp: 0; venstre: 0; høyde: 50px; bredde: 50px; bakgrunn: rød;) La oss gjøre den 300 piksler bred etter 1000 piksler fra begynnelsen av siden. For å gjøre dette, lag først den passende tvillingen, som om vi gjorde en vanlig animasjon ved å bruke Greensock:
Var divyTween = ny TweenLite ($ ("# Divy"), 1000, (bredde: 300)); MERK: Som du la merke til, er den eneste forskjellen fra standardanimasjonen på Greensock at vi spesifiserer varigheten av animasjonen ikke i sekunder, men i piksler (i vårt tilfelle 1000).
Fint! Alt som gjenstår er å gi denne tvillingen til Scrollissimo:
Scrollissimo.add (divyTween, 0, 6); La oss nå senke farten og analysere denne linjen. Det første argumentet er den samme tvillingen vi skapte. Det andre argumentet er hvor du skal starte animasjonen. I vårt tilfelle er dette begynnelsen av siden (0 piksler). Det tredje argumentet gjenstår. Det er her vi kommer til hovedfunksjonen som skiller Scrollissimo fra vanlige plugins. Det tredje argumentet er maksimal hastighet for animasjonen å spille. Denne hastigheten måles i abstrakte dimensjonsløse enheter og velges "med øyet". Jeg vil umiddelbart svare på spørsmålet "Hva vil skje hvis du ikke spesifiserer den tredje parameteren?" Hvis du ikke spesifiserer maksimal hastighet, vil den ikke være det. Denne animasjonen vil spille på samme måte som den ville spille med vanlige plugins.
Tidslinjer
Så Divy har vokst i bredden. Hvordan kan vi hjelpe ham å vokse i høyden? Det er her animasjonskjeder eller, når det gjelder Greensock, tidslinjer kommer godt med. Hvis du har brukt dem før til å bygge animasjoner, er dette ikke noe nytt for deg. På samme måte som vi gjorde med tvillingen ovenfor, gjør vi det med tidslinjen. jsFiddle
Det er alt som skal til for å lykkes med å lage rulleanimasjoner med Scrollissimo. På dette vil jeg kanskje avslutte artikkelen. Avslutningsvis vil jeg si at plugin-en er i det aktive utviklingsstadiet, det har plass til å vokse og forbedre seg. Derfor vil jeg gjerne ha spørsmål, råd og funksjonsforespørsler.
