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.
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!
Deja una respuesta