Ir al contenido principal

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.

Buenas :)
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.


Antes de empezar, debes tener instalado en tu plantilla jQuery, pegando la siguiente línea antes de </head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js' type='text/javascript'/>

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
Invitame un café en cafecito.app

Comentarios

  1. Anónimo14/10/13

    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

Publicar un comentario

Más leído

Galería de Imágenes Simple, con Javascript y CSS

Efecto fade al cargar las páginas del blog. Utilizando jQuery. También incluimos una animación de carga.

¡Hola! Ya extrañaba escribir en mi blog. Vuelvo con esta genial galería de imágenes que es muy fácil de insertar y es súper simple. Sólo es necesario insertar el HTML, y decorarlo un poco con CSS, veamos: <div id="galeria"> <div id="galeria_imagen"> <img id="imgGaleria" src=" URL-IMAGEN-POR-DEFECTO " /></div> <div id="galeria_miniaturas"> <img class="miniatura" onclick="javascript:document.getElementById('imgGaleria').src=this.src;" src=" URL-IMAGEN-1 " /> <img class="miniatura" onclick="javascript:document.getElementById('imgGaleria').src=this.src;" src=" URL-IMAGEN-2 " /> <img class="miniatura" onclick="javascript:document.getElementById('imgGaleria').src=this.src;" src=" URL-IMAGEN-3 " /> <img class="miniatura" onclick="javascript:document.getEle

Ventana flotante con botón cerrar

Efecto fade al cargar las páginas del blog. Utilizando jQuery. También incluimos una animación de carga.

Esto será algo muy útil cuando debas dejar algún mensaje o aviso para tus lectores. Se trata de una ventanita, con apariencia similar a las de Windows, que es flotante y tiene la opción de cerrar con un efecto fade utilizando un botón. Insertarla es muy simple, sólo pega este código en un gadget HTML/Javascript y puedes cambiar algunos valores para personalizar la ventana a tu gusto. <div id='ventana-flotante'>    <a class='cerrar' href='javascript:void(0);' onclick='document.getElementById(&apos;ventana-flotante&apos;).className = &apos;oculto&apos;'>x</a>    <div id='contenedor'>        <div class='contenido'> Aquí va el mensaje.        </div>    </div> </div> <style> #ventana-flotante { width: 360px;   /* Ancho de la ventana */ height: 90px;   /* Alto de la ventana */ background: #ceffad;   /* Color de fondo */ position: fixed; top: 200 px; left: 50%;

Tabs, menú de contenidos con pestañas. Versión CSS

Efecto fade al cargar las páginas del blog. Utilizando jQuery. También incluimos una animación de carga.

Seguro conocerás este sistema de pestañas, que nos permite mostrar de manera alternativa distintos contenidos en un mismo espacio. Hay distintas versiones como con jQuery , o utilizando CSS, más específicamente la pseudoclase :target . Aquí veremos como obtener un resultado similar, pero utilizando la pseudoclase :checked. Comencemos con la estructura. <div id="contenedor">     <input id="tab-1" type="radio" name="radio-set" class="tab-selector-1" checked="checked" />     <label for="tab-1" class="tab-label-1"> Pestaña1 </label>         <input id="tab-2" type="radio" name="radio-set" class="tab-selector-2" />     <label for="tab-2" class="tab-label-2"> Pestaña2 </label>         <input id="tab-3" type="radio" name="radio-set" class="tab-selector-3" />    

Efecto biselado con CSS

Efecto fade al cargar las páginas del blog. Utilizando jQuery. También incluimos una animación de carga.

Utilizando CSS, podemos crear un efecto de biselado para utilizar en botones, mensajes, contenedores o lo que se les ocurra. Veremos 2 formas de aplicar este efecto, una utilizando bordes y otra implementando la propiedad box-shadow . Con los bordes, encontraremos una forma más tradicional que nos permite que los bordes inferior y lateral derecho sean más oscuros simulando relieve. HTML <div class="biselado"> Texto </div> Hola, soy un cuadro con outset. .biselado { background: #2323ff ;   /* Fondo, debe ser más claro que el borde */ border: 5px outset #4444ff ;   /* Grosor del Borde */   /* Color del Borde */ color: white ;   /* Color del texto */ text-align: center ;   /* Alineación del texto */ text-shadow: -1px -1px rgba(0,0,0,.2); } O podemos lograr el efecto contrario, reemplazando la palabra outset que se encuentra antes del color del borde por inset . Hola, soy un cuadro con inset. Veamos ahora una manera más efectva de simul

Botón circular 3D realista con CSS

Efecto fade al cargar las páginas del blog. Utilizando jQuery. También incluimos una animación de carga.

El secreto está en la propiedad box-shadow . Luego border-radius para darle forma y ya lo obtenemos. See the Pen Botón tridimensional realista. by Lucas Maidana ( @LucasMaidana ) on CodePen . El HTML típico de un botón. <a class='boton' href='URL-DEL-BOTON'></a> Y el CSS. .boton {   background: url( http://www.ashleyjt.net/windows/images/Android.png )  /* Url de la imagen */  no-repeat center center, #62BC0F /* Color del botón */ ; background-size: 60%;  /* Tamaño de la imagen */   height: 200px;   /* Alto del botón */   width: 200px;   /* Ancho del botón */   display: table;   border-radius: 100%;   cursor: pointer;     box-shadow: /* Sombras externa */ inset 0 10px 15px rgba(255,255,255,.35), inset 0 -10px 15px rgba(0,0,0,.05), inset 10px 0 15px rgba(0,0,0,.05), inset -10px 0 15px rgba(0,0,0,.05), /* Sombra interna */ 0 5px 20px rgba(0,0,0,.1); } /* Al presionar */ .boton:active {   box-shadow: inset 0 5px 30px rgba(0,0,0,.2);  /* S

Texto con borde

Efecto fade al cargar las páginas del blog. Utilizando jQuery. También incluimos una animación de carga.

¿TEXTO CON BORDE? ¿Posible hacerlo sólo con CSS? SI ES POSIBLE NOTA : Esta propiedad no es compatible con todos los navegadores. Se recomienda Chrome o Firefox. Para lograrlo, debemos aplicar la propiedad text-shadow  para lograr muchas sombras del mismo color simulando un sólo borde. A <div class="texto1"> Texto </div> le aplicaremos: .texto1 { color:white;   /* Color del texto */ text-shadow: 1px 1px 0 blue ,                   -1px -1px blue ,                    1px -1px blue ,                   -1px 1px blue ,                    0 1px blue ,                    1px 0 blue ,                   -1px 0 blue ,                    0 -1px blue ; } Puedes cambiar blue por el color que desees. Aquí mas ejemplos. borde .texto2 { color:#AAFFB1; background:#AAFFB1; padding:20px 80px; text-shadow: 1px 1px 0 #2F7235, -1px -1px #2F7235, 1px -1px #2F7235, -1px 1px #2F7235, 0 1px #2F7235, 1px 0 #2F7235, -1px 0 #2F7235, 0 -1px #2F7235; } texto .