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 son moderados serán revisados antes de publicarse.

Este no es un foro de adolescentes, no uses letras en vez de palabras completas como "q" en vez de "que", ni escribas tus mensajes en mayúsculas, se respetuoso con los demás, si no estás de acuerdo no comentes.

Una cosa es que no te guste una crítica, otra que uses un lenguaje inapropiado para demostrarlo. No me siento en la obligación de publicar ningún mensaje en específico o de leerlo entero si usas palabras altisonantes.

5 comentarios:

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

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

      contenido del script

      //]]>

      </script>

      Eliminar
  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

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

    ResponderEliminar
  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

    ResponderEliminar

Termina la serie Grimgar de Fantasía y Cenizas

Grimgar de Fantasía y Cenizas (2016)Llegó a su fin Grimgar de Fantasía y Cenizas luego de doce episodios.

[Leer artículo...]

One Punch Man OVA 4 (2016): Review y crítica

One Punch Man OVA 4 (2016): Review y críticaY llega una nueva adaptación de personajes del universo marvel, una divertida aventura espacial.

[Leer artículo...]

Gate: Segunda temporada (2016): Episodio 12 Final: Reseña y crítica

Gate: Segunda temporada (2016): Episodio 12 Final: Reseña y críticaLas aventuras de Itami y sus amigos llega a su fin con el rescate de Piña de las manos de Zorzal.

[Leer artículo...]

Desaparecida: Boku Dake ga Inai Machi (2016) Episodio 12 Final - Reseña y crítica del anime

Desaparecida: Boku Dake ga Inai Machi (2016)Satoru descubre al culpable de la trama, es el momento de enfrentarse y tendrá que dar todo de sí para cambiar su suerte.

[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.

Anexos

Bitacoras.com