Versión 1 estática ( sólo cuenta hasta 10 ) CSS + javascript :
- nos enganchamos al evento on scroll del viewport ( para saber si la tabla está visible )
- calculamos según el scroll (
wt
) la parte visible del viewport ( wb
)
- por cada elemento que tiene que contar de 0 a 10
- calculamos la distancia del elemento desde el tope del viewport (
et
)
- calculamos los límites del elemento (
eb
)
- si no está aún visible (
et > wb + th
) ny = true
- si ya dejó de estar visible (
eb < wt - th
) ap = true
- th es un modificador en pixels para que arranque antes o después
- si ya pasó o aún no está visible le sacamos la clase
resaltado
- caso contrario ( es visible en el viewport ) le agregamos la clase
resaltado
- La clase
resaltado
tiene adjunta una animación que va de 0 a 10 y queda en 10
$(document).ready(function() {
var $elementos = $('.animacuenta');
$(window).scroll(function() {
// calculo de si el elemento es visible basado en:
// https://github.com/luis-almeida/unveil/blob/master/jquery.unveil.js
$w = $(window)
wt = $w.scrollTop()
th = 0
wb = wt + $w.height()
$elementos.each(function() {
$el = $(this);
et = $el.offset().top
eb = et + $el.height()
ny = et > wb + th
ap = eb < wt - th
if (ap || ny) {
$el.removeClass('resaltado')
} else {
$el.addClass('resaltado')
}
});
});
});
.muyalto {
height: 140vh;
background: #fafafa;
padding: 10px;
}
.resaltado {
background: #fe0;
}
@keyframes cuentaNumeros10 {
0% {
content: "0";
}
10% {
content: "1";
}
20% {
content: "2";
}
30% {
content: "3";
}
40% {
content: "4";
}
50% {
content: "5";
}
60% {
content: "6";
}
70% {
content: "7";
}
80% {
content: "6";
}
90% {
content: "9";
}
100% {
content: "10";
}
}
.resaltado::after {
content: "0";
animation: cuentaNumeros10 10s linear forwards;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div class=muyalto>contenido anterior</div>
<table id="estadisticos_tabla">
<thead>
<tr>
<th id="tec_valoradas" data-limite=10 class=animacuenta></th>
<th>0</th>
<th>0</th>
<th>0</th>
</tr>
</thead>
<tbody>
<tr>
<td>TECNOLOGÍAS VALORADAS</td>
<td>POSIBLES PATENTES</td>
<td>TECNOLOGÍAS EN EL MERCADO</td>
<td>USUARIOS</td>
</tr>
</tbody>
</table>
<div class=muyalto>contenido posterior</div>
<table id="otroestadisticos_tabla">
<thead>
<tr>
<th id="otrotec_valoradas" data-limite=5 class=animacuenta></th>
<th>0</th>
<th>0</th>
<th>0</th>
</tr>
</thead>
<tbody>
<tr>
<td>TECNOLOGÍAS VALORADAS</td>
<td>POSIBLES PATENTES</td>
<td>TECNOLOGÍAS EN EL MERCADO</td>
<td>USUARIOS</td>
</tr>
</tbody>
</table>
<div class=muyalto>otro contenido posterior</div>
versión 2 ( CSS dinámico via javascript)
- por cada elemento con clase
animacuenta
tomamos el data-limite
- si no hay una animación que vaya de 0 a
data-limite
creamos una
- esta animación reparte los números entre
0
y data-limite
en keyframes que van de 0% a 100%
- el css armado se inyecta en el
<head>
- en el evento on scroll se asigna la animación adecuada
Nota: le puse la duración de todas las animaciones a 1 segundo, si queres que suban cada una por segundo reemplazar ${$animDuracion}s
por ${$max}s
en la línea que empieza con
$anim += `.resaltado${$max}::after{content:"0";
próxima edición la versión inyectar el css via php
$(document).ready(function() {
var $elementos = $('.animacuenta');
var $estilos = [];
var $animDuracion = 1;
$elementos.each(function() {
$el = $(this);
$max = $el.data('limite')
if (typeof undefined == typeof $estilos[$max]) {
$anim = `@keyframes cuentaNumeros${$max} {`
for (var $idx = 0; $idx <= $max; ++$idx) {
$anim += `${Math.floor($idx/$max*100)}% {content:"${$idx}"} `;
}
$anim += '}';
$anim += `.resaltado${$max}::after{content:"0";animation:cuentaNumeros${$max} ${$animDuracion}s linear forwards}`;
$estilos[$max] = $anim;
}
});
$("head").append($(document.createElement("style")).html($estilos))
$(window).scroll(function() {
// calculo de si el elemento es visible basado en:
// https://github.com/luis-almeida/unveil/blob/master/jquery.unveil.js
$w = $(window)
wt = $w.scrollTop()
th = 0
wb = wt + $w.height()
$elementos.each(function() {
$el = $(this);
$max = $el.data('limite')
et = $el.offset().top
eb = et + $el.height()
ny = et > wb + th
ap = eb < wt - th
if (ap || ny) {
$el.removeClass('resaltado' + $max)
} else {
$el.addClass('resaltado' + $max)
}
});
});
});
.muyalto {
height: 140vh;
background: #fafafa;
padding: 10px;
}
.animacuenta::after {
text-align: center;
font-size: 30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div class=muyalto>contenido anterior</div>
<table id="estadisticos_tabla">
<thead>
<tr>
<th class=animacuenta data-limite=10></th>
<th class=animacuenta data-limite=5></th>
<th class=animacuenta data-limite=7></th>
<th class=animacuenta data-limite=15></th>
</tr>
</thead>
<tbody>
<tr>
<td>TECNOLOGÍAS VALORADAS</td>
<td>POSIBLES PATENTES</td>
<td>TECNOLOGÍAS EN EL MERCADO</td>
<td>USUARIOS</td>
</tr>
</tbody>
</table>
<div class=muyalto>contenido posterior</div>
<table id="otroestadisticos_tabla">
<thead>
<tr>
<th id="otrotec_valoradas" class=animacuenta data-limite=5></th>
<th class=animacuenta data-limite=3></th>
<th class=animacuenta data-limite=7></th>
<th class=animacuenta data-limite=1></th>
</tr>
</thead>
<tbody>
<tr>
<td>TECNOLOGÍAS VALORADAS</td>
<td>POSIBLES PATENTES</td>
<td>TECNOLOGÍAS EN EL MERCADO</td>
<td>USUARIOS</td>
</tr>
</tbody>
</table>
<div class=muyalto>otro contenido posterior</div>