Numero più regolare di transizione con l'odometro

Uno dei modi efficaci per rendere più interessante la presentazione di informazioni numeriche è l' aggiunta di un'animazione di transizione . La creazione di un'animazione di transizione può essere eseguita con javascript, ma la codifica richiederà molto tempo. Per un'alternativa più rapida, prova l'Odometro.

L'odometro è un plugin javascript che può aiutarti a rendere più attraenti le tue informazioni numeriche con transizioni fluide e temi interessanti. È facile da configurare ed è supportato su molti browser correnti.

Implementazione

L'odometro è un plugin javascript standalone . Devi solo includere il file js e il suo tema nella tua pagina con il seguente codice:

Hai finito! Ora qualsiasi elemento che avvolgi con la classe odometer sarà trasformato in un contachilometri.

In questo esempio, sto usando un tema dell'odometro simile ad un'auto. L'odometro viene fornito con sei altri temi diversi, vale a dire il tema predefinito, i temi digitali, minimal, plaza, slot machine e stazione ferroviaria. Puoi andare alla pagina demo per vederli in azione.

Per aggiornare il valore, puoi utilizzare javascript nativo o un codice jQuery. Innanzitutto, chiama la funzione setTimeout, quindi definisci il valore aggiornato come nel seguente snippet:

Oppure puoi usare un modulo jQuery in questo modo:

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

Il valore di 1000 nel codice indica che il processo di aggiornamento verrà eseguito un secondo dopo che la pagina è stata caricata completamente.

Quindi, aggiungi una classe odometer a qualsiasi elemento desiderato, ad esempio:

3252

E il valore di 3252 verrà quindi modificato in 5555 (come definito in precedenza) con una transizione interessante.

Opzioni

Per le funzioni più avanzate, Odometer ti offre alcune opzioni per personalizzare. Questo è utile quando l'impostazione predefinita non ti soddisfa. Per poter impostare le opzioni, innanzitutto creare un oggetto odometerOptions modo:

L'opzione di format influirà sulla regola di formattazione del numero, come mostrare un punto decimale prima di determinate cifre. (ddd) significa che non vi è alcun punto decimale nel numero. E per altre opzioni, controlla il seguente elenco:

 window.odometerOptions = {auto: false, // Non inizializza automaticamente tutto con il selettore di classe 'odometro': '.my-numbers', // Cambia il selettore usato per trovare automaticamente le cose in formato animato: '(, ddd ) .dd ', // Modifica come vengono formattati i gruppi di cifre e quante cifre vengono visualizzate dopo la durata del punto decimale: 3000, // Modifica per quanto tempo il javascript si aspetta che l'animazione CSS prenda il tema:' auto ', // Specifica il tema (se hai più di un file css tema sulla pagina) animazione: 'count' // Count è un metodo di animazione più semplice che incrementa semplicemente il valore, // usalo quando stai cercando qualcosa di più sottile. }; 

Conclusione

Per coloro che spesso presentano informazioni numeriche e desiderano renderlo più accattivante, l'odometro è una buona scelta. Prendi nota che se inserisci qualcosa di diverso da un numero, il plugin non funzionerà . Ad ogni modo, provalo e facci sapere cosa ne pensi!

Vetrina di disegni di biglietti da visita Cool Hipster

Un biglietto da visita ha uno scopo semplice: porta il tuo nome, il nome della tua azienda o del tuo prodotto e i dettagli di contatto se il cliente desidera contattarti. Oggigiorno i biglietti da visita sono unici e straordinari, rispecchiando la personalità, le peculiarità ei talenti dei loro proprietari da quando i creativi sono stati coinvolti e hanno completamente cambiato il gioco.I

(Consigli tecnici e di design)

70+ Risorse di progettazione materiale per sviluppatori Android

Material Design è il nuovo cuore e anima di Google Android. Material Design è un linguaggio visivo che fonde i principi del buon design con l'innovazione. Si concentra per creare un'esperienza utente bella e coerente sfruttando i principi e gli standard di design eccezionali. Google e altri grandi produttori di app come Whatsapp e SwiftKey stanno già utilizzando Material Design nella loro progettazione di app.Se

(Consigli tecnici e di design)