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:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
$("body").css("z-index", "-10");
$("body").fadeIn(0);
$("a").click(function(event){
event.preventDefault();
linkLocation = this.href;
$("body").fadeOut(1000, redirectPage); });
function redirectPage() {
window.location = linkLocation;
}
});
//]]>
</script>
<style>
html {
background-color: #f2f2f2; /* Color del desvanecimiento */
}
</style>
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?
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
No hay comentarios:
Publicar un comentario