Scrollovers: Links con scroll
- 11/08/2007
- 9:35 am
Scrollovers en un script que permite agregar un efecto de scroll a tus enlaces HTML, todo ello utilizando un javascript y css para definir las propiedades de los dos estados del enlace. Puedes ver un ejemplo de su funcionamiento en scrollovers.html
Veamos como se implementan los scrollovers, lo primero es descargar el script scrollovers.js, luego de ello adjuntamos el script a nuestra página de la siguiente forma.
-
<script type="text/javascript" src="scrollovers.js"></script>
Lo siguiente es crear dos estilos en donde se definirán las propiedades de los dos estados del enlace, por ejemplo creamos un estilo con los dos estados en color rojo y azul.
-
/* estado normal */
-
a.scrollover {
-
color: #557AFF;
-
}
-
/* estado over */
-
a.scrollover em:first-line {
-
color: #FF5B3C;
-
}
El tercer paso es aplicar este estilo a nuestros enlaces, esto es le asignamos el estilo creado y ademas le agregamos la propiedad type con valor igual a scrollover, de la siguiente forma:
-
<a href="home.php" class="scrollover" type="scrollover">Home</a>
Sencillo de implementar y muy vistoso, si bien es cierto son llamativas al abusar de ellas puedes hacer lenta la visualización de las mismas. Por otro lado si eres usuario de Blogger y deseas implementar este script puedes leer Vagabundia para un análisis detallado.
Posts Relacionados
- Snap Preview Anywhere™
- Showcase: Club del Pensionista
- Javascript Smooth Scroll
- Convertir HTML a PDF con PHP
- Showcase: Greenpoint
