Soepeler nummerovergang met kilometerteller

Een van de effectieve manieren om een ​​presentatie van numerieke informatie interessanter te maken, is door een overgangsanimatie toe te voegen . Het maken van een overgangsanimatie kan met javascript worden gedaan, maar de codering duurt lang. Voor een sneller alternatief, probeer Odometer.

Odometer is een JavaScript-plug-in die u kan helpen uw numerieke informatie aantrekkelijker te maken met vloeiende overgangen en coole thema's. Het is eenvoudig in te stellen en wordt ondersteund door veel van de huidige browsers.

Implementatie

Odometer is een zelfstandige javascript-plug-in . U hoeft alleen het js-bestand en het thema ervan op uw pagina op te nemen met de volgende code:

Je bent klaar! Nu wordt elk element dat u in de odometer verpakt, omgezet in een kilometerteller.

In dit voorbeeld gebruik ik een auto-achtig kilometertellerthema. Odometer wordt geleverd met zes andere verschillende thema's, namelijk het standaard thema, digitale thema's, minimale thema's, plaza's, gokautomaten en stations. Je kunt naar de demopagina gaan om ze in actie te zien.

Als u de waarde wilt bijwerken, kunt u native JavaScript of een jQuery-code gebruiken. setTimeout functie setTimeout en definieer vervolgens de bijgewerkte waarde, zoals in het volgende fragment:

Of u kunt een jQuery-formulier gebruiken zoals:

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

De waarde van 1000 in de code betekent dat het updateproces één seconde nadat de pagina volledig is geladen, wordt uitgevoerd.

Voeg vervolgens een odometer aan elk gewenst element, bijvoorbeeld:

3252

En de waarde van 3252 wordt dan gewijzigd in 5555 (zoals eerder gedefinieerd) met een koele overgang.

opties

Voor meer geavanceerde functies biedt Odometer u enkele opties om aan te passen. Dit is handig als de standaardinstelling niet bij u past. Om opties in te stellen, maakt u eerst een odometerOptions object zoals:

De format is van invloed op de regel voor nummeropmaak, zoals het tonen van een decimaalteken vóór bepaalde cijfers. (ddd) betekent dat er geen decimale punt in het getal staat. En voor andere opties, bekijk de volgende lijst:

 window.odometerOptions = {auto: false, // Niet alles automatisch initialiseren met class 'odometer' selector: '.my-numbers', // Verander de selector die wordt gebruikt om automatisch dingen te vinden die geanimeerd moeten worden: '(, ddd ) .dd ', // Wijzig hoe cijfergroepen worden opgemaakt en hoeveel cijfers na de duur van het decimaalteken worden weergegeven: 3000, // Wijzigen hoe lang de Javascript verwacht dat de CSS-animatie het thema gebruikt:' auto ', // Specificeer het thema (als je meer dan één thema css-bestand op de pagina hebt) animatie: 'tellen' // Tellen is een eenvoudiger animatiemethode die de waarde alleen maar verhoogt, // gebruik deze als je op zoek bent naar iets subtielers. }; 

Conclusie

Voor diegenen die vaak numerieke informatie presenteren en het leuker willen maken, is de Odometer een goede keuze. Houd er rekening mee dat als u iets anders invoert dan een nummer, de plug-in niet werkt . Maar goed, probeer het eens en laat ons weten wat je ervan vindt!

Ontwerpers: 14 dingen die u moet weten over loopbaantransities

Laten we eerlijk zijn voor een minuut; het starten en onderhouden van een carrière is een uitdaging. We kunnen ons ergens vestigen en dan beseffen dat een abrupte loopbaanverandering in orde is. Of we kunnen jarenlang pesten over een carrièreverandering voordat het gebeurt.Vaak zijn deze grote veranderingen het meest uitdagende aspect van ons professionele leven.

(Technische en ontwerptips)

Mastodon: zoals Twitter, maar veel cooler

Als je al een Twitter-gebruiker bent, is de kans groot dat je bekend bent met enkele van de meer ... onnodige wijzigingen op Twitter . Terwijl velen van ons besloten hebben om voorlopig op Twitter te blijven, besloot een 24-jarige Duitser genaamd Eugene Rochko om het heft in eigen handen te nemen om een 'betere' versie van Twitter te ontwikkelen

(Technische en ontwerptips)