Transiciones de página hermosas y suaves con la API web de historial

En este tutorial vamos a construir un sitio web con páginas de transición bellamente suaves, sin la habitual actualización agresiva de la página. Navega a través de las páginas en la demostración para ver a qué me refiero.

Para lograr este efecto utilizaremos la API web de historial. En pocas palabras, esta API se utiliza para alterar el historial del navegador. Nos permite cargar una nueva URL, cambiar el título de la página y luego, al mismo tiempo, registrarla como una nueva visita en el navegador sin tener que cargar la página..

Esto suena confuso, pero abre una serie de posibilidades, como poder realizar transiciones de página más suaves y dar una sensación de rapidez que mejora la experiencia del usuario. Probablemente ya haya presenciado la API del historial web en acción en varios sitios web y aplicaciones web, como Trello, Quartz y Privacy.

El sitio web de cuarzo bastante abstracto (y bastante agradable)

Antes de continuar, veamos primero una API en particular que vamos a implementar en el sitio web.

La API web de historia, en breve

Para acceder a la API del historial web, primero escribimos ventana.historia luego sigue esto con una de las APIs; Un método o una propiedad. En este tutorial nos centraremos en el pushState () método, entonces:

window.history.pushState (estado, título, url);

Como se puede ver en el fragmento anterior, el pushState () método toma tres parámetros. 

1. El primer parametro, estado, Debe ser un objeto que contenga datos arbitrarios. Estos datos serán accesibles a través de ventana.historia.estado. En una aplicación del mundo real, pasaríamos datos como una ID de página, una URL o entradas serializadas derivadas de un formulario. 
2. Los dos últimos parámetros son título y
3. url. Estos dos cambian la URL y el título del documento en el navegador, así como los registran como una nueva entrada en el historial del navegador. 

Analicemos el siguiente ejemplo para comprender mejor cómo pushState () Método funciona.

(function ($) $ ("a") .on ("click", function (event) event.preventDefault (); window.history.pushState (ID: 9, "About - Acme", "about / "););) (jQuery);

En el código anterior, un enlace adjunto con el hacer clic evento luego despliega el pushState () método. Al hacer clic en el enlace, esperamos que el código cambie el título del documento y la URL:

De arriba a abajo: Chrome, Firefox, Opera.

Y lo hace; La captura de pantalla muestra que la URL se cambió a "aproximadamente /" como se define en la pushState () método. Y desde la pushState () método crea un nuevo registro en el historial del navegador, podemos volver a la página anterior a través del navegador Espalda botón.

Sin embargo, todos los navegadores en este ejemplo actualmente ignoran el título parámetro. Puedes ver en la captura de pantalla que el documento no cambia a Acerca de - Acme Como se especificó. Además, llamando al pushState () método también no activará el estado de pop evento; un evento que se envía cada vez que cambia la historia, ¡algo que necesitamos! Hay algunas discrepancias sobre cómo los navegadores manejan este evento, como se indica en MDN:

"Los navegadores tienden a manejar el estado de pop evento diferente en la carga de la página. Chrome (antes de v34) y Safari siempre emiten un estado de pop evento en la carga de la página, pero Firefox no lo hace ".

Necesitaremos una biblioteca como alternativa para hacer que las API web del historial funcionen de forma coherente en todo el navegador sin ningún obstáculo..

Conoce History.js

Desde el pushState () El método no funciona en todo su potencial, en este tutorial vamos a aprovechar History.js. Como su nombre lo indica, esta biblioteca de JavaScript es una relleno de polietileno, replicando las API nativas de historial que funcionan en diferentes navegadores. También expone un conjunto de métodos similares a las API nativas, aunque con pocas diferencias.

Como se mencionó anteriormente, la API nativa del navegador se llama a través de historia objeto de ventana con la “h” minúscula, mientras que se accede a la API History.js a través de Historia con la letra mayúscula "H". Dado el ejemplo anterior y asumiendo que tenemos el archivo history.js cargado, podemos revisar el código de la siguiente manera (nuevamente, observe la "H" mayúscula).

window.History.pushState (, title, url); 

Espero que esta breve explicación sea fácil de entender. De lo contrario, aquí hay algunas referencias adicionales si desea obtener más información sobre la API del historial web.

• API de historia
• Manipulando la historia del navegador
• Una introducción a la historia de HTML5

