lunes, 16 de abril de 2012

Transiciones suaves entre páginas web con Jquery (Fade Out)

Un efecto que a muchos les gustaría agregar en sus páginas webs, es un efecto de desvanecimiento o de transición entre páginas conocido con Fade-In y Fade-Out, para este tutorial usaremos  la librería Jquery 1.4.1 para lograrlo, esto también funciona en Blogger.

Este tutorial es bastante sencillo de hacer, solamente debemos agregar entre <head> y </head> los dos siguientes scripts para luego a los enlaces que queramos aplicar una transición les aplicamos la clase transición como <a class="transicion" href="sitio.com">texto</a>:
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {
$("body").css("display", "none");
    $("body").fadeIn(0);
 
$("a.transicion").click(function(event){
event.preventDefault();
linkLocation = this.href;
$("body").fadeOut(1000, redirectPage); });
function redirectPage() {
window.location = linkLocation;
}
});
</script>
*Para el caso de Blogger no se olviden poner justo despues de <script type='text/javascript'> el fragmento:
//<![CDATA[
Y justo antes de ;</script>
//]]>
En la parte de CSS de la página agreguen la siguiente regla
html {
background-color: #333 /* pon el mismo color de fondo que en body */
}
Jugando con las reglas CSS

Por defecto está ajustado para que todos los enlaces con una class de nombre "transicion" sean los únicos que hagan el efecto, pero hay otras maneras de usarlo para que sea más cómodo.

Como deben imaginarse usar una transición generan muchos problemas de usabilidad y usarlo todo el tiempo no es recomendable, así que solo a ciertos enlaces se les puede aplicar, por ejemplo, en Blogger si aplicamos este script digamos que en vez de la regla "a.transicion" (Ver lo marcado en amarillo), lo ponemos como "a" todos los enlaces harán una transición, incluso los enlaces de comentarios que impedirá.

Pero que tal si en vez de poner a cada enlace un class de transición, no aprovechamos las existentes, por ejemplo, en Blogger, la regla .post-body controla todo lo contenido dentro de la entrada de un blog, excluyendoel títulos, los comentarios y todo lo que esté fuera de esa sección.

El efecto consiste en un desvanecimiento entre páginas.
Si emplearamos esa regla podíamos cambiar "a.transicion" por ".post-body a" para que aplique el efecto a todos los enlaces dentro de .post-body, pero incluso esto puede dar problemas si hacemos tutoriales por ejemplo con Javascript.

Si queremos incluir varias secciones podemos hacer lo mismo que si incluyeramos varias reglas CSS por ejemplo ".post-body a, #PageList1 ul li a, #BlogList1 ul li a, #blog-pager a" de esa forma en un solo paso aplicamos las transiciones a las secciones que deseemos.

Como pueden apreciar es bastante práctico.

Controlando el tiempo
Para el tiempo veremos en el script la parte que dice fadeOut(1000, redirectPage); el valor 1000 equivale a 1 segundo disminuyan o aumenten el tiempo segun consideren oportuno.

Veran que el valor fadeIn está a 0, porque creo que el fade in (desvanecimiento de entrada) no funciona correctamente con todas las webs y hace demasiado larga la carga del sitio, pero si lo quieren probar no está de más hacerlo.

Ejemplo
Puede verlo funcionarlo en la siguiente web aplicado al menú principal, los enlaces de los post y los enlaces de navegación:
matiusboom.blogspot.mx
Es un desarrollo de la idea de onextrapixel.com, sin embargo sin el efecto de fade in.

Comentarios y Consultas

Los mensajes serán revisados a veces. No te olvides que soy una persona, no se trata de faltar al respeto, todos tenemos opiniones, no hay que enojarse.

Puedes marcar Notificarme para recibir la notificación de la respuesta.

5 comentarios:

  1. me aparece un error de sintaxis en
    $("body").css("display", "none");
    pero no se en donde se encuentra el error.

    ResponderBorrar
    Respuestas
    1. Si es blogger debes envolver el contenido del Script en:
      <script type='text/javascript'>
      //<![CDATA[

      contenido del script

      //]]>

      </script>

      Borrar
  2. Me gusta tu forma de pensar y de decirlas, he visto esta pagina por curiosidad pero veo que eres una persona dedicada, sigue adelante, tus aportes son muy valiosos. gracias

    ResponderBorrar
  3. hola,lo intente en dreamweaver y no me funciono, alguna alternativa?

    ResponderBorrar
  4. Mi problema es exactamente el contrario: he descargado una plantilla muy linda pero que tiene este efecto y me retrasa cerca de 10 segundos en cargar la página, como puedo hacer para eliminarlo? Gracias

    ResponderBorrar

El ascenso de Skywalker(2019)

Joker 2019Una película que ha roto a divido a los fans muchos culparán a sus director por querer reparar Los últimos Jedi, no es su culpa al final.

[Leer artículo...]

La Espada del Inmortal (2019

Blade of The Immortal (2019)La historia de Manji, un guerrero samurái sin señor que ha sido condenado con la inmortalidad...

[Leer artículo...]

Kemono Michi: Rise Up (2019)

Kemono Michi: Rise Up (2019)Del autor de Konosuba, Genzo Shibata es un luchador japonés que es transportado a un mundo de fantasía, quien está obsesionado con los seres peludos.

[Leer artículo...]

ELI (2019)de Netflix

ELI (2019)de Netflix Reseña y criticaPelícula lanzada directo a video que nos cuenta una historia que parecería sacada de la Dimensión desconocida.

[Leer artículo...]

  © Cgnauta | CGsign blog | [Ver Licencia de uso] | Matius Lenin, Creative Commons, algunos derechos reservados

Regresar ARRIBA  

Vistas desde Mayo 2009

▼/▲ Archivo del Blog

Visitas totales

Información

IBSN: Internet Blog Serial Number 01-77-94-2008

Esta plantilla es creada y diseñada por Matius Lenin para CGnauta blog. Con Scripts de JQuery bajo licencia GNU/GPL. CGnauta es una marca registrada propiedad de Matius Lenin.