Parallax desplazando y alternando texto simultáneamente

Para prefacio, esto podría ser útil para ver: http://www.sbs.com.au/theboat/

Estoy tratando de replicar un efecto similar aquí: https://codepen.io/summeropratt/pen/ExgXYwa

    

      

        

          

            
info 1
          
          

            
info 2
          
 
          

            
info 3
          
 
          

            
info 4
          
  
        
      
    

Esto es lo que estoy luchando con:

1. Me gustaría idealmente que el texto se desvaneciera dentro y fuera. Primero ves que "info 1" se desvanecen en la vista y luego se desvanecen antes de ver "info 2" se desvanecen, etc.

2. En el snippet actual, el pergamino de paralaja comienza tan pronto como el ratón agita el elemento. Este es un problema cuando el ratón está hacia la parte inferior de la pantalla y todo el ".card-body" no está en la vista. Corta el contenido. Entiendo por qué, pero ¿cómo puedo superar esto? Quiero que toda la vista sea el fondo azul y nada más.

Pregunta hecha hace 3 años, 4 meses, 28 días - Por devninjax

2 Respuestas:

• Para lograr el efecto que deseas en tu código, puedes seguir estos pasos:

  • Para que el texto se desvanezca dentro y fuera en lugar de moverse con el efecto de parallax, puedes utilizar transiciones CSS. Puedes agregar una clase de transición que controle el efecto de desvanecimiento y ajustar la opacidad de los elementos ".card". Aquí te muestro un ejemplo con CSS:

  css
  .cards {
    display: flex;
  }
  
  .card {
    opacity: 0;
    transition: opacity 0.5s ease;
  }
  
  .card.active {
    opacity: 1;
  }
  

  Luego, puedes usar JavaScript para agregar y quitar la clase "active" para controlar el desvanecimiento de cada tarjeta a medida que se desplaza.

  • Respecto al problema de que el parallax se active al agitar el ratón en la parte inferior de la pantalla, puedes controlar esto utilizando JavaScript para verificar si todos los elementos de ".card-body" están dentro de la vista antes de activar el efecto de parallax. Puedes usar la propiedad getBoundingClientRect() para obtener las coordenadas y dimensiones de un elemento y compararlas con las coordenadas y dimensiones de la ventana del navegador. Aquí te dejo un ejemplo de cómo podrías hacerlo:

  js
  window.addEventListener('mousemove', function(event) {
    const cards = document.querySelectorAll('.card');
  
    if (isElementInViewport(cards[0])) {
      cards.forEach(card => {
        card.classList.add('active');
      });
    } else {
      cards.forEach(card => {
        card.classList.remove('active');
      });
    }
  });
  
  function isElementInViewport(el) {
    var rect = el.getBoundingClientRect();
    return (
      rect.top >= 0 &&
      rect.left >= 0 &&
      rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
      rect.right <= (window.innerWidth || document.documentElement.clientWidth)
    );
  }
  

  Con esto, puedes controlar el efecto de parallax para que solo se active cuando todos los elementos estén dentro de la vista. Recuerda ajustar los valores según tu diseño y necesidades específicas.

  Respondida el Dec 18, 2020 a las 21:06 - por Gpt

  Votos positivos: 0 | Votos negativos: 0

  Votar positivo

  Votar negativo

---

• 1. Desvanecimiento del texto

  Para desvanecer el texto, puedes utilizar la propiedad opacity de CSS. Agrega lo siguiente a la hoja de estilos:

  css
  .card {
    transition: opacity 0.5s ease;
    opacity: 0;
  }
  
  .card--inner {
    position: relative;
    overflow: hidden;
  }
  
  .card--inner .card {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  
  .card--inner .card:nth-child(1) {
    opacity: 1;
  }
  

  Luego, puedes agregar el siguiente código JavaScript para alternar la opacidad de los elementos de la tarjeta:

  javascript
  const cards = document.querySelectorAll('.card');
  let currentIndex = 0;
  
  window.addEventListener('scroll', () => {
    const scrollTop = window.scrollY;
    const cardBodyOffsetTop = document.querySelector('.card-body').offsetTop;
  
    if (scrollTop > cardBodyOffsetTop) {
      currentIndex++;
      if (currentIndex < cards.length) {
        cards[currentIndex].style.opacity = 1;
        cards[currentIndex - 1].style.opacity = 0;
      }
    }
  });
  

  2. Iniciar el desplazamiento de paralaje solo cuando el elemento está visible

  Para iniciar el desplazamiento de paralaje solo cuando el elemento está visible, puedes usar la propiedad IntersectionObserver de JavaScript. Agrega lo siguiente a la hoja de estilos:

  css
  .relaxes {
    opacity: 0;
  }
  

  Luego, puedes agregar el siguiente código JavaScript:

  javascript
  const relaxes = document.querySelectorAll('.relaxes');
  
  relaxes.forEach((relax) => {
    const observer = new IntersectionObserver((entries) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          relax.classList.add('is-intersecting');
        }
      });
    });
  
    observer.observe(relax);
  });
  

  Esto hará que los elementos con la clase relaxes se desvanezcan inicialmente y solo se muestren cuando estén en la vista.

  Respondida el Dec 18, 2020 a las 21:19 - por Gemini

  Votos positivos: 0 | Votos negativos: 0

  Votar positivo

  Votar negativo

---