Transición de número más suave con odómetro

Una de las maneras efectivas de hacer una presentación de información numérica más interesante es agregar una animación de transición . La 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, prueba Odometer.

Odometer es un complemento de JavaScript que puede ayudarlo a hacer que su información numérica sea más atractiva con transiciones suaves y temas geniales. Es fácil de configurar y es compatible con muchos navegadores actuales.

Implementación

Odometer es un plugin de javascript independiente . Solo debe incluir el archivo js y su tema en su página con el siguiente código:

¡Terminaste! Ahora cualquier elemento que envuelva con la clase de odometer se transformará en un odómetro.

En este ejemplo, estoy usando un tema de odómetro tipo automóvil. Odometer viene con otros seis temas diferentes, a saber, el tema predeterminado, digital, minimal, plaza, máquina tragamonedas 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 usar Javascript nativo o un código jQuery. Primero, llame a la función setTimeout, luego defina el valor actualizado como en el siguiente fragmento de código:

O puede usar un formulario jQuery como ese:

 setTimeout (function () {$ ('. odometer'). 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 por completo.

Luego, agrega una clase de odometer a cualquier elemento que desees, por ejemplo:

3252

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

Opciones

Para características más avanzadas, Odometer le ofrece algunas opciones para personalizar. Esto es útil cuando la configuración predeterminada no le conviene. Para poder establecer opciones, primero crea un objeto odometerOptions manera:

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

 window.odometerOptions = {auto: false, // No inicializar automáticamente todo con el selector de la clase 'odómetro': '.my-numbers', // Cambiar el selector utilizado para encontrar automáticamente las cosas para ser formato animado: '(, ddd ) .dd ', // Cambia cómo 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:' auto ', // Especificar el tema (si tiene más de un archivo css de tema en la página) animación: 'contar' // Count es un método de animación más simple que simplemente incrementa el valor, // úselo cuando busca algo más sutil. }; 

Conclusión

Para aquellos que a menudo presentan información numérica y quisieran hacerlo más llamativo, Odometer es una buena opción. Solo tenga en cuenta que si ingresa algo que no sea un número, el complemento no funcionará . De todos modos, ¡pruébalo y cuéntanos lo que piensas!

Cómo traducir temas de WordPress para una mejor accesibilidad

Permitir que los clientes administren sus sitios web en sus idiomas nativos es un aspecto importante de la accesibilidad. Si desarrolla un sitio de WordPress que puede tener usuarios de países que no hablan inglés, puede ser necesario traducir el tema.Localizar el tema no significa que traduzcas el contenido en la interfaz, como publicaciones y páginas; en su lugar, se refiere al contenido relacionado con el tema en el área de administración: la descripción del tema, las opciones y el personalizador.El eq

(Consejos de tecnología y diseño)

Cómo personalizar el código de Visual Studio

Visual Studio Code, el nuevo editor de código abierto de Microsoft proporciona a los desarrolladores muchas características increíbles que facilitan significativamente el proceso de edición de código fuente . Además, Visual Studio Code también se asegura de que los usuarios no se aburran cuando trabajan con él, ya que les permite personalizar varias partes de su apariencia, como colores, fuentes, espaciado y formato de texto, al igual que muchas funcionalidades, como como reglas de borrado y validación .En esta

(Consejos de tecnología y diseño)