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!

Opprett JavaScript-drevne datakart med Billboard.js

Grafikk og grafikk spiller en viktig rolle i å forbedre webinnholdet. Med moderne teknologi er det så enkelt å legge til tilpassede visualer som SVG-ikoner i siden din.Men et annet overraskende visuelt du kan bygge fra bunnen av er et webskjema.Dette kan hjelpe deg med å grafisere dataene visuelt, slik at de besøkende raskt kan skumme relevant informasjon. Og

(Tekniske og design tips)

6 CSS triks for å justere innholdet vertikalt

La oss snakke om vertikal justering i CSS, eller å være mer presis hvordan det ikke kan gjøres. CSS har ennå ikke gitt en offisiell måte å sitte på innholdet vertikalt i sin container. Det er et problem som sannsynligvis har frustrert webutviklere overalt. Men ikke for å frykte, i dette innlegget kommer vi til å lede noen triks som kan hjelpe deg med å etterligne effekten .Disse tri

(Tekniske og design tips)