Animaciones CSS y JavaScript básicas para una página web interactiva

Las animaciones y efectos interactivos pueden hacer que un sitio web cobre vida. En este artículo, analizaremos el código detrás de una página web sencilla que usa animaciones CSS y JavaScript para crear una experiencia atractiva para el usuario.

Mi sitio web en construcción

El código que estamos analizando forma parte de mi nuevo sitio web personal, el cual se encuentra actualmente en construcción. Mi objetivo es implementar varios efectos interactivos e innovadores utilizando tecnologías web modernas.

Por el momento, el sitio consiste en una sola página con animaciones CSS y un switch interactivo creado con JavaScript. Sin embargo, pronto estaré añadiendo nuevas secciones y funcionalidades.

Si este tema te interesa, te invito a visitar el sitio y suscribirte para estar al tanto de nuevos contenidos. Estoy documentando todo el proceso de desarrollo en mi blog, así que ¡mantente atento!

👉 Visita mi sitio web en construcción: enlabedev.com

Ahora continuemos analizando parte del código implementado hasta el momento...

Archivo CSS
El archivo style.css contiene los estilos que dan forma al diseño y las animaciones de la página. Analicemos algunos puntos clave:

:root {
  --light: #FFFFFF;
  --dark: #000;
  --red: #CC0000;
  --red-light: #FF3333;
  --gray-dark: #333333;
  --gray-light: #CCCCCC;
  --gray-lighter: #EEEEEE;
  --blue:#0066CC;
  --blue-light: #33CCFF;
  --animation-time: 2s;
  --width: 160px;
  --height: 160px; 
}

Animaciones CSS
Luego se definen animaciones CSS que se utilizarán después. Por ejemplo, esta animación hace que un borde se mueva horizontalmente:

@keyframes border-top {
  0% {
    left: 0;
  }
  50% {
    width: 100%;
  }
  100% {
    left: auto;
    right: 0;
  }
}
@keyframes border-right {
  0% {
    top: 0;
  }
  50% {
    height: 100%;
  }
  100% {
    top: auto;
    bottom: 0;
  }
}
@keyframes border-bottom {
  0% {
    right: 0;
  }
  50% {
    width: 100%;
  }
  100% {
    left: 0;
    right: auto;
  }
}
@keyframes border-left {
  0% {
    bottom: 0;
  }
  50% {
    height: 100%;
  }
  100% {
    top: 0;
    bottom: auto;
  }
}

Classes y Media Queries
También hay clases CSS como .d-block, .text-normal que permiten aplicar estilos reutilizables. Y media queries para diseño responsivo:

@media (min-width: 768px) {
  .title {
    font-size: 2.5rem;
  }
  .roles__item {
    display: inline-block;
  }
}

Archivo HTML

El archivo index.html contiene la estructura y el contenido de la página web. El HTML sigue una estructura estándar: DOCTYPE, html, head, body, etc.

Uso de etiquetas HTML5 para SEO
En el código vemos el uso de algunas etiquetas semánticas de HTML5 que pueden mejorar el SEO del sitio web:

Encabezados
Se utilizan etiquetas de encabezado <h1> para definir jerarquía y estructura de contenido

<h1 class="text-normal title">
    <span class="roles__item animate__animated animate__fadeInUp">Engineer</span>
    <span class="roles__item animate__animated animate__fadeInUp"><strong>Experience</strong></span>
    <span class="roles__item animate__animated animate__fadeInUp">Creativity</span>
</h1>

Se agrego la clase .text-normal y .title para estandarizar el tamaño del header. Por defecto las etiquetas h1, h2, h3... vienen con negrita, solo necesitabamos poner negrita a la palabra experiencia y lo usamos como artificio

SVG inline
Para los iconos se usan SVG inline, que se pueden manipular con CSS y JS:

<svg class="power-off">
  <use .../>
</svg>

Archivo JavaScript

Finalmente, el archivo script.js contiene el código JavaScript que da interactividad a la página
Event Listeners
Se agregan listeners de eventos al switch y al body

powerSwitch.addEventListener('click', function() {
    powerSwitch.classList.toggle('power-off');
    powerSwitch.classList.toggle('power-on');
    body.classList.toggle('dark');
    body.classList.toggle('light');
  });

Timers
Se usan timers (setTimeout) para secuenciar las animaciones y transiciones

setTimeout(() => {
  // código que ejecuta después de X segundos 
}, 500)

Manipulación de clases
Las clases CSS se agregan/remover utilizando classList para alternar estilos y animaciones.

element.classList.remove('animate__fadeInUp')
element.classList.add('animate__fadeOutDown')

Promesas
Las promesas permiten encadenar efectos de forma asíncrona y evitar problemas de tiempo.

doAnim1()
  .then(() => doAnim2())
  .then(() => doAnim3())

En Resumen

Animaciones CSS: Hemos definido animaciones clave que permiten efectos visuales como bordes que se mueven y cambian, creando una dinámica atractiva alrededor del logo central. Estas animaciones son fundamentales para capturar la atención del usuario desde el primer momento.

Efecto de Aprendido/Apagado: A través de JavaScript, implementamos un interruptor interactivo que alterna entre modos claro y oscuro. Este efecto no solo es una pieza central de la experiencia del usuario sino que también demuestra prácticas modernas en el desarrollo web para mejorar la accesibilidad y la comodidad visual del sitio.

Diseño Responsivo: Mediante el uso de media queries y clases CSS reutilizables, aseguramos que el sitio se vea y funcione perfectamente en una amplia gama de dispositivos. Esto subraya la importancia de un diseño web adaptativo en el mundo digital actual.

Interactividad con JavaScript: El uso de event listeners y manipulación de clases CSS a través de JavaScript nos permite crear una página web interactiva. Desde animaciones secuenciales hasta la transición de modos de color, cada elemento ha sido cuidadosamente diseñado para mejorar la experiencia del usuario.

Accesibilidad y SEO: A través de etiquetas semánticas de HTML5 y una estructura de contenido clara, nos enfocamos en la accesibilidad y la optimización para motores de búsqueda (SEO), asegurando que nuestro sitio no solo sea atractivo sino también funcional y fácil de encontrar.

Conclusiones

En este artículo analizamos el código fuente detrás de una página web interactiva con animaciones CSS y JavaScript.

Vimos cómo elementos como variables CSS, animaciones keyframes, transiciones, clases reutilizables y media queries permiten dar vida al diseño de forma adaptable.

También exploramos el uso de etiquetas semánticas de HTML5, event listeners, timers y promesas en JavaScript para lograr experiencias de usuario atractivas.

Consideraciones de performance, accesibilidad e inclusión son claves al momento de construir sitios web modernos e interactivos.

Te invito a explorar el código fuente completo en este repositorio de GitHub:

https://github.com/enlabedev/personal-site

Con estos conceptos básicos ya puedes comenzar a experimentar y crear tus propios efectos interactivos en sitios web. ¡Anímate a aprender más y compartir tus creaciones! Me encuentras en @enlabedev.