JMiur [E]

Este script ha aparecido como una novedad en varios sitios, entre otros, lo he visto en Cosas Sencillas. Se trata de Scrollovers, un efecto muy original para los enlaces.
ESTE ES UN EJEMPLO

OTRO EJEMPLO

OTRO EJEMPLO

OTRO EJEMPLO

Es muy simple de implementar y es compatible con la mayoría de los navegadores, Firefox, Internet Explorer, Opera pero, si lo vamos a utilizar en Blogger, es muy probable que nos encontremos con alguna dificultad.

Lo primero que debemos hacer es descargar el archivo scrollovers.js (eventualmente, también podemos enlazarlo) y lo incluimos dentro del HEAD de la plantilla, por ejemplo, justo antes de la etiqueta </head>.

Si queremos utilizar el archivo original, lo enlazamos directamente y agregamos:
<style type="text/css">
/* aquí incluiremos las definiciones de estilo del efecto */
</style>
<script type="text/javascript" src="http://www.scrollovers.com/js/scrollovers.js"></script>
Si lo descargamos y lo subimos a un servidor propio agregaremos:
<style type="text/css">
/* aquí incluiremos las definiciones de estilo del efecto */
</style>
<script type="text/javascript" src="URL/scrollovers.js"></script>
En ambos casos, deberemos incluir las definiciones de estilo de las clases que crearán el efecto. Básicamente son dos:
/* estilo del enlace normal */
a.scrollover {
color: #0CFFF5 !important; /* color del texto */
word-wrap: normal;
}
/* estilo del enlace over */
a.scrollover em:first-line {
color: #0C8AFF !important; /* color del texto */
}
Utilizando estos valores, ESTE ES EL RESULTADO que obtendremos.

Si se compara esto con el código original, se verán dos diferencias.

Primero, el agregado de la instrucción !important para forzar el cambio de estilo en los enlaces porque esas propiedades ya están establecidas en la plantilla y debemos hacer que estas, que las modifican, prevalezcan sobre aquellas.

Lo segundo es el agregado de la propiedad word-wrap. Esta, es una propiedad CSS exclusiva de Internet Explorer que establece si se corta una línea de texto cuando esta excede el ancho disponible. En las plantillas de Blogger, es usual que los bloques main-wrapper y sidebar-wrapper tengan establecida esta propiedad:

word-wrap: break-word; /* fix for long text breaking sidebar float in IE */

si no restablecemos esta propiedad a su valor normal, el efecto no se verá bien en Internet Explorer:
UN EJEMPLO

Para utilizarlo en muestro blog, empleamos la clase y el tipo en los enlaces donde queramos aplicar el efecto:
<a href="URL_enlace" class="scrollover" type="scrollover">
TEXTO DEL ENLACE
</a>
No es necesario tener un efecto único. Podemos crear todos los que queramos. Para esto, debemos utilizar clases diferentes, dándoles diferentes nombres. Por ejemplo:
a.scrollover_1 {color:#AAAAC0 !important; word-wrap: normal;}
a.scrollover_1 em:first-line {color:#00FF00 !important;}

a.scrollover_2 {color:#FF0000 !important; word-wrap:normal;}
a.scrollover_2 em:first-line {color:#8080C0 !important;}

Las propiedades de las clases pueden ampliarse, algunas serán útiles y otras habrá que probarlas en cada plantilla. Por lo general, podemos incluirlas en el estilo de enlace normal. Por ejemplo:
a.scrollover {
color: #000000 !important;
word-wrap: normal;
font-size: 1.2em; /* tamaño del texto */
font-family: Georgia; /* tipo de fuente */
background: transparent url(una_imagen) repeat-x; /* fondo */
padding: 2px 0 4px 5px; /* márgenes */
}
a.scrollover em:first-line {
color: #FFFFFF !important;
}
UNA CLASE ESPECIAL
  • Enlace 1
  • Enlace 2
  • Enlace 3
  • Enlace 4
  • Enlace 1 | Enlace 2 | Enlace 3 | Enlace 4 | Enlace 5 | Enlace 6

    Me adelanto a alguna pregunta.

    Si bien se dice que funciona en todos los navegadores, varias horas de intentos e idas y vueltas en Blogger hacen que tenga ciertas reservas. En Firefox no parece haber problemas .

    En Internet Explorer las cosas son un poco complicadas y no tengo muchas respuestas. Todo lo que he podido hacer ha sido siempre laborioso, probando el tipo de fuente y el tamaño adecuados. Muchas veces, el texto se corta, queda un poco abajo, ocultándose un par de pixeles.

    En Opera la cosa es peor, a veces funciona y a veces no.

    Resumiendo: un efecto interesante pero hay que usarlo con cuidado, experimentar y encontrar los valores adecuados.

    12 comentarios:

    Edward Yanquen  

    Un Muy Buen Efecto que hace de nuestra navegación por una pagina una experiencia diferente pero que debe usarse con cuidado según el tipo de tematrica que manejemos

    Responder
    JMiur  

    Es cierto. Como cualquier otro efecto, no es más que una herramienta y debe usarse "prudentemente" :)

    Responder
    Gem@  

    Lo vi el otro día en Xyberneticos, lo encontré muy vistoso.

    Responder
    mithbuster  

    Muy bueno el blog! seguir asi

    usaremos vuestros trukillos jaja

    Responder
    JMiur  

    Gema: sí es vistoso, esa palabra es justa. Más allá de sus problemas técnicos y sus limitaciones, no sé si lo usaría, depende de donde.

    mithbuster: gracias por el comentario. Es bueno eso de probar trucos, permite aprender un poco de todo y, de vez en cuando, encontrar algo que nos sirva.

    Responder
    Fede  

    Estem... Ví el efecto en los feeds, pero desde la pagina no puedo.. :S

    Pero lo que ví, está bueno.. Aunque si llenás una página de ese tipo de enlaces... No se si es molesto.. Creo que ya pasaría a ser insoportable

    Responder
    JMiur  

    Parece que la opinión es unánime. Muy lindo, muy original, pero no lo usaría.

    Es cierto :)

    Responder
    WWW.ESPACIOFOTOGRAFICO.BIZ  

    Hola me gustaría saber como has conseguido que se vean los comentarios en el blog.
    Yo estoy intentando hacer lo mismo en el mio espaciofotografico.blogspot.com gracias

    Responder
    JMiur  

    Explícame un poco a que te refieres porque no termino de entenderlo.
    Si quieres, puedes envíame un mail a vagabundia@gmail.com.

    Responder
    JaGo!  

    No funciona con Firefox en Linux (Kubuntu Feisty)

    Responder
    JMiur  

    Realmente no lo había notado pero, es muy posible.

    Responder
    HaCk CrAcK  

    ¿Cual es el efecto, solo veo enlases normales, uso la ultima version de fiefox... tendia que funcionar no?, o no funciona la direccion de alojamiento del scrip que usas?

    Responder
     
    CERRAR