Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » CSS » Cuando empezar animación

CSS - Cuando empezar animación

Volver
Nuevo Tema
<<>>
 
Vista:
sin imagen de perfil
Val: 82
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Cuando empezar animación

Publicado por Marta (32 intervenciones) el 22/03/2021 23:13:31
Buenas,
Tengo una serie de divs, unos con imágenes animadas, otros no.
No todos los divs están visibles, sino que van apareciendo según scroll.
Existe alguna manera de provocar el inicio de la animación cuando estén visibles?

Gaacias
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de joel
Val: 870
Oro
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Cuando empezar animación

Publicado por joel (252 intervenciones) el 23/03/2021 08:29:18
Hola Marta, a que tipo de animación haces referencia?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil
Val: 82
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Cuando empezar animación

Publicado por Marta (32 intervenciones) el 23/03/2021 09:23:18
Buenas Joel, hablaba en genérico, pero te cuento mi secuencia.

La web es vertical, es decir, un div debajo del otro. Uno de los divs tiene:
- una imagen de fondo,
-un gif animado que suelta una pelota (animación), y
- dos imágenes fijas.

Cuando este div es el primero, cuando ha acabado de cargar la imagen de fondo, la pelota ya está a mitad de camino.
Lo que quiero es que primero se cargue el fondo y luego empieze la animación

Si este div, de ser el primero es el cuarto, cuando bajando con el scroll se visualiza, la pelota ya no está. La solución de bucle infinito no me vale, pues la gracia es que empiece desde el principio

No sé si me he explicado.
Gracias
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil
Val: 82
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Cuando empezar animación

Publicado por Marta (32 intervenciones) el 23/03/2021 10:49:36
Bueno, buscando por internet cómo activar animacion al ser visible en el viewport he encontrado esta solución, que para mi, es justo lo que buscaba.
Lo pongo aquí por si alguien puede estar interesado, y como yo, no lo conocía

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// Crear el observador (Intersection Observer API)
// En la función anónima se recibe una lista de entradas,
//    no importa que solo se observe un elemento
observer = new IntersectionObserver(entries => {
    // Recorrer las entradas recibidas
    entries.forEach(entry => {
      // Está visible en el viewport
      if (entry.intersectionRatio > 0) {
        // entry.target es el elemento que se está observando
        // Agregar la clase para animar
        entry.target.classList.add('animate');
        // Dejar de observar
        observer.unobserve(entry.target);
      }
    });
  });
  // Observar elemento a animar
  observer.observe(document.querySelector('#tuElementoADetectar'));
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
Imágen de perfil de joel
Val: 870
Oro
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Cuando empezar animación

Publicado por joel (252 intervenciones) el 23/03/2021 10:51:24
Ah, entiendo... lo que tu quieres es que una imagen no se carga hasta que otra imagen se haya cargado previamente... habia entendido un problema con una animación de CSS.

Gracias por compartir el código.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil
Val: 82
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Cuando empezar animación

Publicado por Marta (32 intervenciones) el 23/03/2021 10:52:57
Si, más o menos, por lo que exactamente quiero, es empezar la animación cuando el elemento esté visible, ja que no és una animación infinita, sinó que empieza y acaba.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil
Val: 82
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Cuando empezar animación

Publicado por Marta (32 intervenciones) el 23/03/2021 23:17:04
Buenas!!!
Esto no se acaba nunca. Ahora que soy capaz de de detectar cuando un div se hace visible para empezar la animación, quiero ir un poco más allá, y hacer una animación diferente según si el scroll es para arriba o para abajo.

Si bien este código detecta perfectamente la visualización:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// Crear el observador (Intersection Observer API)
// En la función anónima se recibe una lista de entradas,
//    no importa que solo se observe un elemento
observer = new IntersectionObserver(entries => {
    // Recorrer las entradas recibidas
    entries.forEach(entry => {
      // Está visible en el viewport
      if (entry.intersectionRatio > 0) {
        // entry.target es el elemento que se está observando
        // Agregar la clase para animar
        entry.target.classList.add('animate');
        // Dejar de observar
        observer.unobserve(entry.target);
      }
    });
  });
  // Observar elemento a animar
  observer.observe(document.querySelector('#tuElementoADetectar'));

Este otro ejemplo es capaz de detectar si el scroll es para arriba o para abajo:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
const state = document.querySelector('.observer__state')
const target = document.querySelector('.observer__target')
 
const thresholdArray = steps => Array(steps + 1)
 .fill(0)
 .map((_, index) => index / steps || 0)
 
let previousY = 0
let previousRatio = 0
 
const handleIntersect = entries => {
  entries.forEach(entry => {
    const currentY = entry.boundingClientRect.y
    const currentRatio = entry.intersectionRatio
    const isIntersecting = entry.isIntersecting
 
    // Scrolling down/up
    if (currentY < previousY) {
      if (currentRatio > previousRatio && isIntersecting) {
        state.textContent ="Scrolling down enter"
      } else {
        state.textContent ="Scrolling down leave"
      }
    } else if (currentY > previousY && isIntersecting) {
      if (currentRatio < previousRatio) {
        state.textContent ="Scrolling up leave"
      } else {
        state.textContent ="Scrolling up enter"
      }
    }
 
    previousY = currentY
    previousRatio = currentRatio
  })
}
 
const observer = new IntersectionObserver(handleIntersect, {
  threshold: thresholdArray(20),
})
 
observer.observe(target)

1
2
<div class="observer__target"></div>
<span class="observer__state"></span>

Veo el if donde se detecta si el scroll es para arriba o para abajo, pero no soy capaz de entender como indicar una animación u otra, es decir, cuando se baja la animación sería:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.pelota {
    position: relative;
    top: -1000px;
    right: -35%;
    width: 5vw;
    height: 5vw;
    opacity: 0;
    border-radius: 50%;
    background: #d01318;
    animation-name: abajo ;
    animation-duration: 5s;
    animation-delay: 5s;
    animation-fill-mode: forwards;
    z-index: 1;
}
 
@keyframes abajo {
    0%   {opacity:0.5; top: -5vh; transform:scale(0.3, 0.3);}
    100% {opacity:0.5; top: 25vh; transform:scale(2.5, 2.5);}
}

Y cuando se sube, sería al revés:
1
2
3
4
@keyframes arriba {
    0% {opacity:0.5; top: 25vh; transform:scale(2.5, 2.5);}
    1000%   {opacity:0.5; top: -5vh; transform:scale(0.3, 0.3);}
}

És posible?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar