Texto Parallax con animación

Otro video desarrollando funcionalidades inspiradas en la web de Charles Leclerc. Esta vez vemos la animación inicial, y el texto con Parallax en una sola línea.

CSS

Video

/* Estilo para la sección del video inicial */
.wp-block-cover.intro-section {
  position: relative;
  min-height: 100vh; /* Altura completa */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Asegurar que la superposición no oculte el texto */
.wp-block-cover.intro-section .wp-block-cover__background {
  background-color: rgba(0, 0, 0, 0.3) !important; /* Superposición oscura */
  z-index: 1;
}

/* Estilo para el video de fondo */
.wp-block-cover.intro-section video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* Estilo para el texto superpuesto */
.intro-text {
  font-size: 48px;
  color: white;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  text-align: center;
  font-weight: bold;
  z-index: 2; /* Encima del video y superposición */
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1s ease-in-out, transform 1s ease-in-out;
}

.intro-text.visible {
  opacity: 1;
  transform: translateY(0);
}

Texto

/* Estilo para la sección con imagen y texto largo */
.wp-block-cover.parallax-section {
  position: relative;
  min-height: 100vh; /* Mínimo 100vh, se ajustará dinámicamente */
  overflow: hidden;
  z-index: 5;
}

/* Contenedor interno */
.wp-block-cover.parallax-section .wp-block-cover__inner-container {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 2;
}

/* Imagen de fondo */
.wp-block-cover.parallax-section .wp-block-cover__image-background {
  position: absolute; /* Limita la imagen a la sección */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* Superposición */
.wp-block-cover.parallax-section .wp-block-cover__background {
  position: absolute; /* Limita la superposición a la sección */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

/* Contenedor del texto */
.text-container {
  position: fixed; /* Fija el texto en el centro de la pantalla */
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  white-space: nowrap;
  z-index: 100; /* Por encima de todo */
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

.text-container.visible {
  opacity: 1;
}

/* Estilo del texto */
.parallax-text {
  font-size: 36px;
  color: white;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  display: inline-block;
  white-space: nowrap;
  text-align: left; /* Alinea a la izquierda para movimiento desde la derecha */
}

/* Desactivar efecto de distorsión temporalmente */
.parallax-text::before {
  display: none;
}

/* Asegurar visibilidad del header y footer */
header.wp-block-template-part, footer.wp-block-template-part {
  z-index: 20;
  position: relative;
}

/* Ajustes para móviles */
@media (max-width: 768px) {
  .parallax-text {
    font-size: 24px;
  }
  .wp-block-cover.parallax-section {
    min-height: 100vh;
  }
  .transition-overlay {
    min-height: 100px;
  }
}

Java

document.addEventListener('DOMContentLoaded', function () {
  // Animación para el texto del video inicial (opcional, independiente)
  const introText = document.querySelector('.intro-text');
  if (introText) {
    console.log('Texto inicial encontrado');
    introText.classList.remove('visible');
    setTimeout(() => {
      introText.classList.add('visible');
      console.log('Clase visible añadida al texto inicial');
    }, 500);
  } else {
    console.log('Texto inicial NO encontrado');
  }

  // Configuramos el efecto para el texto largo
  const parallaxText = document.querySelector('.parallax-text');
  const parallaxSection = document.querySelector('.parallax-section');

  if (parallaxText && parallaxSection) {
    console.log('Sección parallax encontrada');

    // Envolver el texto en un contenedor
    const textContainer = document.createElement('div');
    textContainer.classList.add('text-container');
    parallaxText.parentNode.insertBefore(textContainer, parallaxText);
    textContainer.appendChild(parallaxText);

    // Calcular dimensiones
    const textWidth = textContainer.scrollWidth; // Ancho total del texto
    const viewportWidth = window.innerWidth; // Ancho de la pantalla
    const scrollRange = textWidth; // Rango de desplazamiento basado en el ancho del texto

    // Ajustar la altura de la sección dinámicamente
    const requiredHeight = (textWidth / viewportWidth) * 100; // Altura en vh proporcional al texto
    parallaxSection.style.minHeight = `${requiredHeight}vh`;

    // Posición inicial del texto (a la mitad del viewport)
    let lastTranslateX = viewportWidth / 2; // Variable para almacenar la última posición
    textContainer.style.transform = `translateX(${lastTranslateX}px)`;

    // Mover el texto con el scroll
    window.addEventListener('scroll', () => {
      const scrollPosition = window.scrollY;
      const sectionTop = parallaxSection.offsetTop;
      const sectionBottom = sectionTop + parallaxSection.offsetHeight;
      const windowHeight = window.innerHeight;

      // Definir rangos para la visibilidad del texto
      const startScroll = sectionTop; // Aparece al llegar a la parte superior de la sección
      const endScroll = sectionBottom - windowHeight; // Desaparece antes de que el footer entre

      if (scrollPosition >= startScroll && scrollPosition <= endScroll) {
        textContainer.classList.add('visible');
        const progress = (scrollPosition - startScroll) / (endScroll - startScroll);
        lastTranslateX = (viewportWidth / 2) - (progress * scrollRange); // Actualiza la última posición
        textContainer.style.transform = `translateX(${lastTranslateX}px)`;
        console.log(`Moviendo texto: translateX(${lastTranslateX}px), scrollPosition: ${scrollPosition}, endScroll: ${endScroll}`);
      } else {
        textContainer.classList.remove('visible');
        // Mantiene la última posición al desvanecerse
        textContainer.style.transform = `translateX(${lastTranslateX}px)`;
        console.log('Texto parallax reseteado, scrollPosition: ${scrollPosition}, endScroll: ${endScroll}, lastTranslateX: ${lastTranslateX}');
      }
    });
  } else {
    console.log('Error: Elementos no encontrados');
    if (!parallaxText) console.log('Texto parallax NO encontrado');
    if (!parallaxSection) console.log('Sección parallax NO encontrada');
  }
});