useScrollAnimation

Este composable permite agregar una animación basada en el scroll a un elemento específico de la página. Cuando el usuario hace scroll y el elemento es visible en la ventana, se le añade una clase CSS para hacer visible el elemento.

Implementación del Composable:

export function useScrollAnimation(selector: HTMLElement) {
  /**
   * Función para manejar el evento de scroll. Se ejecuta cada vez que el usuario hace scroll.
   * Verifica si el elemento es visible dentro de la ventana gráfica, y si lo es, añade la clase 'visible'.
   */
  const handleScroll = () => {
    const rect = selector.getBoundingClientRect();
    if (rect.top <= window.innerHeight && rect.bottom >= 0) {
      selector.classList.add("visible");
    }
  };

  /**
   * Limpieza del evento de scroll al desmontar el componente.
   */
  onBeforeUnmount(() => {
    window.removeEventListener("scroll", handleScroll);
  });

  return {
    handleScroll,
  };
}

Descripción de la Función:

1. handleScroll:

   • Verifica si el elemento está visible en la ventana gráfica utilizando getBoundingClientRect.
   • Si el elemento está visible, le añade la clase CSS 'visible'.
   • Nota: La clase 'visible' debe estar definida en tu CSS para aplicar la animación deseada cuando el elemento se vuelva visible.

2. onBeforeUnmount:

   • Elimina el listener del evento de scroll cuando el componente se desmonta para evitar fugas de memoria.

---

Uso en el Componente Vue

En este ejemplo, se configura una animación basada en el scroll para dos elementos: element y lineElement, ambos referenciados en el DOM mediante ref.

Implementación del Setup:

const setupScrollAnimation = (DOMElement: HTMLElement) => {
  if (!DOMElement) return;
  const { handleScroll } = useScrollAnimation(DOMElement);
  window.addEventListener("scroll", handleScroll);
};

onMounted(() => {
  // Configura la animación de scroll para `element` y `lineElement`
  element.value && setupScrollAnimation(element.value);
  lineElement.value && setupScrollAnimation(lineElement.value);
});

Descripción:

1. setupScrollAnimation:

   • Verifica si el elemento DOM existe antes de configurar el scroll.
   • Llama a useScrollAnimation para obtener la función handleScroll y añade el evento de scroll a window.

2. onMounted:

   • Después de que el componente se ha montado, obtiene las referencias a los elementos DOM (element y lineElement), y configura las animaciones de scroll para ellos.

---

Marcado del Componente Vue:

<article class="for-you">
  <aside class="for-you__left">
    <div class="for-you__circle-icon">
      <NuxtImg
        class="for-you__icon"
        :src="$props.icon.url"
        :alt="$props.icon.alternativeText ?? $t('general_alternative_text')"
      />
    </div>
    <div v-if="title" class="for-you__line" ref="lineElement"></div>
  </aside>
  <article class="for-you__right" ref="element">
    <h2 class="for-you__title">{{ $props.title }}</h2>
    <p class="for-you__description">{{ $props.description }}</p>
  </article>
</article>

Descripción del Marcado:

1. ref="element": Se utiliza para referenciar el contenido principal del artículo, que será animado al estar visible en el scroll.
2. ref="lineElement": Referencia el elemento que también será animado en función del scroll.

---

Resumen:

• El composable useScrollAnimation se encarga de manejar la lógica de la animación basada en el scroll.
• Al montar el componente, se configuran los listeners de scroll para los elementos element y lineElement.
• Cada vez que el usuario hace scroll, si el elemento es visible en la ventana gráfica, se le añade la clase 'visible' para activar la animación.

Este enfoque modular y reutilizable te permite agregar fácilmente animaciones de scroll a cualquier componente o elemento de tu aplicación.