0

veran tengo los siguientes efectos para mi seccion .

/* Agregamos la propiedad "opacity: 0" para que los elementos estén ocultos al principio */

.animado-1,
.animado-2,
.animado-3 {
  opacity: 0;
}

/* Agregamos las clases ".animado-titulo", ".animado-subtitulo" y ".animado-descripcion" a los elementos que queremos animar */
.animado-1 {
  animation: aparecer 1s ease-out forwards;
}

.animado-2 {
  animation: aparecer 1s ease-out forwards;
  animation-delay: 0.3s;
}

.animado-3 {
  animation: aparecer 1s ease-out forwards;
  animation-delay: 0.6s;
  opacity: 1;
  transform: translateY(0);
}


/* Creamos la animación "aparecer" */
@keyframes aparecer {
  from {
    opacity: 0;
    transform: translateY(50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

tambien les muestro el javascript que deberia aplicar esa animacion no solo al recargar si no tambien cuando haga scroll.

const elementosAnimados = document.querySelectorAll('.animado-1, .animado-2, .animado-3');

function animarElementos() {
  elementosAnimados.forEach(elemento => {
    const posicion = elemento.getBoundingClientRect().top;
    const pantalla = window.innerHeight;
    
    if (posicion < pantalla * 0.8 && posicion > -pantalla * 0.2) {
      elemento.classList.add('animado');
    } else {
      elemento.classList.remove('animado');
    }
  });
}
// Ejecutamos la función al cargar la página
animarElementos();
window.addEventListener('scroll', animarElementos); // Ejecutamos la función cada vez que se hace scroll

el punto es que al desplazarme hacia arriba o abajo no veo cambios, solo al recargar y como soy nuevo en esto se me dificulta encontrarel error. aqui les dejo el html por si sirve de algo

 <main>
        <section class="services-contenedor" id="servicio">
            <h2 class="subtitulo animado-1">Nuestro servicio</h2>
            <div class="contenedor-servicio">
        
                <div class="checklist-servicio">
                    <div class="service animado-2">
                        <h3 class="n-service"><span class="number"></span>Salas De Velacion</h3>

                        <p class ="fuente-parrafos animado-3"> Ofrecemos un entorno acogedor para brindar consuelo a nuestros clientes. En funerales ebenezer, nos esforzamos por brindar servicios funerarios excepcionales que satisfagan las necesidades de cada uno de ellos</p>
                        
                        <div class="contenedor-galeria">
                        <img class="tamano-velacion img-galeria" src="img/saladevelacion.JPEG" alt="">
                        <img class="tamano-velacion img-galeria" src="img/saladevelacion2.JPEG" alt="">
                        <img class="tamano-velacion img-galeria" src="img/saladevelacionnew.JPEG" alt="">

                    </div>
                    </div>
                    
                </div>
            </div>
        </section>

y una imagen porque no. introducir la descripción de la imagen aquí

1 respuesta 1

3

Lo que entiendo que quieres hacer es: generar una animación cuando el elemento es visible en pantalla, donde:

  • Se debe animar los objetos que se muestran al inicio
  • Luego ir animando objetos que van apareciendo a medida que se hace scroll

Javascript tiene una funcionalidad especial para esto que se llama Intersection Observer API, con la cual puedes verificar cuando un elemento entra o sale de su contenedor (por default el viewport) e incluso el porcentaje de intersección entre ambos.

const elementosAnimados = document.querySelectorAll('.animado');

let observer = new IntersectionObserver(
  observados => {
      for (let o of observados) {
          if (o.isIntersecting) {
            o.target.style["animation-play-state"]="running";
          }
      }
  },{ threshold:0.75}
);

elementosAnimados.forEach(elemento =>observer.observe(elemento));
.animado {
  animation: aparecer 1s ease-out forwards;
  animation-play-state: paused;
}


@keyframes aparecer {
  from {
    opacity: 0;
    transform: translateY(50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
<section class="services-contenedor animado" id="1" >
    <h2 class="subtitulo">Nuestro servicio</h2>
    <div class="contenedor-servicio">

        <div class="checklist-servicio">
            <div class="service">
                <h3 class="n-service"><span class="number"></span>Salas De Velacion</h3>

                <p class ="fuente-parrafos animado-3"> Ofrecemos un entorno acogedor para brindar consuelo a nuestros clientes. En funerales ebenezer, nos esforzamos por brindar servicios funerarios excepcionales que satisfagan las necesidades de cada uno de ellos</p>

            </div>

        </div>
    </div>
</section>

<section class="services-contenedor animado" id="2" >
    <h2 class="subtitulo">Nuestro servicio</h2>
    <div class="contenedor-servicio">

        <div class="checklist-servicio">
            <div class="service">
                <h3 class="n-service"><span class="number"></span>Salas De Velacion</h3>

                <p class ="fuente-parrafos animado-3"> Ofrecemos un entorno acogedor para brindar consuelo a nuestros clientes. En funerales ebenezer, nos esforzamos por brindar servicios funerarios excepcionales que satisfagan las necesidades de cada uno de ellos</p>

            </div>

        </div>
    </div>
</section>


<section class="services-contenedor animado" id="3" >
    <h2 class="subtitulo">Nuestro servicio</h2>
    <div class="contenedor-servicio">

        <div class="checklist-servicio">
            <div class="service">
                <h3 class="n-service"><span class="number"></span>Salas De Velacion</h3>

                <p class ="fuente-parrafos animado-3"> Ofrecemos un entorno acogedor para brindar consuelo a nuestros clientes. En funerales ebenezer, nos esforzamos por brindar servicios funerarios excepcionales que satisfagan las necesidades de cada uno de ellos</p>

            </div>

        </div>
    </div>
</section>

<section class="services-contenedor animado" id="4" >
    <h2 class="subtitulo">Nuestro servicio</h2>
    <div class="contenedor-servicio">

        <div class="checklist-servicio">
            <div class="service">
                <h3 class="n-service"><span class="number"></span>Salas De Velacion</h3>

                <p class ="fuente-parrafos animado-3"> Ofrecemos un entorno acogedor para brindar consuelo a nuestros clientes. En funerales ebenezer, nos esforzamos por brindar servicios funerarios excepcionales que satisfagan las necesidades de cada uno de ellos</p>

            </div>

        </div>
    </div>
</section>


<section class="services-contenedor animado" id="5" >
    <h2 class="subtitulo">Nuestro servicio</h2>
    <div class="contenedor-servicio">

        <div class="checklist-servicio">
            <div class="service">
                <h3 class="n-service"><span class="number"></span>Salas De Velacion</h3>

                <p class ="fuente-parrafos animado-3"> Ofrecemos un entorno acogedor para brindar consuelo a nuestros clientes. En funerales ebenezer, nos esforzamos por brindar servicios funerarios excepcionales que satisfagan las necesidades de cada uno de ellos</p>

            </div>

        </div>
    </div>
</section>


<section class="services-contenedor animado" id="6" >
    <h2 class="subtitulo">Nuestro servicio</h2>
    <div class="contenedor-servicio">

        <div class="checklist-servicio">
            <div class="service">
                <h3 class="n-service"><span class="number"></span>Salas De Velacion</h3>

                <p class ="fuente-parrafos animado-3"> Ofrecemos un entorno acogedor para brindar consuelo a nuestros clientes. En funerales ebenezer, nos esforzamos por brindar servicios funerarios excepcionales que satisfagan las necesidades de cada uno de ellos</p>

            </div>

        </div>
    </div>
</section>


<section class="services-contenedor animado" id="7" >
    <h2 class="subtitulo">Nuestro servicio</h2>
    <div class="contenedor-servicio">

        <div class="checklist-servicio">
            <div class="service">
                <h3 class="n-service"><span class="number"></span>Salas De Velacion</h3>

                <p class ="fuente-parrafos animado-3"> Ofrecemos un entorno acogedor para brindar consuelo a nuestros clientes. En funerales ebenezer, nos esforzamos por brindar servicios funerarios excepcionales que satisfagan las necesidades de cada uno de ellos</p>

            </div>

        </div>
    </div>
</section>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.