monitojoomla

Efecto scroll vertical con marquee

Viernes, 29 Julio 2011 | Escrito por Jhon Marreros Guzman

Detalles Tip - Nivel : Básico, Versión Joomla : Todas, Formato : Texto y Video.
En este tip veremos cómo usar la etiqueta html marquee para crear un scroll vertical y mostrarlo en nuestro sitio web Joomla a través de un módulo personalizado sin necesidad de usar una extensión.

En el siguiente video se muestra el uso de la etiqueta de marquesina o marquee para dar un efecto de scroll vertical en un módulo personalizado en nuestro sitio web Joomla

Generalidades

La etiqueta html marquee nos permite dar una animación básica al contenido que envuelve.

Sintaxis básica:

<marquee>texto que se mueve</marquee> 

Algunas propiedades importantes:

Width
Anchura de la marquesina.

Direction
Hacia donde queremos que se displace el contenido del marquee. posibles valores: right, left , up

Behavior
Es el comportamiento de la marquesina, de entre los posibles: scroll o alternate

Scrolldelay
Es el tiempo en milisegundos que tiene que pasar entre cada cambio de la posición de lo que hay desplazándose. A mayor cantidad más tardará en moverse

Scrollamount
Es la cantidad de pixeles que tiene que desplazarse el contenido de la marquesina. A mayor valor se saltará más cantidad e pixeles

Bgcolor
El color de fondo de la marquesina.

Código de la animación

A continuación se lista el código de ejemplo para realizar una marquesina vertical y con funcionalidad javascript

<p style="text-align:center;">
<marquee width="250" scrolldelay="0" scrollamount="2" bgcolor="orange" direction="up" onmouseout="this.start();" onmouseover="this.stop();" >
 <p style="text-align:center;font-family:arial;font-size:20px;color:white;line-height:30px;">
 Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos simplemente el texto de relleno
 </p>
</marquee>
</p>

Este código debe ser colocado en un módulo personalizado html en Joomla, se debe deshabilitar el editor en caso restrinja el uso de la etiqueta o de javascript.

Conclusión

El usar html para animaciones básicas nos ahorra la administración y mantenimiento de una extensión adicional, esto puede ser aplicado en ciertos proyectos en donde se requiera una animación básica tanto con texto como con imágenes.

• Ver Demo

Comparte este post