tudmin
Beta
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Bueno, un usuario de forobeta busco (/temas/como-se-llama-este-efecto-de-animacion.1071876) esa animacion y me entro curiosidad, hace tiempo tambien quise implementar uno similar en algunas webs, pero recuerdo que no me gustaron ya que abusar de javascript para un efecto de ese estilo como que es un gasto innecesario de recursos, si bien muchos no sienten el impacto de rendimiento, por tener maquinas potentes, mis proyectos suelen pasar por testing bajo equipos de bajos recursos eso verificar .
pero actualmente CSS avanza y es momento de mirar al futuro, y aun asi e visto varios de estos "odometer-style" y lo mismo siguen abusando de javascript en su mayoria, despes de dedicarle 30 min de busqueda y prueba decidi hacer unas pruebas con CSS, si alguien le gusta o le interesa , lo puede mejorar creando un CustomElement, un ShadowRoot,. en si dejo este pequeño aporte , ya aqui es la imaginacion de cada uno
Recuerde leer los comentarios del codigo
Puedes probar el ejemplo usando la web https://codi.link
[Link Ejemplo Chrome 2025 actualizado]
[Link Ejemplo Para firefox]
pero actualmente CSS avanza y es momento de mirar al futuro, y aun asi e visto varios de estos "odometer-style" y lo mismo siguen abusando de javascript en su mayoria, despes de dedicarle 30 min de busqueda y prueba decidi hacer unas pruebas con CSS, si alguien le gusta o le interesa , lo puede mejorar creando un CustomElement, un ShadowRoot,. en si dejo este pequeño aporte , ya aqui es la imaginacion de cada uno
Recuerde leer los comentarios del codigo
HTML:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>odometer-style number animation</title>
<style>
.fila:before {
position: relative;
content: '0 1 2 3 4 5 6 7 8 9';
transition: 0.3s all;
position: absolute;
width: min-content;
white-space: pre-line;
line-height: 1em;
}
.fila:after {
content: "_";
visibility: hidden;
}
/* CSS Anterior al 2025 o firefox */
/*
.fila[data-n='0']:before {top: 0em;}
.fila[data-n='1']:before {top: -1em;}
.fila[data-n='2']:before {top: -2em;}
.fila[data-n='3']:before {top: -3em;}
.fila[data-n='4']:before {top: -4em;}
.fila[data-n='5']:before {top: -5em;}
.fila[data-n='6']:before {top: -6em;}
.fila[data-n='7']:before {top: -7em;}
.fila[data-n='8']:before {top: -8em;}
.fila[data-n='9']:before {top: -9em;}
*/
/* CSS moderno 2025 */
.fila[data-n]:before{
top: calc(attr(data-n em) *-1);
}
.fila {
display: inline-block;
overflow: hidden;
width: min-content;
white-space: pre-line;
height: 1em;
border: 1px solid red;
position: relative;
}
div {
display: block;
position: relative;
}
h1 {
display: block;
position: relative;
}
pre {
font-size: 30px;
}
</style>
</head>
<body>
<div>
<span class="fila" data-n="1"></span>
<span class="fila" data-n="2"></span>
<span class="fila" data-n="3"></span>
</div>
<h1>
<span class="fila" data-n="6"></span>
<span class="fila" data-n="1"></span>
<span class="fila" data-n="3"></span>
</h1>
<code>
<pre>
<span class="fila" data-n="1"></span><span class="fila" data-n="8"></span><span class="fila" data-n="9"></span>
</pre>
</code>
<div
style="font-size: 34px; font-family: Verdana, Geneva, Tahoma, sans-serif;color:green; text-shadow:2px 2px 2px red">
$
<span class="fila" data-n="6"></span>
.
<span class="fila" data-n="0"></span>
<span class="fila" data-n="1"></span>
<span class="fila" data-n="9"></span>
</div>
<button
onclick="document.querySelectorAll('[data-n]').forEach( span=> span.setAttribute('data-n', Math.floor(Math.random() * 10)) )">RANDOMIZAR</button>
</body>
</html>[Link Ejemplo Chrome 2025 actualizado]
[Link Ejemplo Para firefox]
