Desvanecimiento al cargar página - BloggerS Look
BloggerS Look

INSPITATION AND CREATIVITY IN SOCIAL NETWORKS

Desvanecimiento al cargar página

Share This
Un efecto muy habitual en jQuery es el efecto fade que es un efecto de desvanecimiento, y podemos usarlo de tantas maneras como por ejemplo en la navegación del blog. El siguiente script hace justamente eso, carga la página con un efecto de desvanecimiento cuando navegamos en los enlaces internos que hay en el blog, como por ejemplo los títulos de las entradas, los enlaces de las etiquetas, los enlaces de navegación, archivo, etc.

Puedes ver un ejemplo en este blog de pruebas, haz click en el título de alguna entrada y verás el efecto de desvanecimiento al cargar la página.

Para poner este efecto de desvanecimiento en tu blog agrega después de <head> el siguiente código:



Guarda los cambios y listo. En color verde puedes ver dónde cambiar el color con el que se desvanece la página al cargar.

El script original oculta el body de la página mientras carga, yo he preferido cambiar esa propiedad por un z-index negativo para evitar problemas con los robots de los buscadores y que esto pueda efectar el posicionamiento.

¿Problemas?

Hay que considerar que este tipo de efectos podría reatrasar el tiempo de carga del blog, así que se recomendaría su uso sólo cuando el blog es rápido en cargar y no tiene tantos scripts.

Si ya usas otra versión de jQuery elimina las demás y deja sólo esta que es la que se leerá primero.

Si usas Mootools o Scriptaculous tendrás que hacerle unas modificaciones al código para que puedan ser compatibles.

Si tuvieras otro script con un efecto de desvanecimiento podría interferir con este y hacer que no se vea nada en la página excepto el color del desvanecimiento, en esos casos también es mejor prescindir de este script.

También puedes usar este efecto sólo en algunos enlaces, por ejemplo, si quieres que se aplique al hacer click en los títulos de las entradas, en los enlaces de navegación (entradas antiguas y entradas recientes), y en el gadget de Páginas, entonces cambia esta línea:

$("a").click(function(event){

Por esta:

$(".post-title a, .blog-pager-older-link, .blog-pager-newer-link, .tabs").click(function(event){

En algunos casos podrá cargar la página por un segundo y luego cargarla con el efecto de desvanecimiento, esto puede ser "normal" debido a que el navegador está tardando en leer el script al cargar la página.

Fuera de estos inconvenientes me parece que es una forma muy elegante de cargar las páginas del blog mientras navegamos por ellas, ¿no creen?

Vía | CGnauta
24 de octubre de 2012 Publicado por El Potro , Etiquetas: Efectos , Links 147 comentarios,
http://www.ciudadblogger.com/2012/10/efecto-de-desvanecimiento-al-cargar-las-paginas-del-blog.html

No hay comentarios:

Publicar un comentario

¡QUE NO SE PIERDAN TUS AMIGOS NINGUNA PUBLICACION!

MANDALES POR CORREO EL LINK DE ESTE BLOG PARA QUE NOS CONOZCAN

Share to Facebook Share to Twitter Email This Pin This Share on Google Plus Más...

Vistas de página en total