Elemento de marquesina en JavaScript
Principalmente requerimos decorar nuestro texto de contenido en un sitio web o página web. Marquee es una de esas características para embellecer la representación del contenido.
Si necesitamos desplazar el contenido automáticamente de arriba a abajo, de abajo a arriba, de izquierda a derecha y de derecha a izquierda, normalmente usamos la marquesina en nuestro código fuente. En este artículo, aprenderemos la etiqueta predeterminada de HTML y el código personalizado de JavaScript para implementar la marquesina.
Usar etiqueta de marquesina en HTML
En HTML, hay una etiqueta de marquesina para desplazarse automáticamente por el contenido web. De forma predeterminada, el contenido se desplazará de derecha a izquierda, pero podemos personalizar la dirección de desplazamiento (arriba, abajo, derecha, izquierda) como direction="up", pero esta etiqueta ha quedado obsoleta en HTML 5.
Código de ejemplo:
<html>
<head>
<title>Example for HTML Marquee Tag</title>
</head>
<h1>
Delft stack marquee tag example
</h1>
<marquee width="40%" direction="up" height="30%">
Delft stack is a best website to learn programming skills!
</marquee>
</html>
En el código fuente html anterior, usamos la etiqueta de marquesina HTML predeterminada en el contenido de texto. Personalizamos la dirección hacia arriba, altura y ancho definidos con CSS en línea.
Use JavaScript para agregar la función de marquesina
Podemos agregar la función de marquesina al contenido web usando JavaScript y J-Query con la ayuda de funciones personalizadas. Podemos desplazar el contenido en la dirección deseada usando las posiciones de alto y ancho.
Definimos la identificación del contenido que queremos animar y desplazar y pasar esas identificaciones a la función personalizada de una marquesina.
Código de ejemplo:
<html>
<head>
<title>Example for JavaScript Marquee</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</head>
<style>
#text{
cursor:pointer;
overflow:hidden;
position:absolute;
left:10px;
margin-right:10px;
top:10px;
}
</style>
<script>
function marquee(a, b) {
var width = b.width();
var start_pos = a.width();
var end_pos = -width;
function scroll() {
if (b.position().left <= -width) {
b.css('left', start_pos);
scroll();
}
else {
time = (parseInt(b.position().left, 10) - end_pos) *
(10000 / (start_pos - end_pos)); //we can increase or decrease speed by changing value 10000
b.animate({
'left': -width
}, time, 'linear', function() {
scroll();
});
}
}
b.css({
'width': width,
'left': start_pos
});
scroll(a, b);
}
$(document).ready(function() {
marquee($('#display'), $('#text')); //we need to add name of container element & marquee element
});
</script>
<h1 id="text" >
Delft stack is a best website to learn programming skills!
</h1>
</html>
Usamos J-Query Google CDN en el código fuente anterior para usar las funciones de J-Query. Incluya el enlace J-Query Google CDN dentro del encabezado de la fuente de la página HTML.
Hemos declarado una función de marquesina personalizada. Ayuda a animar y desplazar el contenido usando posiciones de alto ancho y CSS.
Usamos la etiqueta H1 para mostrar el contenido del texto y definir la ID para ese elemento HTML. Dentro de (document).ready(), pasamos una función de marquesina que tomará el ID del elemento como argumento y animará ese elemento HTML específico.