Cómo crear transiciones de página suaves con JavaScript

Adi Purdila Dec 29, 2020

Read Time: 2 min

Spanish (Español) translation by Carlos (you can also view the original English article)

En este tutorial de JavaScript, aprenderás cómo crear una transición de página suave con una biblioteca de JavaScript llamada Highway.

Antes de iniciar, cabe señalar que este tutorial no es para principiantes; utilizaremos algunas de las sintaxis de JavaScript de ES6 más recientes, y usaremos la línea de comandos para compilar de ES6 a ES5, por lo que si todavía no te sientes cómodo con JavaScript, quizá este tutorial podría no ser para ti.

Creando transiciones suaves con JavaScript

¿Qué es una transición de página suave?

Al navegar de una página web a otra, el navegador utiliza hipervínculos para determinar qué archivo debe abrirse. El proceso implica cerrar una página y cargar otra, y suele ser una experiencia ligeramente discordante (aunque todos estamos muy acostumbrados).

¡Se puede hacer con más suavidad! Existe una serie de técnicas que nos permiten cargar la nueva pá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 transición de páginas, para desvanecer nuestra página web y luego aparecer gradualmente la nueva página.

Lo que cubrimos en este tutorial

Perspectiva general de la demostración de JavaScript
Instalación de Node.js
Uso de npm (Node Package Manager)
Análisis de los archivos del proyecto, y la adición de package.json
Adición de los paquetes GSAP y Highway.js (para las animaciones y las transiciones respectivamente)
Introducción de Parcel (que compilará nuestros archivos Sass sobre la marcha)
Uso de Highway (y el marcado data-router-wrapper y data-wrapper-view)
Codificación de las transiciones
Ajuste de las animaciones
Adición de la clases a los elementos del menú activos

Más tutoriales de transiciones de página con JS

Recursos

JavaScript Animation

Did you find this post useful?

Yes No

Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.

Adi Purdila

Adi Purdila is a web design instructor for Tuts+. With over 100 courses and 200 tutorials published to date, Adi's goal is to help students become better web designers and developers by creating content that’s easy to follow and offers great value. Being self-taught himself, Adi strongly believes that constant learning (academic or otherwise) is the only way to move forward and achieve your goals. When not typing away at his keyboard, he loves woodworking and caring for his ever-growing family of rescue pets. You can stay up to date with what he's doing by following him on social media or visiting his website at adipurdila.com.

adipurdila