Videos animados

Hacer videos animados

Videos animados :Vamos a la parte interesante de esta página, que no es otro cometido que la creación un video animado dentro de una página web.

Como hemos visto en blog anteriores los cuales recomiendo para no perderte el hilo de lo que son animaciones de videos dentro de un archivo svg (gráficos vectoriales ) donde te he explicado que es un archivo svg y como se puede añadir videos dentro de el para después manipularlos con código svg

Recordamos que dentro del grafico svg se puede colocar script de java script y estilos css Pues bien con los estilos de css podemos crear innumerables animaciones sobre cualquier objeto que tengamos el svg ya sea texto, imágenes, gráficos vectoriales o como en este caso videos para crear espectaculares animaciones con solo referirnos a su identificador

En este ejemplo vamos a crear un grafico svg simple, allí colocaremos un video frontal ( el primer video que se ve) y le colocaremos una clase  css de opacidad para que el video se vea transparente y muestre lo que hay detrás de el.

En este caso colocaremos otro video detrás y sobre este le añadiremos una animación web con código css por la que lograremos que el video gire 180 grados sobre su eje y mientras tiene otro encima de el,

Lógicamente este es un ejemplo muy malo de diseño web, estoy seguro que tu como diseñadora web de páginas sabréis sacarle el máximo partido a esta forma de trabajar  a la hora de animar videos web

Sugiero que mientras vais trabajando en vuestros diseños web veáis la compatibilidad con otros navegadores, y si queréis ahorraros código podéis probar mi herramienta online

https://animacionesweb.online que es con o que se ha hecho todos estos ejemplos de animaciones web

<svg class="img-responsive" version="1.1" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" width="500" height="300" viewBox="0 0 500 300">


<style type="text/css">
	#segundovideo{
                  opacity: 0.5;
                     }
       .primervideo{
            animation-play-state:running;animation-duration: 2s;animation-iteration-count: infinite;animation-name:rotacionvideo;
                 }
                 @keyframes rotacionvideo
{
  from {transform: rotateY(0deg);}
  to {transform: rotateY(180deg);}
  }
</style>



    <foreignObject  width="500" height="300"> 
       <video  autoplay="autoplay" loop="loop" class="primervideo"  muted="muted"  preload="auto"       width="500" height="300"   >   		
         <source src="https://animacionesweb.online/videos/City-3134.mp4" type="video/mp4"/>    </video>	
   </foreignObject>	


   <foreignObject id="segundovideo" width="500" height="300"  x="0" y="0" >    <video  autoplay="autoplay" loop="loop"   muted="muted"  preload="auto"       width="500" height="300" class="a491h"  >      
      <source src="https://animacionesweb.online/videos/Reflection-27594.mp4" type="video/mp4"/>        </video> 
   </foreignObject>	


</svg>

Espero que este bog y en los anteriores os sirva para algo, si es así agradecería cualquier tipo de comentario

Muchas gracias por vuestra atención un saludo

No dudéis en hacer preguntas 

Deja un comentario