Construyendo nuestro sitio web estático

En esta sección no discutiremos cada paso necesario para construir un sitio web estático en detalle. Nuestro sitio web es simple, como se muestra en la siguiente captura de pantalla:

El sitio web de inicio

No tienes que crear un sitio web que se vea exactamente igual; eres libre de agregar cualquier contenido y crear tantas páginas como necesites. Sin embargo, hay algunos puntos en particular que debe considerar con respecto a la estructura HTML y el uso de carné de identidad y clase atributos para algunos elementos.

1. Cargue jQuery y History.js dentro del documento cabeza. Puede cargarlo como una dependencia de proyecto a través de Bower, o a través de un CDN como CDNJS o JSDelivr.
2. Envuelva el encabezado, el contenido y el pie de página en un div con la identificación envolver; 
3. Hay algunos elementos de navegación en el encabezado del sitio web y en el pie de página. Cada menú debe estar apuntando a una página. Asegúrate de que las páginas existan y tengan contenido..
4. Cada enlace de menú se da enlace de página Clase que utilizaremos para seleccionar estos menús..
5. Por último, le damos a cada enlace un título atributo que vamos a pasar a pushState () para determinar el título del documento.

Teniendo todo esto en cuenta, nuestro formato HTML tendrá un aspecto similar al siguiente:

Cuando haya terminado de crear su sitio web estático, podemos avanzar a la sección principal de este tutorial..

Aplicación de la API web de historial

Antes de comenzar a escribir cualquier código, debemos crear un nuevo archivo para mantener nuestro JavaScript; lo nombraremos script.js y cargar el archivo en el documento antes de la cuerpo etiqueta de cierre. 

Agreguemos nuestro primer código para cambiar el título del documento y la URL al hacer clic en el menú de navegación:

// 1. var $ wrap = $ ("#wrap"); // 2. $ wrap.on ("click", ".page-link", function (event) // 3. event.preventDefault (); // 4. if (window.location === this.href ) return; // 5. var pageTitle = (this.title)? this.title: this.textContent; pageTitle = (this.getAttribute ("rel") === "home")? pageTitle: pageTitle + " â € "Acme"; // 6. History.pushState (null, pageTitle, this.href););

He dividido el código en varias secciones numeradas. Esto hará que sea más fácil para usted identificar el código con la siguiente referencia:

1. En la primera línea, seleccionamos el elemento., 
   , que envuelve todo el contenido de nuestro sitio web.
2. Adjuntamos el evento clic. Pero, como se puede ver arriba, lo adjuntamos a la #envolver elemento en lugar de adjuntar el evento directamente en cada menú de navegación. Esta práctica es conocida como delegación de eventos. En otras palabras, nuestro #envolver El elemento es responsable de escuchar los eventos de clic en nombre de .enlace de página.
3. También hemos añadido event.preventDefault () Para que los usuarios no sean dirigidos a la página en cuestión..
4. Si la URL del menú en la que se hizo clic es la misma que la ventana actual, no necesitamos continuar con la siguiente operación, simplemente porque no es necesario.
5. los Título de la página variable contiene el formato del título, derivado del atributo del título del enlace o del texto del enlace. Cada título de página sigue Título de la página - Acme convención, excepto la página de inicio. "Acme" es el nombre de nuestra empresa ficticia..
6. Por último, pasamos el Título de la página y la URL de la página al History.js pushState () método.

En este punto, cuando hacemos clic en la navegación del menú, el título y la URL deben cambiar en consecuencia, como se muestra a continuación:

El título de la página y la URL se cambian.

Sin embargo, el contenido de la página sigue siendo el mismo! No se actualiza para que coincida con el nuevo título y la nueva URL.. 

Contenido

Necesitamos agregar las siguientes líneas de código para reemplazar el contenido real de la página.

// 1. History.Adapter.bind (ventana, "statechange", function () // 2. var state = History.getState (); // 3. $ .get (state.url, function (res)  // 4. $ .each ($ (res), function (index, elem) if ($ wrap.selector! == "#" + elem.id) return; $ wrap.html ($ (elem) .html ());););); 

Una vez más, el código aquí se divide en varias secciones numeradas.

