Telepronter horizontal o marquee programado con jQuery

Telepronter horizontal o marquee programado con jQuery

Un telepronter es una pantalla en la que se proyecta un texto con desplazamiento vertical o horizontal para que pueda ser presentado al mismo tiempo que se lee.

Si bien es verdad que se puede usar con una etiqueta obsoleta cuyo nombre es <marquee>en este ejercicio se plantea reproducir este efecto mediante jquery.

Existen varios conocimientos mínimos a tener en cuenta:

  • Como crear nodos e insertarlos en un documento web.
  • Como añadir html y css a un nodo web determinado.
  • Instrucción animate.

Pasemos al enunciado del ejercicio.

telepronter
telepronter

Enunciado

Dado el siguiente código html y css escribe un programa que genere un nodo con javascript, que lo ponga dentro del div cuyo id es marquee y que a continuación le de un efecto de telepronter (marquee) horizontal.

¿Como harías también ara que el desplazamiento fuera vertical en lugar de horizontal?

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Telepronter con jQuery</title>
	<meta name="author" content="francesc ricart"/>
	<style>
	*{box-sizing:border-box;}
	#marquee{
		width:600px;
		padding:15px 30px;
		border:1px solid #252525;
		background-color:#f6f6f6;
		overflow:hidden;
		position:relative;
	}
	</style>
</head>
<body>
	
<div id="marquee"></div>

<script src="https://code.jquery.com/jquery-3.4.1.min.js"integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="crossorigin="anonymous"></script>

<script>
// escribe aquí tu código jquery
</script>

</body>
</html>

Solución del ejercicio

El ejercicio se resuelve mediante la instrucción .animate()

Para que esta instrucción funcione es muy importante que la caja tenga un posicionamiento relativo o absoluto.

De lo contrario la animación no surgirá efecto.

Por otro lado, se usa una función de nombre telepronter en lugar de la típica función anónima function(){}

Lo hacemos así para poder reutilizar la función en el callback de .animate() .

De este modo conseguimos un bucle sin fin.

En el código puede observarse como se crea un nodo mediante la instrucción createElement() de javascript puro. (Me parece mucho más de entender fácil así).

El código resultante se llama con la función jQuery $() a la que insertamos html y css mediante sendas instrucciones jQuery.

La instrucción white-space sirve para que el párrafo tenga una única línea.

El position relative es imprescindible para que el método animate() funcione.

<script>
$(document).ready(telepronter)

function telepronter(){
	var contenidoMarquee = "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis cum laborum quam voluptates magnam adipisci, eaque eum quo ipsam voluptatem accusantium molestiae quia nihil architecto, praesentium delectus aperiam qui maiores.";
	nodoAnimado = document.createElement("p");
	$(nodoAnimado).html(contenidoMarquee);
	$(nodoAnimado).css({
		"white-space":"nowrap",
		"position":"relative"
	})
	$("#marquee").html(nodoAnimado);
	$(nodoAnimado).animate({
		"left":"-900px"
	},20000,telepronter)
}

</script>

Para hacer que el desplazamiento sea vertical y no horizontal basta con comentar la línea //"white-space":"nowrap", y left por top.

El tiempo del animate a 30s se debe a que así conseguimos que el texto pase a una velocidad adecuada para leer.

¡Hola!

Querido lector,

Deseo que este ejercicio jquery te haya sido de utilidad. ¿Como lo resolverías con javascript puro?

¡Si te ha gustado este contenido te animo a seguirme en mi perfil de empresa de Linkedin!

¿Te ha gustado esta publicación?

¡Valora sobre 5 estrellas esta publicación!

Puntuación media / 5. Votos:

Todavía no hay votos. Sé el primero en valorar la entrada.

Si te ha gustado este contenido...

¡Sígueme en las redes!

Vaya, parece que hay puntos a corregir

¿Me ayudas a mejorar?

Francesc Ricart
hola@francescricart.com

Aprender y enseñar. Enseñar y aprender. En el ámbito docente soy docente ocupacional. En el ámbito profesional consultor web. Ofrezco servicios de mejora continua y mantenimiento web. ¿Qué quieres aprender hoy? Encontraréis más acerca de mi en la página sobre mi

No hay comentarios

Escribir un comentario

  Acepto la política de privacidad

Responsable: FRANCESC RICART MUÑOZ.

Finalidad: Gestionar los comentarios que realizas en este blog.

Destinatarios: No se cederán datos a terceros, salvo obligación legal.

Derechos: Tienes derecho a acceder, rectificar y suprimir los datos, así como otros derechos, como se explica en la política de privacidad.