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 comments:
Post a Comment