1. La primera línea del código escucha el cambio de Historial realizado a través de History.js pushState () Método y ejecuta la función adjunta..
2. Recuperamos los cambios de estado, que contienen diversos datos como una URL, título e id..
3. A través de la jQuery .obtener() Método que recuperamos el contenido de la URL dada.
4. Por último, ordenamos el elemento con un carné de identidad llamado envolver del contenido recuperado, y eventualmente reemplazar el contenido de la página actual con él.

Una vez que se agrega, el contenido debe actualizarse ahora cuando hacemos clic en el menú de navegación. Como se mencionó, también podemos acceder a las páginas visitadas de un lado a otro a través del navegador Espalda y Adelante botones.

Nuestro sitio web es presentable en este punto. Sin embargo, nos gustaría dar un paso más al agregar una pequeña animación para dar vida a la página y, finalmente, nuestro sitio web se siente más convincente.

Añadiendo animación y transiciones

La animación en esta situación solo necesita ser simple, por lo que escribiremos todo desde cero, en lugar de cargar animaciones a través de una biblioteca como Animate.css, Motion UI de ZURB o Effeckt.css. Nombraremos la animación. slideInUp, como sigue:

@keyframes slideInUp from transform: translate3d (0, 10px, 0); opacidad: 0;  a transform: translate3d (0, 0, 0); opacidad: 1; 

Como su nombre lo indica, la animación deslizará el contenido de la página de abajo hacia arriba junto con la opacidad del elemento. Aplique la animación al elemento que envuelve el contenido principal de la página, de la siguiente manera:.

.sección animación-duración: .38s; modo de relleno de animación: ambos; nombre-animación: slideInUp;  

La transición de una página a otra ahora debería sentirse más suave una vez que se aplique la animación. Aquí, puedes parar y llamarlo un día! Nuestro sitio web está listo y estamos listos para desplegarlo para que lo vea el mundo.

Sin embargo, hay una cosa más que debe considerar agregar, especialmente para aquellos que desean monitorear la cantidad de visitas y el comportamiento de los visitantes en su sitio web..

Necesitamos agregar Google Analytics para realizar un seguimiento de cada vista de pagina.

Google analitico

Dado que nuestras páginas se cargarán de forma asíncrona (a excepción de la inicial página cargada) el seguimiento del número de visualización de la página también debe hacerse de forma asíncrona.

Para empezar, asegúrese de tener el estándar de Google Analytics agregado dentro del documento cabeza. El código usualmente se ve como sigue:

Luego debemos ajustar nuestro código JavaScript para incluir el código de seguimiento de Google Analytics para que cada página cargada de forma asíncrona también se mida como un vista de pagina.

Tenemos varias opciones. Primero, podemos comenzar a contar cuando el usuario haga clic en un enlace de navegación, cuando cambie el título de la página y la URL, o cuando el contenido de la página se haya cargado por completo..

Optaremos por lo último, que es posiblemente el más auténtico, y al hacerlo aprovechamos el jQuery. promesa() Método después de que cambiemos el contenido de la página, de la siguiente manera:

$ wrap.html ($ (elem) .html ()) .promise () .done (function (res) // Asegúrese de que se agregue el nuevo contenido y que el método 'ga ()' esté disponible. if (typeof ga === "function" && res.length! == 0) ga ('set', page: window.location.pathname, title: state.title); ga ('send', 'pageview') ;);

Eso es todo lo que es, ahora tendremos el vista de pagina grabado en Google Analytics.

Terminando

En este tutorial, hemos mejorado un sitio web estático simple con el API del historial web para que la transición de la página sea más suave, la carga sea más rápida y, en general, ofrezca una mejor experiencia a nuestros usuarios. Al final de este tutorial, también implementamos Google Analytics para registrar usuarios vista de pagina asíncrono. Además, nuestro sitio web es perfectamente capaz de arrastrarse por los bots de motores de búsqueda, ya que es, como se mencionó, solo un sitio web HTML simple.

Este fue un tutorial carnoso, que explica muchas cosas como la animación CSS, jQuery Ajax y jQuery Promise. Aquí hay un puñado de referencias para que las estudies, para reforzar lo que has aprendido..

• Introducción de un principiante a la animación CSS
• Consejo rápido: Delegación de eventos JavaScript en 4 minutos
• AJAX para diseñadores front-end
• Reñir a Asíncrono Tareas con jQuery Promises
• Desmitificando Google Analytics

Por último, no olvide visitar el sitio de demostración de este tutorial, así como el código fuente en el repositorio.