Animaciones de conteo arriba/abajo personalizables en JavaScript puro-CountUp. js

Vista prévia

Descripción

CountUp. js es una biblioteca de JavaScript ligera y fácil de usar que permite animar rostros y cuentas con easings personalizados, separadores, decimales, sufijos y prefijos. También disponible como las directivas angular 1. x/2. x y un plugin de WordPress.

Funcionamiento

Importe la biblioteca CountUp. js en el proyecto Web.

# NPM
npm install countup.js

# Bower
bower install countup.js

<script src="countUp.js"></script>

Cree un nuevo objeto de cronómetro y especifique el elemento de destino y los valores numéricos de inicio/fin.

var myDemo = new CountUp("yourElement", 22, 99.99);

Inicie la animación.

myDemo.start();

Pausa & reanudar la animación.

myDemo.pauseResume();

Restablece la animación.

myDemo.reset();

actualizar el valor numérico.

var newValue = 1999;
myDemo.update(newValue);

Todos los parámetros:

• target : ID del elemento HTML o var del elemento HTML previamente seleccionado donde se produce el recuento
• startVal : el valor que desea iniciar en
• endVal : el valor que desea llegar a
• decimales : número de decimales, valor por defecto 0
• duración : duración de la animación en segundos, por defecto 2
• Opciones : objeto opcional de opciones (ver más abajo)

CountUp(target, startVal, endVal, decimals, duration, options)

Opciones posibles con valores predeterminados.

// toggle easing
useEasing : true,

 // 1,000,000 vs 1000000
useGrouping : true,

 // character to use as a separator
separator : ',',

 // character to use as a decimal
decimal : '.',

 // optional custom easing closure function, default is Robert Penner's easeOutExpo
easingFn: null,

 // optional custom formatting function, default is self.formatNumber below
formattingFn: null,

// optional text before the result
prefix: '',

 // optional text after the result
suffix: '',

 // optionally pass an array of custom numerals for 0-9
numerals: []

Registro de cambios

v1.9.3 (09/21/2018)

• actualizar