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

Habilidades en JavaScript: crea una animación para una cabecera responsiva durante el desplazamiento de la página

by
Difficulty:BeginnerLength:MediumLanguages:

Spanish (Español) translation by Ana Paulina Figueroa Vazquez (you can also view the original English article)

En este tutorial, aprenderemos cómo animar elementos de la cabecera durante el desplazamiento de la página. En primer lugar, crearemos una cabecera de navegación superior totalmente responsiva con tres diseños diferentes: uno para pantallas pequeñas, otro para pantallas medianas y uno para pantallas grandes y de mayor tamaño.

A continuación, animaremos sutilmente su botón de llamada a la acción en pantallas medianas y de mayor tamaño después de una cierta cantidad de desplazamiento. ¿Suena lo suficientemente interesante como para acompañarme en el trayecto?

Lo que estaremos construyendo

Este es un video de demostración que muestra el comportamiento de nuestra cabecera de página:

Esta es la demostración de Codepen correspondiente (consulta la versión más grande para ver cómo cambia el diseño):

¡Comencemos!

1. Empieza con el marcado de la página

Nuestra página estará compuesta por una cabecera y dos secciones auxiliares. Dentro de la cabecera, colocaremos una barra de navegación. Esta incluirá lo siguiente:

  • Un logotipo de tipo imagen.
  • El menú principal. Sus últimos tres elementos serán visibles solo en pantallas pequeñas.
  • El menú secundario. Este aparecerá en pantallas de más de 767px. En pantallas más pequeñas, sus elementos formarán parte del menú principal.
  • Un botón responsable del cambio al menú móvil. Este será visible en pantallas de hasta 1100 píxeles.

Este es el marcado:

Más allá de la cabecera, crearemos dos secciones con contenido ficticio para probar el efecto del desplazamiento. Para mantener las cosas simples, no discutiremos los estilos de estos elementos.

Nota #1: para evitar crear contenido duplicado, en lugar de agregar los últimos tres elementos del menú principal a través de HTML, podríamos haberlos agregado dinámicamente a través de JavaScript. Recuerda que, inicialmente, estos son parte del menú secundario.

Nota #2: para este tutorial, no cubriré el tema de cómo hacer que el menú móvil sea totalmente accesible. Solamente he usado el atributo aria-label, cuyo valor será actualizado a través de JavaScript y del atributo aria-hidden.

2. Define algunos estilos básicos

Con el marcado listo, definiremos algunos estilos CSS básicos. Estos incluirán una fuente de Google, algunas variables personalizadas y algunas reglas de restablecimiento:

Dentro de los estilos anteriores, y solo por diversión, agregamos algunos estilos para personalizar el estilo predeterminado de la barra de desplazamiento.

Customizing the default scrollbar styling

Ten en cuenta que no todos los navegadores (por ejemplo Firefox 80) adoptarán esta nueva apariencia.

Además, especificaremos tres clases auxiliares para controlar la visibilidad de nuestros elementos. Las usaremos más tarde, cuando cambiemos al menú móvil a través de JavaScript. Sus nombres están inspirados en los nombres de las clases de Bootstrap 4:

Observa que todas incluyen la propiedad important. Como regla general deberíamos evitar el uso de esta propiedad, porque causa problemas con los estilos y dificulta la depuración. Sin embargo, en nuestro ejemplo la usaremos para aplicar estilos a través de JavaScript a elementos con diferentes niveles de especificidad.

3. Establece los estilos de la cabecera

Para crear el diseño de la cabecera, seguiremos un enfoque centrado en el escritorio.

Pantallas grandes

En pantallas grandes (>1100px), su diseño debería verse así:

The header layout on large screens

En este punto:

  • La cabecera será un elemento con un una posición fija y una altura estática.
  • La navegación será un contenedor flexible. Su contenido estará centrado verticalmente a lo largo del eje transversal y horizontalmente distribuido a lo largo del eje principal.
  • El menú principal también será un contenedor flexible con elementos centrados verticalmente.
  • De forma predeterminada, el último elemento (el botón de llamada a la acción) del menú secundario estará fuera de la pantalla. Para sacarlo de la pantalla, le asignaremos transform: translateX(200px) a su lista padre. El número 200 se obtiene sumando el ancho del botón (150px) y la cantidad de espaciado (50px) entre los elementos de la lista del menú secundario.
  • El botón de cambio de tipo hamburguesa estará oculto. Ese también contendrá dos iconos tomados de CSS.gg.

Los estilos relacionados:

Pantallas medianas

En pantallas medianas (≥768px y ≤1100px), su diseño debería verse así:

The header layout on medium screens

En este punto:

  • El menú principal tendrá una posición absoluta y se desplazará por debajo de la cabecera. También estará oculto de forma predeterminada y aparecerá cuando hagamos clic en el botón de hamburguesa. Además, sus elementos estarán distribuidos equitativamente a lo largo de su padre.
  • El botón de llamada a la acción aún se encuentra fuera de la pantalla, pero esta vez le asignaremos transform: translateX(170px) a su padre, ya que el espacio entre los elementos de la lista se reduce a 20 píxeles.
  • El botón de cambio de tipo hamburguesa se hará visible.

Los estilos asociados:

Pantallas pequeñas

Finalmente, en pantallas estrechas (<768px), su diseño debería verse de esta manera:

The header layout on small screens

En este punto:

  • Los elementos del menú principal se apilarán. Además, los últimos tres elementos se harán visibles.
  • El menú secundario estará oculto.
  • No habrá ninguna animación durante el desplazamiento de la página. La llamada a la acción será visible de forma predeterminada, con una posición absoluta y como parte del menú móvil.

Los estilos correspondientes:


4. Crea una animación durante el desplazamiento de la pantalla

A medida que nos desplacemos dentro de la pantalla, haremos un seguimiento de qué tanto nos hemos desplazado y, al habernos desplazado una cantidad de espacio determinada, animaremos sutilmente la visibilidad del botón de la cabecera cambiando la clase show-btn.

The animated call-to-action button

En nuestro ejemplo, el botón aparecerá tan pronto como la sección hero desaparezca, y viceversa.

En tus proyectos, puedes cambiar fácilmente cuándo debería aparecer el botón dependiendo de la cantidad de desplazamiento a través de la variable targetScroll. Aquí puedes enviar ya sea un valor fijo o uno dinámico.

Este es el código de JavaScript necesario:

Y la clase CSS destino:


5. Cambia el menú móvil

Como último paso, para que la cabecera sea totalmente responsiva, vamos a crear la funcionalidad del menú móvil.

Tan pronto como hagamos clic en el botón de hamburguesa, la visibilidad del menú móvil será cambiada. En ese momento haremos uso de las clases auxiliares en gran medida.

Este es el código de JavaScript pertinente:


¡Has creado una animación para una cabecera responsiva durante el desplazamiento de la página!

¡Eso es todo, amigos! Hoy discutimos cómo crear cabeceras de página responsivas con contenido animado durante el desplazamiento. Como vimos, con solo unos cuantos pasos podemos crear este tipo de funcionalidad y hacer páginas llamativas.

Echemos un vistazo a nuestra creación nuevamente:

¿Alguna vez has creado una cabecera animada de este tipo para un proyecto en el pasado? Si es así, ¿qué increíbles técnicas has usado?

Como siempre, ¡muchas gracias por leer!

Más tutoriales con cabeceras animadas durante el desplazamiento de la página

Aprende más sobre cómo animar cabeceras de páginas durante su desplazamiento con estos tutoriales:

Y si necesitas un repaso de Flexbox, echa un vistazo a estos tutoriales:

Advertisement
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.