Mindre nummerovergang med kilometer

En av de effektive måtene å lage en presentasjon av numerisk informasjon er mer interessant, er å legge til en overgangsanimasjon . Opprettelse av overgangsanimasjon kan gjøres med javascript, men kodingen vil ta deg lang tid. For et raskere alternativ, prøv Odometer.

Odometer er et javascript-plugin som kan hjelpe deg med å gjøre din numeriske informasjon mer attraktiv med jevne overganger og kule temaer. Det er enkelt å sette opp og støttes på mange nåværende nettlesere.

Gjennomføring

Odometer er et frittstående javascript plugin . Du må bare inkludere js-filen og dens tema på siden din med følgende kode:

Du er ferdig! Nå vil ethvert element som du vikler sammen med odometer bli omgjort til et kilometertall.

I dette eksemplet bruker jeg et billignende kilometertema. Odometer kommer med seks andre forskjellige temaer, nemlig standard tema, digital, minimal, plaza, spilleautomat og togstasjon temaer. Du kan gå over til demo siden for å se dem i aksjon.

For å oppdatere verdien kan du bruke enten innfødt javascript eller en jQuery-kode. Først ring funksjonen setTimeout, og definer deretter den oppdaterte verdien som i følgende utdrag:

Eller du kan bruke et jQuery-skjema slik:

 setTimeout (funksjon () {$ ('. odometer'). html (5555);}, 1000); 

Verdien på 1000 i koden betyr at oppdateringsprosessen vil bli utført et sekund etter at siden er fullstendig lastet.

Deretter legger du til en odometer klasse til et hvilket som helst element du vil ha, for eksempel:

3252

Og verdien av 3252 vil da bli endret til 5555 (som definert tidligere) med en kul overgang.

alternativer

For mer avanserte funksjoner gir Odometer deg noen muligheter til å tilpasse. Dette er nyttig når standardinnstillingen ikke passer deg. For å kunne angi alternativer, må du først opprette et odometerOptions som slik:

format vil påvirke tallformatteringsregelen, som å vise et desimaltegn før bestemte siffer. (ddd) betyr at det ikke er noen desimaltegn i nummeret. Og for andre alternativer, sjekk ut følgende liste:

 window.odometerOptions = {auto: false, // Ikke initialiser alt automatisk med klassen 'odometer' velg: '.my-numbers', // Endre selgeren som brukes til å automatisk finne ting som skal animeres format: '(, ddd ) .dd ', // Endre hvor siffergrupper er formatert, og hvor mange sifre vises etter desimalpoengets varighet: 3000, // Endre hvor lenge javascript forventer at CSS-animasjonen skal ta tema:' bil ', // Angi temaet (hvis du har mer enn ett tema css-fil på siden) animasjon: 'count' // Count er en enklere animasjonsmetode som bare øker verdien, // bruker den når du leter etter noe mer subtilt. }; 

Konklusjon

For de som ofte presenterer numerisk informasjon og ønsker å gjøre det mer iøynefallende, er Odometer et godt valg. Bare vær oppmerksom på at hvis du skriver inn noe annet enn et nummer, vil plugin ikke fungere . Uansett, gi det et forsøk og gi oss beskjed om hva du synes!

20 Inspirerende ideer for minimal hjemliv

Den vanlige ideen de fleste av oss har når det gjelder boligareal er at vi raskt løper ut av det. Leie og land er dyrt i områder med store muligheter, og likevel er det svært kreative mennesker som gikk videre og tok den lille plassen de har og gjort mest mulig ut av det .Vi snakker om smart mikro-living hvor boligeier bruker smart, stuvbare møbler, multifunksjonelle husarmaturer, smart arkitektonisk design eller en kombinasjon av alle tre for å kutte ned på størrelsen på boliger, uten å spise i komfortene vi har blitt vant til .I dette i

(Tekniske og design tips)

10 trådløse hodetelefoner som vil endre måten vi hører på

For de fleste av oss er øretelefoner et must-ha for pendler og jogger, i lange køer og mens du venter på venner, eller bare for å slappe av og ødelegge etter en hard dag på jobben. Vi lytter til favorittlåtene, lydbøkene, podcasterne, nyhetene og mer, og i denne alderen av trådløse gadgets kaster den trådløse øretelefonen problemet med ustyrte og sammenflettede kabler ut av vinduet. Men virkeli

(Tekniske og design tips)