Animacion imagenes

Animación imágenes:

 Hola  vamos  a realizar un animación com imágenes explicaremos paso a paso como es el código de dichas animaciones y después lo ultimo diré como se puede realizar dichas animaciones sin ningún tipo de plugins, ni escribir código, válido para WordPress.

Estoy seguro que existe algún pungís WordPress que realiza este tipo de animación web, pero luego no os quejéis que vuestra web va lenta, ya que el exceso de plugin, completos o bibliotecas  aumenta la velocidad de carga de la web

Insertar imagen en html

Un primer paso para hacer animación imágenes es saber Colocar fotografías en una página web, Insertar imagenes es francamente fácil si se sabe como y donde colocar ese código.

En una página web normal el código  html para agregar una imagen sería algo así

<img id="nombre" src=" https://animacionesweb.com/wp-content/uploads/2020/10/tierra.png"  alt="Este es el ejemplo de un texto alternativo" width="500" height="500">

Este es el ejemplo de un texto alternativo

Partes del código más usuales en colocacion de una imagen

En ese código podemos identificar claramente varias secciones

<img                    Es la etiqueta de apertura para insertar imágenes en una web

id=»nombre» Es un indicador que contiene un nombre, a el nos referiremos para saber de que imagen se trata cuando trabajemos con código javascript

src=»» Es donde está alojada nuestra imagen dentro del servidor , si copiamos y pegamos la dirección https en una nueva ventana veremos la imagen aislada de cualquier otro código.

alt=”” Una explicación breve de tu imagen sirve mucho para el SEO

width=»» height=»» Altura y la anchura de la imágenes

Hay mas etiquetas html que iremos poco a poco desgranado el código html para que el lector de mi web pueda escribir el código desde cero hasta impresionantes animaciones web como las del ejemplo de la derecha

En WordPress podemos colocar una imagen desde la biblioteca de medios o colocando el código anterior con el boton HTMLpersonalizado

imagenes para animaciones web

Si vamos al editor de código de WordPress veremos que nos ha generado este código al insertar la imagen añadida a través de su biblioteca, como veis el código es muy parecido.

Con estas pequeñas reglas ya podemos añadir imágenes con código con el botón html personalizado con solo copiar y pegar, Este es un paso inicial a la hora de crear animacion de imágenes con código

<figure class="wp-block-image size-large is-style-default">
<img src="https://animacionesweb.com/wp-content/uploads/2020/10/luna.png" alt="" class="wp-image-741"/>
</figure>

Y si prefieres generar animaciones web sin manejar ningún tipo de código online y gratis aquí te dejo el link de nuestra pagina web donde creamos las animaciones web online

Deja un comentario