En este artículo, crearemos texto de marquesina usando JavaScript. Este efecto se puede lograr usando la etiqueta <marquee> , pero la marquesina ha quedado obsoleta y los nuevos sitios web no usan esta etiqueta. Todavía algunos navegadores admiten esta etiqueta, pero para estar seguro, no debe usar esta etiqueta. Aquí está el ejemplo a continuación de cómo funciona la etiqueta de marca.
Ejemplo: En este ejemplo, usaremos la etiqueta de marquesina HTML .
HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>Marquee tag example</title> </head> <body> <marquee> GeeksForGeeks | A computer science portal for geeks </marquee> <br><br><br><br> <marquee direction="right"> GeeksForGeeks | A computer science portal for geeks </marquee> <br><br><br><br> <marquee direction="up"> GeeksForGeeks | A computer science portal for geeks </marquee> <br><br><br><br> <marquee direction="down"> GeeksForGeeks | A computer science portal for geeks </marquee> </body> </html>
Producción:
Nota: No use la etiqueta de marquesina dentro de su código porque está obsoleta y puede romper su código en el futuro.
Uso de Javascript: para evitar la desaprobación de la etiqueta de marquesina, puede implementar su propio código JavaScript para lograr este efecto. Primero, creamos un esqueleto HTML. Cree una etiqueta div y dentro de la etiqueta div cree algunas etiquetas < p > que contengan su texto.
Código HTML:
HTML
<!DOCTYPE html> <html> <body> <div id="main"> <p class="para" id="para1"> Geeksforgeeks | A computer science portal for geeks </p> <p class="para" id="para2"> This is another text </p> <p class="para" id="para3"> This is the third line of the example line of the example. </p> </div> </body> </html>
Código CSS: ahora agregue algo de CSS al código. Aquí, en el contenedor div (en el que residen todas las etiquetas <p>), oculta el desbordamiento (esto es necesario) y establece el color de fondo, el borde y el ancho de tu elección. Y en la etiqueta <p> debe haber tres propiedades necesarias : espacio en blanco , flotar y borrar. El espacio en blanco debe establecerse en nowrap , float en left y clear en both y otras propiedades de diseño de su elección.
CSS
<style>
#main{
border: 1px solid;
background: yellow;
width: 100%;
overflow: hidden;
}
.para{
color: black;
font-weight: bold;
white-space: nowrap;
clear: both;
float: left;
}
</style>
Código JavaScript: ahora la parte principal de agregar lógica para mover el texto. Lo que hacemos es disminuir la propiedad margin-left de los elementos <p>. Cuando el elemento se vuelve invisible, nuevamente asignamos el margin-left igual al ancho del elemento padre del elemento <p>. Este es el proceso paso a paso para implementar esta lógica.
- Cree una variable llamada elementWidth y asigne el offsetWidth del elemento <p>
- Cree un nombre de variable parentWidth y asigne el offsetWidth del elemento principal del elemento <p>.
- Crear variable de bandera e inicializarla con 0
- Cree un setInterval con una frecuencia de actualización de 10 milisegundos.
- En cada intervalo, disminuya el valor de la bandera y establezca ese valor en la propiedad margin-left.
- Si el valor negativo de la bandera es igual al ancho del elemento, establezca el valor de margin-left igual al ancho del padre.
Javascript
const para1 = document.getElementById("para1");
const para2 = document.getElementById("para2");
const para3 = document.getElementById("para3");
animate(para1);
animate(para2);
animate(para3);
function animate(element) {
let elementWidth = element.offsetWidth;
let parentWidth = element.parentElement.offsetWidth;
let flag = 0;
setInterval(() => {
element.style.marginLeft = --flag + "px";
if (elementWidth == -flag) {
flag = parentWidth;
}
}, 10);
}
Salida: Después de combinar las tres secciones anteriores, veremos algo como esto.
Publicación traducida automáticamente
Artículo escrito por _saurabh_jaiswal y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA