Línea de tiempo para Incrementar animación de número con JavaScript (sin jQuery)
Licencia actual CC BY-SA 4.0
16 eventos
cuándo alternar formato | qué | por | licencia | comentario | |
---|---|---|---|---|---|
el 25 jun. 2018 a las 0:56 | respuesta | añadido | Alvaro Montoro♦ | línea de tiempo puntuación: 1 | |
el 24 jun. 2018 a las 19:15 | comentario | añadido | Alvaro Montoro♦ |
jQuery no deja de ser funciones hechas en JavaScript. Si lo quieres hacer sólo con JavaScript (sin CSS) quizás en lugar de usar setTimeout o setInterval te interesaría usar requestAnimationFrame que hará que las animaciones se vean mejor.
|
|
el 24 jun. 2018 a las 17:20 | comentario | añadido | user91858 | entonces supongo que por eso inventaron jquery, no? porque es antiestetico hacerlo con pure js??... pero con css3 no puedes usar los eventos javascript para ejecutar sus animaciones. es todo un problema. porque dentro de las etiquetas java script o los documentos '.js' no se puede insertar codigo css, y de la misma forma dentro de las etiquetas style o el documento '.css' no se puede insertar codigo java script | |
el 24 jun. 2018 a las 0:28 | comentario | añadido | information | tiene razon el moderador, mira mi pregunta es.stackoverflow.com/questions/150059/… que feo se ve la animacion solo con js. y revisa este codigo codepen.io/mattonit/pen/vLoddq que hace lo mismo pero es mucho mas fino la animacion, | |
el 23 jun. 2018 a las 21:28 | comentario | añadido | Alvaro Montoro♦ | Ahí quería llegar. Actualizar el valor de left o right de ese modo es ineficiente y va a darte como resultado una animación poco limpia (puede verse a saltos, o si el usuario interactúa con la página puede ver retraso porque el JavaScript está bloqueando). Por eso te decía de usar JavaScript puro combinado con CSS o CSS directamente. | |
el 23 jun. 2018 a las 21:24 | comentario | añadido | user91858 | document.querySelector( 'div' ).style.left = i + 'px' ............... la "i" es la variable que vale cero y se va incrementando......... | |
el 23 jun. 2018 a las 21:21 | comentario | añadido | user91858 | Con el setinterval hago que el numero incremente de uno en uno y a la velocidad que yo quiero. Y ese numero que se va a incrementando lo pongo como valor de la propiedad LEFT o RIGHT de un elemento. Por ejemplo asi: | |
el 23 jun. 2018 a las 21:18 | comentario | añadido | Alvaro Montoro♦ | El delay lo pones con el settimeout. Lo que no termino de entender es lo que quieres hacer con el setinterval. | |
el 23 jun. 2018 a las 21:10 | comentario | añadido | user91858 | Se hacerlo con CSS3 y JQUERY (tengo nivel avanzado en esas dos tecnologias). Pero se me ha metido en la cabeza abandonar el jquery para que mis paginas sean aun mas ligeras, para lo que necesito perfeccionarme en java script puro. Y eso lo que esto haciendo, pero me esta costando imitar el "delay" de jquery. | |
el 23 jun. 2018 a las 21:06 | comentario | añadido | Alvaro Montoro♦ |
Ahora veo lo que intentas hacer. ¿Has pensado en usar una combinación de JS y CSS para eso? Entonces, en lugar de usar setInterval cambiarías la clase o el valor de CSS lo que causaría una transición más suave y limpia. Incluso podría hacerse sólo con CSS sin necesidad de JS.
|
|
el 23 jun. 2018 a las 21:03 | comentario | añadido | user91858 | Hola. Es para hacer el principio basico de una animacion. Por ejemplo un deslizador de imagenes, necesita que un contenedor se mueva a la izquierda unos 300px, y que se detenga un tiempo para que lo lean o vean, y luego se vuelve a mover, hasta que termina con todas las imagenes y se repite el ciclo. | |
el 23 jun. 2018 a las 20:43 | comentario | añadido | Alvaro Montoro♦ | Por curiosidad, ¿cuál es el objetivo? No termino de ver qué es lo que intentas hacer con esto exactamente. | |
el 23 jun. 2018 a las 20:39 | historial | editado | Alvaro Montoro♦ | CC BY-SA 4.0 |
formato de código y texto
|
el 23 jun. 2018 a las 20:31 | historial | editado | user75901 | CC BY-SA 4.0 |
título editado
|
el 23 jun. 2018 a las 20:29 | revisar | Primeras publicaciones | |||
el 23 jun. 2018 a las 20:53 | |||||
el 23 jun. 2018 a las 20:28 | historial | formulada | user91858 | CC BY-SA 4.0 |