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:
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í:
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:
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.
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'/>
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.
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.
Y muchos más artículos interesantes si nos sigues en...
Muchas gracias Oloblogger he implementado con éxito este efecto en mi blog
ResponderEliminarsaludos
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?
ResponderEliminarEspero entiendas mi pregunta xD
Así es Jocesitohp. El símbolo # hay que sustituirlo por la dirección del enlace. No lo mencioné.
ResponderEliminarPor 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.
bueeh, no todo es perfecto xD gracias Oloman =D
ResponderEliminarHola 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
ResponderEliminarFacundo, 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