Un original efecto rollover para texto | Oloblogger En www.scrollovers.com han ideado un script para aplicar un simpático efecto para tus enlaces con un resultado que se puede ver en esta pág...

7 de octubre de 2008

Un original efecto rollover para texto

En www.scrollovers.com han ideado un script para aplicar un simpático efecto para tus enlaces con un resultado que se puede ver en esta página demo.

Como habrás podido comprobar, el enlace cambia de color al pasar por él, pero al mismo tiempo, hace un scroll vertical del texto, que queda como muy resultón.

Para poder usarlo, primero hay que instalar después de ]]></b:skin> el siguiente formato CSS y la llamada al script:

<style>
a.scrollover {color: #200091;}
a.scrollover em:first-line {color: #79001A;}
</style>
<script src='http://www.scrollovers.com/js/scrollovers.js' type='text/javascript'/>


El primer color (#200091) es el del enlace normal y el segundo (#79001A) el que se mostrará al pasar el cursor. Podeis cambiarlo sin problemas por los que se ajusten a vuestro diseño.

Una vez hecho lo anterior, sólo tendrás que añadir la clase y el tipo scrollover al enlace en que quieras que aparezca el efecto. El ejemplo del principio se ha redactado así:

<a href="URL_ENLACE" class="scrollover" type="scrollover">PRUEBA EL EFECTO AQUI</a>

Aunque me parece que ya queda bastante bien tal cual viene, también se pueden cambiar otros parámetros. Para eso teneis que modificar ciertas variables en el fichero scrollover.js:
  • scrollovers_ScrollSpeed: la velocidad con que se produce el scroll.
  • scrollovers_ScrollDownOnMouseOver: para invertir el sentido del movimiento, cambia a "false"
  • scrollovers_TypeName: si dejas esta variable con un entrecomillado vacío, no tendrás que indicar en el enlace el tipo scrollovers, porque se aplicará el efecto a todo tipo de enlace. Ojo con las imágenes.
Si haces esto, no tendrás más remedio que guardar el fichero modificado en tu propio alojamiento. En cualquier caso, es conveniente hacerlo por si desaparece la fuente original o simplemente por agilizar la carga. Puedes bajarlo desde este enlace.

No lo he probado, pero el autor comenta que es válido para Firefox 2.0, Internet Explorer 5.5-6-7, Safari 3 (Windows) Y Opera 9. A mí no me ha dado problemas en ninguno de los dos primeros.

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir
Copy URL

Y muchos más artículos interesantes si nos sigues en...

follow us in feedly

6 comentarios :

  1. Muchas gracias Oloblogger he implementado con éxito este efecto en mi blog

    saludos

    ResponderEliminar
  2. Tengo una duda, lo puse en un titulo de una entrada del blog como prueba, y el efecto está bien, lo unico es que a la hora de darle clic al titulo de la entrada no pasa nada, osea no lleva a la entrada sola. Entonces lo que hice fue que en el a href="#" en vez del # le puse el link de la entrada y todo bien, mi pregunta es si tendré que hacer esto cada vez que le ponga el efecto a alguna entrada, o si el código se pudiese poner el la plantilla para que automaticamente lo ponga con su respectivo link?

    Espero entiendas mi pregunta xD

    ResponderEliminar
  3. Así es Jocesitohp. El símbolo # hay que sustituirlo por la dirección del enlace. No lo mencioné.

    Por otra parte, al tratarse de una clase, sí que tendrás que ponerla una a una en los enlaces que te interesen. Se trata de un efecto para destacar ciertos enlaces, no todos los de la página.

    ResponderEliminar
  4. bueeh, no todo es perfecto xD gracias Oloman =D

    ResponderEliminar
  5. Hola Oloman quisiera hacerte una pregunta aparte del tema: ¿Como haces para que cada vez que apoyes el puntero en un elemento aparezca un cuadro como este?: http://1.bp.blogspot.com/_m9myEUCycrI/TJS8-HV-iUI/AAAAAAAAAcI/2IBRh_yuzCA/s1600/cuadroama.png

    ResponderEliminar
  6. Facundo, sólo tienes que añadirle a la imagen del enlace las etiquetas alt="Texto" y title="Texto". Con la primera debería ser suficiente, pero no todos los navegadores la ejecutan igual, así que mejor ambas.

    ResponderEliminar