Animaciones para imágenes al cargarse

JoseZabaleta · 15 May 2023

Hola compañer@s... Quisier lograr alguna animación al cargar una imagen... He encontrado códigos que efectúan la animación al colocar encima el ratón (hover). ¿Se puede aplicar el código al cargarse la imagen? Gracias por cualquier orientación...

BotBeta · 15 May 2023

JoseZabaleta dijo:
Hola compañer@s... Quisier lograr alguna animación al cargar una imagen... He encontrado códigos que efectúan la animación al colocar encima el ratón (hover). ¿Se puede aplicar el código al cargarse la imagen? Gracias por cualquier orientación...

¡Hola!

Sí, es posible aplicar una animación al cargar una imagen en lugar de cuando se coloca el ratón sobre ella. Para hacerlo, puede utilizar la propiedad animation de CSS y aplicarla a la imagen utilizando la pseudoclase :before.

Aquí le proporciono un ejemplo básico de cómo hacerlo:

CSS:

img:before {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  background: url('ruta/de/la/imagen');
  animation: animacion 2s ease forwards;
  z-index: -1;
}

@keyframes animacion {
  from {
    transform: scale(0);
  }
  to {
    transform: scale(1);
  }
}

Lo que hace este código es agregar un pseudo-elemento :before a la imagen, al que se le aplica la animación. El pseudo-elemento se coloca debajo de la imagen, para que la imagen se muestre encima y la animación se vea como si estuviera sucediendo en la imagen misma.

En este caso, la animación es una simple transición de escala de 0 a 1 en 2 segundos. Pero puede cambiarla a cualquier otra que desee. Además, asegúrese de especificar la ruta correcta de la imagen en la propiedad background.

Espero que esto sea útil para usted. ¡Buena suerte!

JoseZabaleta · 15 May 2023

Gracias... Quiero aplicar el efecto al logo del Sitio... y veo en el código varias urls de diferentes copias de la imagen con diferentes tamaños, supongo que para ser mostradas en diferentes dispositivos... ¿Es posible aplicar el efecto a la clase de la img? Gracias de nuevo...

m16u31 · 15 May 2023

JoseZabaleta dijo:
Gracias... Quiero aplicar el efecto al logo del Sitio... y veo en el código varias urls de diferentes copias de la imagen con diferentes tamaños, supongo que para ser mostradas en diferentes dispositivos... ¿Es posible aplicar el efecto a la clase de la img? Gracias de nuevo...

`te das cuenta que te respondió un bot no?

Y si, si puedes hacer lo que comentas. es un callback, pero se maneja con Js, busca en google el codigo es par de lineas

Puko · 15 May 2023

Con keyframe y animacion infinite y transform ...

.aqui {
height: 60px;
width: 180px;
background: url(https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png);
position: absolute;
top: 23px;
animation: animacion 0.6s infinite;
}

@keyframes animacion {
50% {
transform: translateY(-5px);
}
}

JoseZabaleta · 16 May 2023

m16u31 dijo:
`te das cuenta que te respondió un bot no?

Y si, si puedes hacer lo que comentas. es un callback, pero se maneja con Js, busca en google el codigo es par de lineas

No me había dado cuenta... De hecho, al crear el post se me dio la opción de obtener respuesta mediante IA, y no la seleccioné...
Preferiría no utilizar JS, pues tengo entendido que retrasa la carga de la página... En cualquier caso, he buscado, pero no he econtrado nada sencillo... Gracias compañer@...

JoseZabaleta · 16 May 2023

Puko dijo:
Con keyframe y animacion infinite y transform ...

.aqui {
height: 60px;
width: 180px;
background: url(https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png);
position: absolute;
top: 23px;
animation: animacion 0.6s infinite;
}

@keyframes animacion {
50% {
transform: translateY(-5px);
}
}

Como dije en mi primera respuesta: Quiero aplicar el efecto al logo del Sitio... y veo en el código varias urls de diferentes copias de la imagen con diferentes tamaños, supongo que para ser mostradas en diferentes dispositivos... Gracias Puko...

Puko · 16 May 2023

JoseZabaleta dijo:
Como dije en mi primera respuesta: Quiero aplicar el efecto al logo del Sitio... y veo en el código varias urls de diferentes copias de la imagen con diferentes tamaños, supongo que para ser mostradas en diferentes dispositivos... Gracias Puko...

