Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. JavaScript

Cómo crear transiciones de página suaves con JavaScript

by
Difficulty:IntermediateLength:QuickLanguages:

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-wrapper y data-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

Recursos

Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.