Spanish (Español) translation by Carlos (you can also view the original English article)
En este tutorial de JavaScript, aprenderás cómo crear una transición de página suave con una biblioteca de JavaScript llamada Highway.
Antes de iniciar, cabe señalar que este tutorial no es para principiantes; utilizaremos algunas de las sintaxis de JavaScript de ES6 más recientes, y usaremos la línea de comandos para compilar de ES6 a ES5, por lo que si todavía no te sientes cómodo con JavaScript, quizá este tutorial podría no ser para ti.
Creando transiciones suaves con JavaScript
¿Qué es una transición de página suave?
Al navegar de una página web a otra, el navegador utiliza hipervínculos para determinar qué archivo debe abrirse. El proceso implica cerrar una página y cargar otra, y suele ser una experiencia ligeramente discordante (aunque todos estamos muy acostumbrados).
¡Se puede hacer con más suavidad! Existe una serie de técnicas que nos permiten cargar la nueva página, pasar a ella y actualizar la URL en el navegador al mismo tiempo. En este tutorial usaremos Highway.js, una biblioteca de JavaScript de transición de páginas, para desvanecer nuestra página web y luego aparecer gradualmente la nueva página.
Lo que cubrimos en este tutorial
- Perspectiva general de la demostración de JavaScript
- Instalación de Node.js
- Uso de npm (Node Package Manager)
- Análisis de los archivos del proyecto, y la adición de package.json
- Adición de los paquetes GSAP y Highway.js (para las animaciones y las transiciones respectivamente)
- Introducción de Parcel (que compilará nuestros archivos Sass sobre la marcha)
- Uso de Highway (y el marcado
data-router-wrapperydata-wrapper-view) - Codificación de las transiciones
- Ajuste de las animaciones
- Adición de la clases a los elementos del menú activos
Más tutoriales de transiciones de página con JS
WordPressCómo integrar SmoothState.js en un tema de WordPress
JavaScriptTransiciones de página bonitas y fluidas con la History Web API
AnimacionesCreando transiciones de página animadas con HTML5
Recursos
Envato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!
Translate this post
