Parallax: Contenido (CSS y Código)

He hecho un video de como animar contenido con el efecto Parallax en WordPress sin plugins.

CSS usado

.article-section {
  opacity: 0;
  transform: translateY(50px);
  transition: all 0.8s ease-in-out; /* Aumenta la duración para más suavidad */
  margin: 20px 0; /* Reduce el margen para menos separación */
  padding: 20px;
  min-height: 300px;
}

.article-section.visible {
  opacity: 1;
  transform: translateY(0);
}

.article-section.from-left {
  transform: translateX(-50px);
}
.article-section.from-left.visible {
  transform: translateX(0);
}

.article-section.from-right {
  transform: translateX(50px);
}
.article-section.from-right.visible {
  transform: translateX(0);
}

.article-section.from-diagonal {
  transform: translate(50px, 50px);
}
.article-section.from-diagonal.visible {
  transform: translate(0, 0);
}

.article-section:not(.visible) {
  visibility: hidden;
  height: 0;
  overflow: hidden;
  margin: 0;
  transition: all 0.8s ease-in-out; /* Asegura que la desaparición también sea suave */
}

.text-bodyL {
  font-size: 1.2rem;
  line-height: 1.6;
  font-family: Arial, sans-serif;
}

/* Responsivo para móviles */
@media (max-width: 768px) {
  .article-section {
    min-height: 200px;
    margin: 10px 0;
    padding: 10px;
  }
}

Java

document.addEventListener('DOMContentLoaded', function () {
  const sections = document.querySelectorAll('.article-section');

  const observer = new IntersectionObserver(
    (entries) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          entry.target.classList.add('visible'); // Añade clase cuando entra en el viewport
        } else {
          entry.target.classList.remove('visible'); // Quita clase cuando sale del viewport
        }
      });
    },
    {
      threshold: 0.3, // Activa cuando el 30% de la sección es visible
      rootMargin: '-30% 0px -30% 0px' // Ajusta para que la sección se oculte antes de salir completamente
    }
  );

  sections.forEach((section) => {
    observer.observe(section);
  });
});