" Cuando hablamos de 'scroll' nos referimos al movimiento de un texto, grafico o contenido de un videojuego que se desplaza en horizontal, vertical o ambos por la pantalla. "
En HTML esto se puede hacer con la etiqueta llamada marquesina o <marquee> pero le falta alguna opción sofisticada, el movimiento puede ser algo brusco y con el nuevo HTML5 pasa a estar obsoleta.
He creado una rutina de 'scroll' simple para agregarla en alguna pagina que estemos realizando, se pueden combinar varios 'scrolls' para hacer efectos interesantes.
Para que funcione tendremos que darle un nombre de identificador en CSS, añadir el 'scroll' a una clase llamada 'Scroll' en Javascript y por ultimo declararlo en HTML para que lo muestre.
Empezamos creando en CSS un nombre de identificador cualquiera por ejemplo 'scroll1' para el contenedor que albergara el texto.
Seguidamente ponemos otro nombre de identificador para una etiqueta <span> que albergara el texto a mover.
Debe quedar asi:
#scroll1
{
width:300px;
background: #cccccc;
direction: ltr;
}
#scroll1Frase
{
font-style: italic;
font-weight: bold;
font-size: 200px;
font-family: Arial, sans-serif;
}
Se puede ver que en #scroll1 declaramos el sentido en el que se movera el texto que será de derecha a izquierda con 'ltr' para hacerlo de izquierda a derecha simplemente se modifica con 'rtl'. En #scroll1Frase declaramos el formato de texto.
Luego creamos el código JavaScript que nos moverá el texto:
function Scroll(nombre)
{
this.id=nombre;
this.avanza=avanza;
this.anchoContenedor=document.getElementById(this.id)
.parentNode.offsetWidth;
document.getElementById(this.id)
.parentNode.style.overflow="hidden";
document.getElementById(this.id)
.parentNode.style.whiteSpace="nowrap";
document.getElementById(this.id)
.parentNode.style.textIndent="0px";
this.el=document.getElementById(this.id).parentNode;
this.as=this.el.getElementsByTagName("span");
this.xo=this.anchoContenedor;
this.contenido=this.as[0].innerHTML;
this.anchoTexto=this.as[0].offsetWidth;
this.dif=this.as[0].offsetWidth-this.xo;
}
function avanza(velocidad,modo)
{
this.as[0].parentNode.style.textIndent=""+this.xo+"px";
if (this.anchoTexto>this.anchoContenedor)
{
if (modo==0)
{
if (this.xo<=-this.dif)
this.as[0].innerHTML=this.contenido+this.contenido;
if (this.xo<=-this.dif-this.anchoContenedor)
{
this.as[0].innerHTML=this.contenido;
this.xo=0;
}
}
if (modo==1)
if (this.xo<=-this.dif-this.anchoContenedor)
this.xo=this.anchoContenedor;
if (modo==2)
if (this.xo<=-this.dif-this.anchoContenedor)
{
this.xo=this.xo-velocidad;
velocidad=0;
}
}
else
{
if (modo!=2)
if (this.xo<=-this.anchoTexto)
this.xo=this.anchoContenedor;
else
if (this.xo<=-this.anchoTexto)
{
this.xo=this.xo-velocidad;
velocidad=0;
}
}
this.xo=this.xo-velocidad;
}
window.onload=function()
{
var scroll1= new Scroll('scroll1Frase');
window.setInterval( function (){ scroll1.avanza(5,0) }, 10 );
// 5=salto o velocidad en pixels, 10=msg.
}
Como se puede ver en la parte de codigo de carga en 'window.onload' hemos creado una clase Scroll y luego un objeto de esa clase llamado 'scroll1' en este caso coincide con el nombre declarado en la parte de CSS pero no tiene porque ser igual. En el constructor de la clase tenemos que poner el nombre del identificador de la etiqueta <span> que contendrá el texto. En nuestro caso se llamara 'scroll1Frase' como lo habíamos escrito en CSS.
Con 'window.setInterval' llamamos al método 'avanza()' de la clase Scroll que es el método que nos desplazara el texto.
El método avanza tiene dos parámetros:
El primer parámetro '5' el numero de pixels de desplazamiento.
El segundo parámetro puede ser 0,1 o 2.
0: Repite texto inmediatamente después de acabar.
1: Repite texto pero espera a que la frase acabe.
2: No repite texto.
El numero '10' en setInterval corresponde a una llamada cada 10 milisegundos.
Por ultimo escribiremos la parte de código en HTML que nos falta:
<div id="scroll1">
<span id="scroll1Frase" >
Esto es una prueba de texto que se desplaza.
</span>
</div>
IMPORTANTE: Se tendra siempre que crear un contenedor <div> con identificador y dentro solo una etiqueta <span> con identificador para cada texto en movimiento, sino el resultado no será el esperado. Habrá que crear tambien un objeto nuevo para cada texto que se quiera desplazar por ejemplo scroll2, scroll3...
