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>