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!

Hvordan finne ut hvem som er bak den e-postadressen

Se for deg dette. Du har mottatt en e-post som hevder at du har vunnet noen premie eller beløp i et heldig trekk, eller kanskje du har mottatt en e-post som ser ganske interessant ut. Før du kan stole på meldingen som sendes via e-post og før du sender svaret ditt, er det viktig at du korrekt identifiserer personen som er tilknyttet denne e-posten .Det

(Tekniske og design tips)

Instapaper Premium blir gratis for alle

Tilbake i august kjøpte Pinterest Instapaper, en tjeneste som lar deg lagre ting på nettet for å lese på et senere tidspunkt. Den gode nyheten er at Instapaper er "bedre resourced", Instapaper Premium er nå en gratis tjeneste.Fra og med i dag vil alle som registrerer seg for Instapaper få tilgang til Premium-funksjoner som :50 artikler verdt av Kindle Digests, som er en tjeneste som automatisk oppsummerer dine lagrede artikler for deg.Et fu

(Tekniske og design tips)