Inicio Desarrollo Web wrapScroll: Desplazamiento automático de DIV’s

wrapScroll: Desplazamiento automático de DIV’s

Haber, para entender esto mejor vamos a suponer que deseamos mostrar un aviso "importante" a nuestro navegantes y (debido a su importancia) queremos que ese aviso (dentro de un DIV) se mueva a medida que el usuario se desplaza verticalmente por la página. Bien, para ello existe una librería hecha en Javascript: wrapScroll.

Uso básico

Primero descargamos la librería, y ubicamos el archivo wrapscroll.js y lo referenciamos en nuestra página html.

 <script type="text/javascript" src="wrapscroll.js"></script>

Iniciamos el método wrapScroll donde indicaremos el div que se desplazara.

 <script type="text/javascript">
new wrapScroll("midiv");
</script>

Creamos un hoja de estilo con los siguientes valores. Nota: para la etiqueta body la propiedad height le colocamos el valor 1200px para poder ver el efecto del desplazamiento.

#midiv{
position:absolute;
top:100px;
border:3px dashed red;
width:200px;
height:150px;
}
body{
height:1200px;
}

Esta librería funciona con:

  • InternetExplore 6.x, 7.0 o sup.
  • Firefox 1.5, 2.0 o sup.
  • Opera 9.x o sup.
  • Safari 1.2 o sup., Safari3.0 para Windows

[ Descargar este ejemplo ]

Hemos explicado la forma básica de usar esta excelente librería, sin embargo podemos añadirle otras funciones adicionales, como se puede observar en los siguientes ejemplos: 1, 2, 3, 4 y 5

Programador y Desarrollador Web. Administrador de RibosoMatic y Proyecto Yupy. Blogger y entusiasta de la tecnología, internet, software y tutoriales para desarrollo de aplicaciones para la web ....