Usa transiciones CSS y jQuery en la carga de páginas de tu web
Cuando navegamos por Internet y visitamos nuestras páginas web preferidas, estamos acostumbrados a que al cambiar entre páginas haya un efecto brusco entre un apartado y otro, en el cual una página desaparece de golpe y a continuación carga la siguiente.
Con el plugin jQuery smoothState.js puedes darle a tu página web un conjunto de efectos que mejorará notablemente la experiencia del usuario al navegar por ella.
Qué necesitamos
- Biblioteca jQuery
- Fichero jquery.smoothState.js
Puedes descargar el plugin desde GitHub
Preparando el terreno
En primer lugar debemos hacer las llamadas a la biblioteca jQuery, al plugin smoothState.js y a nuestro fichero de funciones:
<!-- jQuery -->
<script src="//code.jquery.com/jquery-latest.min.js"></script>
<!—Fichero de funciones y plugin smoothState.js -->
<script src="js/functions.js"></script>
<script src="js/jquery.smoothState.js"></script>El HTML
El contenido principal de la página debe estar dentro de una caja con un id. Cada una de las páginas ha de tener las mismas llamadas y lo que cambia entre ellas es el contenido de esta caja. Por ejemplo:
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Home</title>
</head>
<body>
<!-- Caja principal con id “main” -->
<div id="main">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
</ul>
<!-- Contenido la página... -->
</div>
<!-- Scripts -->
<script src="jquery.js"></script>
<script src="jquery.smoothState.js"></script>
<script src="functions.js"></script>
</body>
</html>Empieza la acción
La llamada al plugin la haremos desde nuestro fichero de funciones functions.js, de la siguiente manera:
;(function ($) {
$('#main').smoothState();
})(jQuery);Con esto, ya habremos conseguido que el cambio entre páginas sea instantáneo desde el punto de vista del usuario. Ahora hace falta añadir transiciones CSS para darle efectos a la navegación entre páginas.
En primer lugar, deberemos darle una clase al contenido que queramos animar. Por ejemplo:
<div class="elemento_animado transicion--fadein">
<!-- Contenido animado -->
</div>Y en nuestro fichero CSS deberemos poner:
.elemento_animado {
animation-duration: 0.25s;
transition-timing-function: ease-in;
animation-fill-mode: both;
}
.transicion--fadein {
animation-name: fadeIn;
}Y a continuación, en el mismo CSS (o en uno aparte) tenemos que definir el keyframe:
@keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
}Este es un ejemplo muy básico. Transiciones CSS hay muchas y no es objetivo de este post explicarlas. Si te interesa conocer más tipos de transiciones, puedes consultar y usar la biblioteca definida por Daniel Eden.
Antes de que tu transición funcione, deberemos modificar el código js de la llamada al plugin. Tendremos que sobrescribir un determinado método (más adelante se explican otros) para determinar cuándo aplicar la transición. En este caso, vamos a sobrescribir el método onStart, así que la llamada al plugin ahora deberá quedar así:
;(function($) {
'use strict';
var $body = $('html, body'),
content = $('#main').smoothState({
// Sobreescribimos el método onStart
onStart: {
duration: 250, // Duración de la animación
render: function (url, $container) {
// toggleAnimationClass() es una clase pública
// para reiniciar la transición CSS con una clase
// y aplicar el efecto inverso al salir de la página
content.toggleAnimationClass('is-exiting');
// Hacemos scroll al principio de la página
$body.animate({
scrollTop: 0
});
}
}
}).data('smoothState');
//.data('smoothState') es para habilitar los métodos públicos
})(jQuery);Ahora sí, al navegar entre tus páginas el contenido aparecerá con el efecto de la transición FadeIn.
Parámetros personalizados
- prefetch: desde que un usuario se pone encima de un enlace y hace clic en el mismo, suele haber un retraso de entre 200 y 300 milisegundos. Si le damos valor true a este parámetro, el plugin empezará a precargar el contenido de la URL dentro de ese intervalo de tiempo
- blacklist: string donde hemos de poner los selectores jQuery para esos enlaces que queramos que sean ignorados por el plugin. Por defecto, smoothState.js ignora los enlaces con la clase .no-smoothstate
- development: valor booleano, por defecto false. En caso de ser true, se muestran posibles errores en la consola si algo sale mal en el procesamiento de información del plugin
- pageCacheSize: el plugin guardará las páginas en la caché si el valor de este parámetro es superior a 0
- onStart: método que se ejecuta cuando se ha hecho clic a un enlace
- onProgress: método que se ejecuta en caso de que la página todavía se esté pidiendo al servidor y el método onStart haya terminado
- onEnd: método que se ejecuta cuando el contenido ya está listo para ser cargado en la página
- callback: método que se ejecuta cuando el nuevo contenido ya ha sido insertado en la página
El plugin tiene algunos métodos y propiedades más. Puedes consultar toda la documentación en su página oficial de GitHub.
Ahora solo te queda dejar correr la imaginación y crear tu web con varios efectos. Nosotros hemos aprovechado este plugin para digitalizar nuestro dosier de servicios. Échale un ojo y descubre lo que puedes conseguir.
Ver demo
