Odómetro basado en SVG efecto de desenfoque de movimiento-Bounty. js
| Autor: | coderitual |
|---|---|
| Views Total: | 1,453 |
| Sitio oficial: | Ir a la web |
| Actualizado: | July 9, 2018 |
| Licencia: | MIT |
Vista prévia
Descripción
La biblioteca Bounty. js le permite crear animación de desplazamiento de texto estilo cuentakilómetros con un efecto de desenfoque de movimiento utilizando SVG.
Funcionamiento
Instale e importe el Bounty. js en su proyecto.
# NPM $ npm install bounty --save
import bounty from `bounty`;
O inserte el script ' Bounty. js ' directamente.
<script src="lib/bounty.js"></script>
Cree un elemento contenedor como este:
<div class="js-bounty"></div>
Inicializa el Bounty. js y establece el valor.
bounty.default({
el: '.js-bounty',
value: '$12,345,678'
}) Más opciones para la configuración de la animación.
bounty.default({
// initial value
initialValue: null,
// line height
lineHeight: 1.35,
// letter spacing
letterSpacing: 1,
// animation delay
animationDelay: 100,
// animation delay of letter
letterAnimationDelay: 100
}) Registro de cambios
07/09/2018
- se eliminó createShadowFailFilter para resolver el problema de la sombra de texto en
06/24/2018
- convertir el valor del filtro de movimiento para mantener solo 1 decimal
