Efecto de desvanecimiento al cargar el blog
Efecto fade al cargar las páginas del blog. Utilizando jQuery. También incluimos una animación de carga.
En este tutorial veremos cómo aplicar un efecto fade al cargar el blog. Desde otro punto de vista también podemos decir que creamos una ventana de carga que oculta el contenido del blog hasta que éste se cargue por completo. El truco es muy sencillo sólo creamos un contenedor que oculte todo el blog, y con Javascript (mejor dicho: jQuery) le ordenamos que desaparezca, luego de finalizar la carga, y que aparezca, al ingresar a un enlace.
La idea y gran parte del código lo obtuve de esta entrada de Ciudad Blogger, pero tuve que modificar algunas cosas para que no sea el body quien se oculte, sino que la ventana de carga se pose sobre el mismo para ocultarlo.
En caso de ya tenerlo, no pegues nada ;)
Ahora continuemos con el HTML (antes de </body>) y el CSS (antes de }]]></b:skin>).
HTML
<div id='Cargando'/>
CSS
#Cargando { position: fixed; top: 0; left: 0; width: 100%; height: 100%; min-height: 100% !important; overflow: hidden; z-index: 99999; background: url(http://3.bp.blogspot.com/-WUTROUz9VWg/ULEWxvCiVqI/AAAAAAAABgU/ZX9UXjIihzE/s30/cargando-spinner.gif) no-repeat center center, #FFCEAC; }
html { background-color: #FFCEAC; }
En el código CSS he marcado con naranja la URL de la imagen de carga, que puedes crear con Preloaders.net, y con azul el color del desvanecimiento.
Sigamos con la parte más importante, el jQuery. Agrega esto después del framework (el código para instalar jQuery):
<script type='text/javascript'> //<![CDATA[
$(function() { $("a[href^='http://miblogde']").click(function(event){ event.preventDefault(); linkLocation = this.href; $("#Cargando").fadeIn(500, redirectPage); });
function redirectPage() { window.location = linkLocation; } });
window.onload = function() { $('#Cargando').fadeOut(500); }
//]]> </script>
Muy importante, debes cambiar lo que está en rojo por al menos el primer fragmento de la URL de tu blog, o si prefieres el link completo. Esto permitirá que sólo se aplique el desvanecimiento en los links internos, y podremos utilizar el Lightbox de Blogger para ampliar las imágenes, algo que causaba conflictos con el script de Ciudad Blogger.
Los valores en color verde son la velocidad del desvanecimiento, el primero, al abandonar la página actual, y el segundo, el desvanecimiento luego de la carga.
Con el siguiente enlace puedes acceder a un demo del truco. Es todo, gracias :D
Demo
Hey amigo genial tu aporte pero tengo una pregunta como puedo adaptarlo a que después de un inicio de sesión correcto de un usuario a una pagina haga este efecto y cargue su perfil ??? estaré pendiente a tu repuesta :)
ResponderEliminar