Utilizando los conceptos básicos de HTML, CSS y JS, tendrás una línea de tiempo atractiva lista y funcionando en poco tiempo.

Conclusiones clave

  • Es fácil crear una línea de tiempo poderosa usando CSS y JavaScript.
  • Comience por delinear la estructura HTML de la línea de tiempo y diseñar los elementos de la línea de tiempo con CSS.
  • Continúe agregando animación a la línea de tiempo usando JavaScript. Puede utilizar la API de Intersection Observer para atenuar los elementos de la línea de tiempo al desplazarse.

Las líneas de tiempo son poderosas herramientas visuales que ayudan a los usuarios a navegar y comprender eventos cronológicos. Explore cómo crear una línea de tiempo interactiva utilizando el dúo dinámico de CSS y JavaScript.

Construyendo la estructura de la línea de tiempo

Puede consultar el código completo de este proyecto desde su repositorio de GitHub.

Para comenzar, delinee la estructura HTML en índice.html. Cree eventos y fechas como componentes separados, sentando las bases para la línea de tiempo interactiva.

instagram viewer 
<body>
<sectionclass="timeline-section">
<divclass="container">
<divclass="Timeline__header">
<h2>Timelineh2>
<pclass="heading--title">
 Here is the breakdown of the time we anticipate <br />
 using for the upcoming event.
p>
div>


<divclass="Timeline__content">
<divclass="Timeline__item">
<divclass="Timeline__text">
<h3>Occasion 1h3>


<p>
 Lorem ipsum dolor sit amet consectetur adipisicing elit.
 Corporis, explicabo.
p>


<spanclass="circle">1span>
div>


<h3class="Timeline__date">12 Dec. 2023h3>
div>


<divclass="Timeline__item">
<divclass="Timeline__text">
<h3>Occasion 2h3>


<p>
 Lorem ipsum dolor sit amet consectetur adipisicing elit.
 Corporis, explicabo.
p>


<spanclass="circle">2span>
div>


<h3class="Timeline__date">12 Dec. 2023h3>
div>

div>
div>
section>
body>

Por el momento, su componente se ve así:

Elija un diseño para su línea de tiempo: vertical vs. Horizontal

Al diseñar una línea de tiempo interactiva, puedes elegir un estilo vertical u horizontal. Las líneas de tiempo verticales son fáciles de usar, especialmente en teléfonos, ya que esta es la dirección típica en la que se desplazan los sitios web. Si tu línea de tiempo tiene mucho contenido, este será probablemente el diseño más conveniente.

Las líneas de tiempo horizontales, sin embargo, son atractivas en pantallas anchas y son excelentes para sitios creativos con menos detalles, que pueden minimizar el desplazamiento de lado a lado. Cada estilo tiene sus ventajas, adecuadas para diferentes tipos de sitios web y experiencias de usuario.

Aplicar estilo a la línea de tiempo con CSS

Hay tres tipos de elementos visuales a los que diseñarás para la línea de tiempo: líneas, nodos y marcadores de fecha.

  • Líneas: Una línea vertical central, creada utilizando Timeline__content:: después del pseudoelemento, sirve como columna vertebral de la línea de tiempo. Tiene un estilo con un ancho y color específicos, colocado absolutamente para alinearse con el centro de los elementos de la línea de tiempo.
    .Timeline__content::after {
    background-color: var(--clr-purple);
    content: "";
    position: absolute;
    left: calc(50% - 2px);
    width: 0.4rem;
    height: 97%;
    z-index: -5;
    }
  • Nodos: Los círculos, diseñados con la clase círculo, actúan como nodos en la línea de tiempo. Estos están absolutamente ubicados en el centro de cada elemento de la línea de tiempo y son visualmente distintos con un color de fondo, formando los puntos clave a lo largo de la línea de tiempo.
    .circle {
    position: absolute;
    background: var(--clr-purple);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 6.8rem;
    width: 100%;
    aspect-ratio: 1/ 1;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 3;
    font-size: 1.6rem;
    }
  • Marcadores de fecha: Las fechas, diseñadas con la clase Timeline__date, se muestran a ambos lados de la línea de tiempo. Su posición alterna entre izquierda y derecha para cada elemento de la línea de tiempo, creando una apariencia escalonada y equilibrada a lo largo de la línea de tiempo.
    .Timeline__text,
    .Timeline__date { width: 50%; }
    .Timeline__item:nth-child(even) { flex-direction: row-reverse;}
    .Timeline_item:nth-child(even).Timeline_date {
    text-align: right;
    padding-right: 8.3rem;
    }
    

    .Timeline_item:nth-child(even).Timeline_text { padding-left: 8.3rem;}
    

    .Timeline_item:nth-child(odd).Timeline_text {
    text-align: right;
    align-items: flex-end;
    padding-right: 8.3rem;
    }
    .Timeline_item:nth-child(odd).Timeline_date { padding-left: 8.3rem;}

