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!

Doen ontwerpers in een bubbel?

Het is een provocerende vraag, ik weet het. De vraag of de ontwerpgemeenschap te ingewikkeld is, is er een die velen in de ontwerpwereld zich al een tijdje hebben afgevraagd. Er zijn meer ontwerpers die werken dan ooit tevoren, en design speelt een zeer prominente rol in de tech-forward-industrie van vandaag

(Technische en ontwerptips)

Consumer Guide to Secure Online Transactions

De transactie is niet langer beperkt tot de echte wereld van vandaag. Aangezien de internetverkenners in elk modern land aan het werk zijn, hebben de meeste bedrijven, met name grote merken, hun eigen e-commercesites opgezet met verschillende betalingsopties voor veilig online winkelen en transacties

(Technische en ontwerptips)