JavaScript - Desplegar información ralentizada en Pagina Web

Pos: 46

Val: 39

Desplegar información ralentizada en Pagina Web

Publicado por Israel (18 intervenciones) el 04/04/2020 12:02:15

Buenos días,

Acabo de iniciarme en el mundo de JavaScript en particular y en el mundo de la programación en general. También iniciandome con HTML5 y CSS3.

Quisiera saber como desplegar un texto al abrir una pagina web de modo que ese texto en particular se deslice en la página web uno o dos segundos tras abrir la página.

No busco una ventana modal tipo "alert()" si no simplemente que un texto más de la página presente el efecto de aparecer con un pequeno retraso respecto del resto de información.

Espero haberme explicado,

Muchas gracias.

Valora esta pregunta

Me gusta: Está pregunta es útil y esta clara

No me gusta: Está pregunta no esta clara o no es útil

Responder

Pos: 4

Val: 2.019

Desplegar información ralentizada en Pagina Web

Publicado por ScriptShow (692 intervenciones) el 04/04/2020 14:15:03

Saludos,

veamos un ejemplo sencillo para empezar:

<style>

#demo {left:-240px;position:absolute;-webkit-transition:all 2s ease;transition:all 2s ease}

</style>

<h2 id="demo">El Texto con efecto...</h2>

<script>

setTimeout("document.getElementById('demo').style='left:480px'", 4000);

</script>

Espero sea útil.

Valora esta respuesta

Me gusta: Está respuesta es útil y esta clara

No me gusta: Está respuesta no esta clara o no es útil

Comentar

Pos: 46

Val: 39

Desplegar información ralentizada en Pagina Web

Publicado por Israel (18 intervenciones) el 04/04/2020 15:42:04

Muchas gracias ScriptShow,

Estaba a punto de dar un paseo cuando vi tu respuesta, jejejee.

Paseo anulado y paso a analizar tu código.

Muchas gracias.

Valora esta respuesta

Comentar

Pos: 46

Val: 39

Desplegar información ralentizada en Pagina Web

Publicado por Israel (18 intervenciones) el 04/04/2020 19:09:57

Buenas,

Creo que entendí todo el código

El único problema es que curiosamente la posición del texto donde se aplica el efecto se modifica verticalmente. Entiendo que los valores "left" que indicas son valoeres absolutos antes y después del efecto según el eje X (horizontal) pero hay una modificación vertical del texto.
Es decir, el efecto funciona y efectivamente aparece de izquierda a derecha pero el texto aparece más abajo de lo que estaba antes de aplicar el efecto.

Muchas gracias.

Valora esta respuesta

Comentar

Pos: 4

Val: 2.019

Desplegar información ralentizada en Pagina Web

Publicado por ScriptShow (692 intervenciones) el 04/04/2020 19:28:27

Saludos,

le podemos dar un valor fijo con respecto al Top. Veamos:

<style>

#demo {top:48px;left:-240px;position:absolute;-webkit-transition:all 2s ease;transition:all 2s ease}

</style>

<h2 id="demo">El Texto con efecto...</h2>

<script>

setTimeout("document.getElementById('demo').style='left:480px'", 4000);

</script>

Otra variante efecto vertical. Puedes ajustar los valores, etc...

<style>

#demo {top:-48px;left:48px;position:absolute;-webkit-transition:all 2s ease;transition:all 2s ease}

</style>

<h2 id="demo">El Texto con efecto...</h2>

<script>

setTimeout("document.getElementById('demo').style='top:240px'", 4000);

</script>

Espero sea útil.

Valora esta respuesta

Comentar

Pos: 46

Val: 39

Desplegar información ralentizada en Pagina Web

Publicado por Israel (18 intervenciones) el 04/04/2020 21:24:25

Buenas,

Antes de nada GRACIAS y seguido PERDÓN. Quise votar por tu respuesta y torpe de mi que terminé indicando un 1. Al quererlo modificar ya no me dejó.

Ahora funciona perfectamente.

Un saludo

Valora esta respuesta

Comentar

Diferentes HTML. 3 Resultados. 1 Tabla de resultados.

Error con un addEventListener