Consulte el conjunto completo de estilos de la repositorio de GitHub en estilo.css.

Después del estilo, su componente debería verse así:

Animando con JavaScript

Para animar este componente, utilice la API de Intersection Observer para animar elementos de la línea de tiempo al desplazarse. Agregue el siguiente código a script.js.

1. Configuración inicial

Primero, seleccione todos los elementos con la clase Timeline__item.

const timelineItems = document.querySelectorAll(".Timeline__item");

2. Estilo inicial de los elementos de la línea de tiempo

Establezca la opacidad inicial de cada elemento en 0 (invisible) y aplique un Transición CSS para un desvanecimiento suave.

timelineItems.forEach((item) => {
 item.style.opacity = 0;
 item.style.transition = "opacity 0.6s ease-out";
}

Podrías configurar estos estilos en la hoja de estilos, pero hacerlo sería peligroso. Si JavaScript no se ejecuta, ¡ese enfoque dejaría tu línea de tiempo invisible! Aislar este comportamiento en el archivo JavaScript es un buen ejemplo de mejora progresiva.

3. Devolución de llamada del observador de intersección

Defina una función fadeInOnScroll para cambiar la opacidad de los elementos a 1 (visible) cuando se cruzan con la ventana gráfica.

const fadeInOnScroll = (entries, observer) => {
 entries.forEach((entry) => {
if (entry.isIntersecting) {
 entry.target.style.opacity = 1;
 }
 });
};

4. Opciones de observador de intersección

Establezca las opciones para el observador, con un umbral de 0,1 que indica que la animación se activa cuando el 10% de un elemento es visible.

const options = {
 root: null,
 rootMargin: "0px",
 threshold: 0.1,
}

5. Crear y utilizar el observador de intersección

Termine creando un IntersectionObserver con estas opciones y aplicándolo a cada elemento de la línea de tiempo.

const observer = new IntersectionObserver(fadeInOnScroll, options);
timelineItems.forEach((item) => {
 observer.observe(item);
});

El resultado final debería verse así:

Mejores prácticas para los componentes de la línea de tiempo

Algunas prácticas a seguir incluyen:

  • Optimice su línea de tiempo para diferentes tamaños de pantalla. Aprenda técnicas de diseño responsivo para garantizar una experiencia de usuario perfecta en todos los dispositivos.
  • Utilice prácticas de codificación eficientes para garantizar animaciones fluidas.
  • Utilice HTML semántico, relaciones de contraste adecuadas y etiquetas ARIA para una mejor accesibilidad.

Cómo darle vida a su línea de tiempo: un viaje en el diseño web

Crear una línea de tiempo interactiva no se trata sólo de presentar información; se trata de crear una experiencia atractiva e informativa. Al combinar estructura HTML, estilo CSS y animaciones JavaScript, puede crear una línea de tiempo que cautive a su audiencia y al mismo tiempo proporcione contenido valioso.