El número más suave que transita con odómetro

November 22|291 Vistas|

Resumen: Una de las maneras eficaces de hacer una presentación de la información numérica más interesante es mediante la adición de una animación de transición. Creación de una animación de transición se puede hacer con javascript, pero la codificación le lle

Advertisement

El número más suave que transita con odómetro

Una de las maneras eficaces de hacer una presentación de la información numérica más interesante es mediante la adición de una animación de transición. Creación de una animación de transición se puede hacer con javascript, pero la codificación le llevará mucho tiempo. Para una alternativa más rápida, pruebe el odómetro.

Odómetro es un plugin javascript que puede ayudarle a tomar su información numérica más atractivo con transiciones suaves y temas frescos. Es fácil de configurar y está soportado en muchos navegadores actuales.

Lectura recomendada: Cómo implementar Infinito página de desplazamiento Efecto En Las páginas web estáticas [Tutorial]

Implementación

Odómetro es un independiente Javascript plugin. Sólo tiene que incluir el archivo js y su tema en su página con el siguiente código:

  <Link rel = "stylesheet" href = "odometer-theme-car.css" /> <script type = "text / javascript" src = "odometer.js"> </ script> 

¡Ya terminaste! Ahora, cualquier elemento que se envuelve con el odometer clase se transforma en un odómetro.

En este ejemplo, estoy usando un tema similar al de un automóvil. Odómetro viene con otros seis temas diferentes, es decir, el tema por defecto, digital, mínimo, plaza, máquina tragaperras y temas de la estación de tren. Puede dirigirse a la página de demostración para verlos en acción.

Para actualizar el valor, puede utilizar javascript nativo o un código jQuery. En primer lugar, llamar a la setTimeout función, a continuación, definir el valor actualizado al igual que en el siguiente fragmento:

  <Script> setTimeout (function () {odometer.innerHTML = 5555;}, 1000);  </ Script> 

O puede utilizar un formulario jQuery de la siguiente manera:

  SetTimeout (function () {$ ('. Odómetro'). Html (5555);}, 1000); 

El valor de 1000 en el código significa que el proceso de actualización se ejecutará un segundo después de que la página se haya cargado completamente.

A continuación, agregue un odometer clase a cualquier elemento que desee, por ejemplo:

  <P class = "odómetro"> 3252 </ p> 

Y el valor de 3252 se cambiará a 5555 (como se definió anteriormente) con una transición fría.

Opciones

Para las características más avanzadas, Odómetro le ofrece algunas opciones para personalizar. Esto es útil cuando el ajuste predeterminado no le conviene. Para poder configurar las opciones, en primer lugar crear un odometerOptions objeto de esta manera:

  <Script> window.odometerOptions = {formato: '(ddd) .dd'};  </ Script> 

El format opción afectará a la regla de formato de número, como mostrar un punto decimal antes de ciertos dígitos. (ddd) significa que no hay punto decimal en el número. Y para otras opciones, echa un vistazo a la siguiente lista:

  Window.odometerOptions = {auto: false, // No se inicializa automáticamente todo con el selector 'odómetro' de la clase: '.my-numbers', // Cambia el selector utilizado para buscar automáticamente las cosas a animar formato: '(, ddd ) .dd ', // Cambia la forma en que se formatean los grupos de dígitos y cuántos dígitos se muestran después de la duración del punto decimal: 3000, // Cambia el tiempo que el javascript espera que la animación CSS tome el tema:' coche ', // Especifica El tema (si tienes más de un archivo de tema css en la página) animation: 'count' // Count es un método de animación más simple que incrementa el valor, // lo usa cuando estás buscando algo más sutil.  }; 

Conclusión

Para aquellos que a menudo presentan información numérica y le gustaría hacerla más llamativa, Odómetro es una buena opción. Simplemente tome nota que si de entrada que no sea un número nada, el plugin no funcionará. De todos modos, no dale una oportunidad y háganos saber lo que piensa!

Más

Etiqueta:

Artículos relacionados

Popular

Último