Efecto scrollovers para nuestros links

Tweet

Este efecto nos permite sorprender cuando pasamos el ratón sobre un enlace, su implementación es muy fácil.

DEMO DEL EFECTO

Nos bajamos este fichero y lo subimos en nuestra web de alojamiento.

Editamos nuestra plantilla HTML y antes de añadimos

<style>
a.scrollover {
/* Color del enlace */
color: #557AFF;
}
a.scrollover em:first-line {
/* Color del enlace al pasar el raton */
color: #FF5B3C;
}
</style>

<script type="text/javascript" src="URL ALOJAMIENTO/scrollovers.js"></script>

Donde indico Color del enlace podemos seleccionar el color que queramos que tenga el texto del enlace por defecto. En Color del enlace al pasar el ratón seleccionamos el segundo color del efecto.

Para usar el efecto debemos añadir a la url del enlace class="scrollover" type="scrollover" , quedaría de esta forma

<a href="URL DEL LINK" class="scrollover" type="scrollover"> NOMBRE DEL LINK </a>

A tener en cuenta: He notado que debemos dejar espacios en blanco delante y detrás de NOMBRE DE LINK para que no se distorsione el efecto.

► Esto lo aprendí de Scrollovers

Te recomendamos también

+ Artículos relacionados de Tutorial