Animación de imagenes

Animación de imagenes:Hola a todos . hoy  vamos hacer una animación de de una fotografía en menos de 3 minutos

Este es un tutorial de animaciones de muchos, que vamos a realizar con ejemplos para colocar animaciones en una web, lo vamos a orientar  a cualquier pagina de código abierto pero lo probaremos en el CMS WordPress, para ver los problemas que aparecen

,Empezamos

–Lo primero que haremos será abrir nuestro pagina web https://animacionesweb.online en el explorado firefox, seguramente en las demás exploradores también funcionan pero hay pequeñas diferencias a la hora de tratar el código

En la página principal de nuestra web , podremos ver un gran escenario de un grafico svg , si quieres saber mas  que es svg y para que sirve pues a mi pagina principal de animaciones web comentarios

Lo primero que configuraremos es el espacio.

Realmente solo vamos a ajustar la proporción del escenario ya que si habéis visto mi blog los gráficos svg se pueden hacer  adaptables al “cajón” donde insertemos el código

–Así pues vamos a configuración svg y abrimos parámetros svg

–configuramos nuestro espacio de escenario a 500 x500 para conseguir un svg cuadrado

Como  veis nuestro escenario se ha adaptado proporcionalmente a un grafico de esas dimensiones,

 Para —–los alumnos aventajados podemos ir mirando el código que se va generando apretando botón derecho “inspeccionar elemento”

———————————————————-

Ahora toca insertar una imagen.  Para eso tenemos que subirla a nuestro escenario.

Vamos a Añade-à imágenes aquí os lleva a una página realmente poco currada, prometo arreglarla,  apretamos a examinar–à buscamos en nuestro disco dura que imagen deseamos animarà traemos la imagenà y regresamos a nuestra página de inicio,

Si todo ha ido bien y no ha habido problemas de nombres repetidos, o imágenes  no permitidas etc… podremos ver nuestra imagen  en nuestro escenario

Si es necesario la puedes centrar o escalarla con la estrella de movimiento ,

Vamos a animarla en esta imagen la veo apropiada utilizar la escala pero lógicamente se puede hacer cualquier tipo de trasformación, de desplazamiento, de giro de sesgo y combinaciones etc , de la misma forma que ahora te voy a indicar

Colocamos la imagen como deseamos que empiece la animación

Vamos a crear animaciones css

Allii veremos un regla de transformaciones porcentual le decimos al inicio graba posición actual con esto  hemos marcado el primer keyframe de nuestra animación

Como vamos hacerla sencilla vamos solo vamos a crear el punto final, Hacemos zoom a la imagen con nuestra estrella a la posición que deseemos que termine la animación y marcamos  final  -àgrabar posición actual

 Ya solo queda probar la animación dándole poner en marcha

Podemos modificar el tiempo de la animación que por defecto son 20 segundos

Ya solo nos queda descargar la animación gratis y sin registro alguno ( si quieres modificar esta animación otro día si que tendrás que estar dado de alta en nuestra web.)

Archivo -àdescargar la animación con un clic nos aparecerá otro clic y con otro nos debería descargar la imagen en formato zip( mentira que tengo problemas con los callback de javascript) 😉

Ya la tenemos descargada y podemos ver si funciona arrastra el grafico svg a una pantalla nueva del explorador, la imagen se adaptara ala pantalla de tu ordenador

Vamos a insertarla a nuestra blog.

Ya tenemos descargado el archivo svg, si lo abrimos con cualquier editor de código o con un simple notepad podremos ver el código que se ha generado online, solo nos quedara copiar y pegar en nuestro WordPress como html personalizado, desconozco la causa por qué no me ha permitido agregarlo como una imagen simple,

Un saludo

Animaciones realizadas por https://animacionesweb.online blog de animaciones web https://animacionesweb.com
<svg class="img-responsive" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" preserveAspectRatio="none" viewBox="0 0 500 500 "><defs>
			
			
			<desc> Animaciones realizadas por https://animacionesweb.online </desc>
			                blog de animaciones web https://animacionesweb.com
			
 <style id="css" type="text/css"> 


.a859{animation-duration:5s;
	animation-delay:0s;
	 animation-iteration-count: infinite;
		animation-direction:normal;
			animation-play-state:running;
				animation-name:a859;
                                transition-timing-function:linear;
				animation-fill-mode:none;
 				transform-style:preserve-3d;
					}
						
				@keyframes a859  
						{
						0.1% {
		 
		transform: matrix3d(0.348678,0,0,0,0,0.348678,0,0,0,0,0.348678,0,162.83,162.83,1628.3,1);
		 
		  
	 }
						
						
   						
    					
    	               
	  					
						
						
  						
  						 100% {
		 
		transform: matrix3d(0.994821,0,0,0,0,0.994821,0,0,0,0,0.994821,0,1.29453,1.29453,4645.72,1);
		 
		  
	 }}</style> </defs><g id="todo" style="transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,0,1)">




			<g id="b859">
 <image id="r196tierra1603878113" style="transform:matrix3d(0.348678,0,0,0,0,0.348678,0,0,0,0,0.348678,0,162.83048002,162.83048002,1628.3048002,1)" 


xlink:href="https://animacionesweb.online/imagenes/imagenesclientes/r196tierra.png" 


class="a859" width="500" height="500" x="0" y="0" stroke-width="" stroke="none">


</image></g> 



</g>                     
				  
               
               	 

  
 	 
	  



                </svg>		

Deja un comentario