Vamos a integrar nuestra librería recién creada a nuestro diseño si abres la página web que visitamos.
Animate number.
Puedes ver que en el ejemplo 1 viene un ejemplo de cómo utilizar este código y es muy sencillo.
El selector y Cuera y luego tienen el signo de numeral o gato.
Lo más seguro es que esté Heydi con Air Lines y le agrega el método de animated number.
Casi todos los plugins tienen un método que dispara todas las funciones del plugin y por lo normal ese
método se llama igual que el plugin.
Sin embargo siempre es bueno ver la documentación como ésta y ver el ejemplo de cómo se utiliza.
Así de esa forma cualquier plugin que integros en el futuro lo podrá hacer de una forma muy fácil por
lo normal casi todos los plugins de colores son muy claros y muy sencillos de integrar vamos a ver cómo
hacerlo nuestro diseño.
Vamos a abrir nuestro código y vamos a buscar esa parte de invitados seamos un poco más de scroll aquí
lo podemos ver desde invitados talleres tres días y conferencias vamos a eliminar estos números no nos
van a servir de nada ya que los estaremos agregando con JavaScript o Colliguay.
Sin embargo los agregamos para poderle dar estilos con CSS.
Vamos a guardar esto y recargó y vemos que aquí ya desaparece nuestro nuestros números.
Sin embargo vamos a escribir el código acá en el punto J.V ya habíamos creado nuestro comentario ese
programa de conferencia aquí podemos crear otro que diga animaciones para los números y la forma en
que vamos a hacer este selector va a ser un poco más complejo ya que aquí tenemos el resumen evento
y puedes ver que todos son iguales tenemos una Lehi luego tiene un párrafo que es el número.
Sin embargo hace tiempo cuando empezamos a practicar coñi Cover y dije Recovery tienen una sintaxis
de selectores muy parecida o igual hace CS3.
Así que vamos a hacer algo así signo de dólar comillas resumen número y luego vamos a ir por el leí
que en este caso vendría siendo esta es una lista y le íbamos a ponerlo aquí en DTH Chile y si recuerda
se mete a Churchil seleccionaba el elemento en base a su número.
Por ejemplo si yo quiero este de invitados Chile sería uno talleres seriados este sería 3 y este sería
el 4 así que ponemos aquí en DTH Chile 1 por qué se utilizáramos el Lehi fears.
Pues este firmabas tenemos First Class no tenemos así como second o third eso no existe ya que si por
ejemplo hubiera mil pues los creadores de cuero tendrían que haber creado mil distintas funciones.
Cuando tienes algo así en Chile es lo que te salva de aquí le ponemos y todavía nos falta un selector
más que vendría siendo este pe pe quiere Podemos Animate Number que vendría siendo el método del plugin
para que escriba las funciones y aquí toma un parámetro forzoso que es el número que le ponemos abrimos
paréntesis y abrimos llaves y le ponemos nombre y en este caso el primero era haceis fuera del paréntesis
ponemos una coma y aquí la vamos a poner 1200 ahorita vamos a explicar que hace 1200 guardo cambios
recargó y puedes ver que se ve la animación 1206 el tiempo en el que tarda en completarse esta animación.
Si le pongo aquí 3000 serán tres segundos y vemos que el contador va un poco más lento
1206 el número que creo yo que se ve bien.
Vamos a seleccionar esto de nuevo y pegarlo aquí.
Ahora vamos a ir por el segundo.
El segundo era 15 que en este caso era 15 talleres recargo y puedenser que dice 6 y 15 puedo copiarlo
de nuevo dos veces y el siguiente era 3 y el otro eran 9 en este caso voy a poner aquí 600 y el otro
lo aprobé 1500 cambios de recargo.
3 ya que era 4 3 y 4 y podemos ver que las animaciones se ven bien igual este creo que se está animando
muy rápido que ponemos 2000
y creo que es muy lento entonces un 1500 así puede decir jugando con los valores y cambiando la forma
en que para ti se vea bien y tenga sentido y puedes ver que facil fue integrar un plugin de Vickery
vamos a verlo un poco más de scroll en nuestro diseño y en la parte inferior aquí tenemos este contador
vamos a agregar otro contador otro pequeño plugin para un contador que lo hará también muy sencillo
así que nos vemos en el siguiente video.