Efecto de desvanecimiento al cargar las páginas

En esta captura vemos la página desvaneciéndose tras hacer clic en un enlace. HAZ CLIC EN LA IMAGEN PARA VERLA EN GRANDE
En esta captura vemos la página desvaneciéndose tras hacer clic en un enlace. HAZ CLIC EN LA IMAGEN PARA VERLA EN GRANDE

Hola, bienvenidos de nuevo. Hoy os voy a enseñar a hacer que haya un efecto de desvanecimiento al cargar las páginas, es decir al navegar por las subpáginas de vuestra web. Puedes ver el código funcionando aquí. Prueba a navegar entre las páginas.

¿No te gusta que el navegador se quede en blanco mientras se carga la siguiente página? ¿Te parece cutre? Aquí tienes la solución: un desvanecimiento. Haz clic para ver el artículo.

Código para el head

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'> </script>   <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 type="text/css"> /*<![CDATA[*/ html { background-color: #f2f2f2; /* Color del desvanecimiento */ } /*]]>*/ </style>

 

Idea original extraída de CiudadBlogger

Pero, ¡atención! Cuando editas tu página Jimdo, el código también funciona por lo que si haces clic en un botón de la barra lateral, así que deberás entra a tu página en modo seguro. Lo puedes hacer siempre que quieras desde este enlace: http://a.jimdo.com/app/auth/signin/index/safemode/1. Arrástralo a tu barra de marcadores o guárdalo en favoritos si has decidido usar el código que te hemos dado. Como es evidente, no nos responsabilizamos de los usuarios que usen el código sin leer esta advertencia y luego no puedan editar su página.

Escribir comentario

Comentarios: 0