El elemento Números elegantes Bric añade un toque de dinamismo y elegancia a tu sitio web, animando números que cuentan hacia arriba o hacia abajo para captar la atención de los visitantes al instante.
¿Cómo Usar?
Una vez que se haya instalado El Fancy Numbers Bric, simplemente inserte el Bric en su Blocs Proyecto utilizando el Bric Bar.
Siempre que el bloque Fancy Numbers esté presente en una página, puedes usar y combinar cualquiera de los elementos predefinidos. privadas y atributos de datos personalizados para animar los números dentro de un Bric de texto.
Para obtener los mejores resultados, recomendamos Envolviendo el valor numérico en un span y aplicando las clases de números elegantes directamente al tramo, en lugar del texto principal Bric. Esto ayuda a mantener el formato del estilo del texto.
Cuando previsualices o publiques tu sitio web, Fancy Numbers se encargará del resto.
Clases compatibles
- fn-up Anima un número hacia arriba desde 0 hasta su valor objetivo.
- fn-abajo Anima un número hacia abajo desde un valor superior (por defecto 10 veces el valor objetivo) hasta su valor objetivo.
- velocidad-s Animación lenta (≈ 6 s). Ideal para valores grandes o para lograr un énfasis dramático.
- velocidad-f Animación rápida (≈ 800 ms). Perfecta para números pequeños o para mostrar estadísticas rápidamente.
Tenga cuidado al usar cualquiera de los dos .fn-up or .fn-down En cada elemento, no aplique ambas clases de dirección a un solo elemento.
Atributos de datos admitidos
- duración de la función de datos Establece una duración de animación personalizada en milisegundos.
- data-fn-from Define un valor inicial personalizado.
- función de datos a Define un valor final personalizado.
- reproducción de función de datos Reproduce la animación cada vez que el elemento se visualiza al desplazarse. Por defecto, los números se animan solo una vez. Valores admitidos su verdadero / false.
Puedes encontrar más información sobre el uso de atributos de datos personalizados en Blocs aquí.
Formatos de número admitidos
Fancy Numbers detecta y conserva automáticamente:
- Símbolos de moneda $, €, £, ¥, ₩, ₹, ₽, ₺, ₦, ₫
- Símbolos de unidad %, px, em, kg, km, m, cm, mi, s, ms, °C, °F, h, hrs
- caracteres de signo +, -
- Abreviaturas K, M, B, T
- Comas y decimales 1,000, 10.5, 2,500.75
Descargar
Fancy Numbers está disponible para su descarga gratuita en Blocs Tienda.