Realza la manera en que se carga una página web con animaciones CSS

() translation by (you can also view the original English article)

En un tutorial previo, creamos una página responsiva a pantalla completa con flexbox. Hoy, haremos que esta página sea más atractiva agregándole algunas animaciones de CSS.

Aquí está lo que vamos a crear:

Cómo crear una página responsiva a pantalla completa con Flexbox
En este tutorial, aprenderemos cómo crear una página a pantalla completa con Flexbox. Nuestra página incluirá una imagen de fondo a pantalla completa, de forma vertical ...

George Martsoukos
20 de noviembre de 2018

Flexbox

1. El archivo HTML

Para añadir las animaciones deseadas, actualizaremos ligeramente el marcado (markup) de la página inicial. En el tutorial anterior, el marcado de nuestro elemento main se veía así:

1	<main class="page-main">
2	<div>
3	<h1>...</h1>
4	<p>...</p>
5	<p>...</p>
6	</div>
7	</main>

Para los fines de este tutorial, añadiremos algunas envolturas (wrappers) adicionales, cambiándolo a esto:

<main class="page-main">
  <div>
    <div class="text-wrapper">
      <h1>...</h1>
    </div>
    <div class="text-wrapper p-wrapper">
      <p>...</p>
    </div>
    <div class="text-wrapper p-wrapper">
      <p>...</p>
    </div>
  </div>
</main>

Abajo se muestra el marcado general de la página después de esta modificación:

<div class="wrapper">
  <header class="page-header">
    <nav>
      <h2>...</h2>
      <ul>...</ul>
      <button class="cta-contact">...</button>
    </nav>
  </header>
  <main class="page-main">
    <div>
      <div class="text-wrapper">
        <h1>...</h1>
      </div>
      <div class="text-wrapper p-wrapper">
        <p>...</p>
      </div>
      <div class="text-wrapper p-wrapper">
        <p>...</p>
      </div>
    </div> 
  </main>
  <footer class="page-footer">
    <small>...</small>
    <ul>...</ul>
  </footer>
</div>

2. Añadiendo los estilos CSS iniciales

Con el HTML colocado, concentremos nuestra atención en las cosas importantes: el CSS.

Para iniciar haremos cuatro cosas:

Ocultamos todos los elementos de la página.
Ajustamos los estilos para los elementos header y footer y sus subelementos.
Definimos los estilos para ::after del pseudo-elemento del header.
Especificamos lo estilos para las envolturas del texto y sus subelementos dentro de main.

Aquí están los estilos asociados:

/* variables */
:root {
  --main-purple-color: #9e89b8;
}

.page-header nav > *,
.page-main,
.page-footer > * {
  opacity: 0;
}

.page-header,
.page-footer,
.page-main .text-wrapper {
  overflow: hidden;
}

.page-header nav > * {
  transform: translateY(-30px);
}

.page-footer > * {
  transform: translateY(30px);
}

.page-header {
  position: relative;
}

.page-header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--main-purple-color);
  z-index: 99999;
  transform: scaleX(0);
}

.page-main .text-wrapper + .text-wrapper {
  margin-top: 10px;
}

.page-main .text-wrapper * {
  transform: translateY(120%);
}

.page-main .p-wrapper * {
  transform: translateY(-120%);
}

3. Iniciando las animaciones CSS

Con HTML y CSS básico preparados, ahora podemos concentrarnos en las animaciones de la página.

No obstante, antes de hacer eso, asegurémonos de que entendemos cuándo deberían ejecutarse: idealmente, tan pronto como la página esté completamente cargada. Esto asegura que todos los recursos de la página estarán listos, colocados en la posición correcta, y no perderemos ninguno de los efectos de animación.

Teniendo en cuenta eso, primero esperamos que se cargue la página, y cuando eso ocurra, usamos JavaScript para añadir una clase loaded al body.

Aquí está el código JavaScript relacionado:

1	window.addEventListener("load", () => {
2	document.querySelector("body").classList.add("loaded");
3	});

Cualquier animación que apliquemos se hará a los descendientes de la clase loaded.

Así que, nuestra primera animación de escalado se dirige al pseudoelemento ::after del header:

.loaded .page-header::after {
  animation: scaleIn 1.3s ease-in 0.2s forwards;
}

@keyframes scaleIn {
  100% {
    transform: scaleX(1);
  }
}

Sugerencia: De forma predeterminada, el origen de transformación de un elemento es su centro, por lo que la animación del pseudo-elemento comienza desde su centro. Si quieres que la animación inicie desde otra posición, solo cambia el valor de la propiedad transform-origin del elemento de destino.

A continuación puedes ver cómo cambia nuestra animación cuando aplicamos un transform-origin diferente:

Luego, utilizamos un efecto de aparición gradual para mostrar los elementos de la página. Además de esta animación, también utilizamos una animación deslizable para mostrar el contenido de header y de footer:

.loaded .page-main {
  animation: fadeIn 1s ease-in 0.7s forwards;
}

.loaded .page-header nav > *,
.loaded .page-footer > * {
  animation: fadeIn 1s ease-in 0.7s forwards, slideIn 0.8s ease-in 0.9s forwards;
}

@keyframes fadeIn {
  60% {
    opacity: 0;
  }
  
  100% {
    opacity: 1;
  }
}

@keyframes slideIn {
  100% {
    transform: translateY(0);
  }
}

Finalmente, los elementos de main se hacen visibles a través de un efecto deslizante:

.loaded .page-main .text-wrapper * {
  animation: slideIn 0.6s cubic-bezier(0.54, 0.46, 0.54, 0.94) 2s forwards;
}

@keyframes slideIn {
  100% {
    transform: translateY(0);
  }
}

Ahora veamos nuevamente lo que acabamos de crear:

Conclusión

En este breve tutorial, logramos animar una página HTML de flexbox aprovechando las animaciones CSS.

Unas cuantas notas antes de cerrar:

En vez de animaciones CSS, también podríamos haber utilizado transiciones CSS (casi todas nuestras animaciones van desde un estado inicial hasta un estado final). La animación de aparición gradual es la más complicada porque incluye tres pasos de animación (0%, 60%, 100%).
En lugar de transformaciones 2d, podríamos haber utilizado igualmente transformaciones 3d.
Experimenta con los valores de las propiedades animation-duration y animation-delay para modificar las animaciones según tus necesidades.
Es probable que en las pantallas de dispositivos móviles quieras limitar el número de animaciones que se producen (por ejemplo, eliminar las animaciones de pie de página). Las animaciones de demostración funcionan bien, especialmente en las pantallas donde todos los contenidos de la página son visibles.

Realza la manera en que se carga una página web con animaciones CSS

1. El archivo HTML

2. Añadiendo los estilos CSS iniciales

3. Iniciando las animaciones CSS

Conclusión

Aprende más sobre animación CSS