Al css le quitas el background al selector "aqui"
.aqui {
position: absolute;
top: 23px;
animation: animacion 0.6s infinite;
}

y le agregas el class "aqui" a las etiquetas de las imágenes ... : <img class="aqui" ...

<div class="p-header-logo p-header-logo--image">
<a href="https://forobeta.com">
<img class="aqui" src="https://forobeta.com/uploads/forobeta-logo.png" srcset="" alt="ForoBeta | Foro de webmasters" width="255" height="100">
</a>
</div>

RaynierL · 16 May 2023

Tu proyecto utiliza algun framework? en React es realmente sencillo manejar esto a través de los estados.

JoseZabaleta · 17 May 2023

Puko dijo:
Al css le quitas el background al selector "aqui"
.aqui {
position: absolute;
top: 23px;
animation: animacion 0.6s infinite;
}

y le agregas el class "aqui" a las etiquetas de las imágenes ... : <img class="aqui" ...

<div class="p-header-logo p-header-logo--image">
<a href="https://forobeta.com">
<img class="aqui" src="https://forobeta.com/uploads/forobeta-logo.png" srcset="" alt="ForoBeta | Foro de webmasters" width="255" height="100">
</a>
</div>

Gracias Puko... Funciona... Ahora bien, no es una animación infinita la que busco, sino un zoom o un giro que se produzca una vez, al cargarse la imagen... como estos ejemplos: https://www.enriquejros.com/efectos-imagenes-css/#Zoom_y_cambios_de_tamano pero al cargarse la imagen, en lugar de al pasar el mouse...

JoseZabaleta · 17 May 2023

RaynierL dijo:
Tu proyecto utiliza algun framework? en React es realmente sencillo manejar esto a través de los estados.

Hola... Es un Wordpress... Abrazo...

Puko · 17 May 2023

JoseZabaleta dijo:
Gracias Puko... Funciona... Ahora bien, no es una animación infinita la que busco, sino un zoom o un giro que se produzca una vez, al cargarse la imagen... como estos ejemplos: https://www.enriquejros.com/efectos-imagenes-css/#Zoom_y_cambios_de_tamano pero al cargarse la imagen, en lugar de al pasar el mouse...

1. Al selector de la etiqueta <img> que le pusimos "aqui" le ponemos un 'margen' para cuando haga zoom ...
.aqui {
position: absolute;
top: 23px;
left: 34px;
}

2.Si solo es una vez la 'animacion' , le quitamos infinite y dejamos 6s para la velocidad de la animacion...
.aqui {
position: absolute;
top: 23px;
animation: hoverx 6s;
left: 34px;
}

3. Para hacer la animacion hover con keyframes...
3.1 Le pondremos un nombre por ejemplo : "hoverx" ...
@keyframes hoverx{
...
}
3.2 Para la animacion zoom, dividimos el 100% entre 3, cuando inicia, cuando hace zoom y cuando vuelve a su tamaño ...
3.2.1 Cuando inicia le ponemos scale 1, cuando hace zoom 1.2 y cuando vuelve a su tamaño 1 ...

@keyframes hoverx{
0% {
transform: scale(1);
}
50% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}

*Al codepen abajo dale click en "Rerun" para que se vuelva a "cargar"

JoseZabaleta · 19 May 2023

Puko dijo:
1. Al selector de la etiqueta <img> que le pusimos "aqui" le ponemos un 'margen' para cuando haga zoom ...
.aqui {
position: absolute;
top: 23px;
left: 34px;
}

2.Si solo es una vez la 'animacion' , le quitamos infinite y dejamos 6s para la velocidad de la animacion...
.aqui {
position: absolute;
top: 23px;
animation: hoverx 6s;
left: 34px;
}

3. Para hacer la animacion hover con keyframes...
3.1 Le pondremos un nombre por ejemplo : "hoverx" ...
@keyframes hoverx{
...
}
3.2 Para la animacion zoom, dividivos el 100% entre 3, cuando inicia, cuando hace zoom y cuando vuelve a su tamaño ...
3.2.1 Cuando inicia le ponemos scale 1, cuando hace zoom 1.2 y cuando vuelve a su tamaño 1 ...

@keyframes hoverx{
0% {
transform: scale(1);
}
50% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}

*Al codepen abajo dale click en "Rerun" para que se vuelva a "cargar"

Profundamente agradecido Puko... Eres bueno... Abrazo...