15 Diseños Web con animaciones SVG fantásticas

Si eres diseñador de paginas web y andas en busca de inspiración para tu próximo proyecto o incluso para diseñar tu portafolio web entonces seguro te interesaran estos diseños web con animaciones SVG. Las animaciones SVG se han convertido en una tendencia en nuestro mundo del diseño web desde hace un par de años, ya que permiten a los diseñadores tener aun mas libertad sin sacrificar calidad de imagen y sin aumentar una carga excesiva a la pagina.

Los elementos SVG (Scalable Vector Graphics) son gráficos escalables; es decir son gráficos vectoriales que podemos manipular o cambiar su tamaño sin preocuparnos por la perdida de calidad. El uso de estos elementos y de las animaciones SVG se ha vuelto una tendencia que acompaña al desarrollo de paginas web responsivas permitiendo la proliferación de pagina visualmente atractivas que explotan de forma correcta el uso de estos recursos.

Otra gran ventaja es el soporte con los navegadores web, en los que el único que muestra ciertos problemas de soporte es Internet Explorer en sus versiones inferiores a la versión 11, a nadie le sorprende esto, estoy seguro.

soporte-svg-navegadores-web

Algunas herramientas útiles para crear animaciones SVG están basadas en JavaScript y son utilizadas por algunos de los sitios que hemos listado abajo, dos de esas herramientas son Snap.svg una librería con una buena cantidad de métodos que nos permiten manipular y hacer magia con gráficos SVG en nuestra pagina web, otra herramienta que no esta enfocada en SVG pero siempre es útil es ScrollMagic.js una librería que nos permitirá manejar a nuestro gusto los eventos scroll de nuestra pagina web. ScrollMagic.js nos permitirá decidir cuando iniciar animaciones sean SVG o CSS en nuestra pagina conforme hagamos scroll sea de forma vertical u horizontal, un fantástica herramienta.

Tutoriales para animaciones SVG 

Diseños Web con animaciones SVG

Dubai Future Accelerators

disenos-con-animacions-svg-dubai-future

Jelvix

disenos-con-animacions-svg-jelvix

Visa 360° Acceptance

Diseños Web con animaciones SVG visa-rio

3Magine

Diseños Web con animaciones SVG 3magine

5 Years with Sutunam!

disenos-con-animacions-svg-5-years-with-sutunam

Arco

disenos-con-animacions-svg-arco

Bellagicons

disenos-con-animacions-svg-bellagicons

Confederation Studio

disenos-con-animacions-svg-confederation-studio

Disrupted Design

disenos-con-animacions-svg-disrupted-by-design

Guglielmo Pardo

disenos-con-animacions-svg-guglielmo-pardo

Happy Birdday

disenos-con-animacions-svg-happy-birdday

Linemotion

disenos-con-animacions-svg-linemotion

Serio Verify

disenos-con-animacions-svg-serio-verify

Type Terms

Diseños Web con animaciones SVG type terms

Le Mugs

Diseños Web con animaciones SVG le-mugs

comment ¿Que opinas?

Artículos recientes

close

Ilustraciones para reflexionar sobre los problemas de la sociedad

Quiero compartir con ustedes unas impactantes ilustraciones realizadas por un artista conocido en Facebook como “Al Margen“; la cuales, nos invitan a reflexionar sobre lo intrincado y vacío de los problemas actuales de la sociedad….

close

El Spinner de Google, la solución a tu estrés y sin gastar tu dinero

Con motivo de la creciente afición y moda de los Spinners para aliviar el estrés muchas empresas han sacado sus versiones de esta simple herramienta; razón por la cual, Google ha decidido no quedarse atrás…

close

play_circle_outline WoodSwimmer, fascinante stop motion hecho con cortes de madera

Brett Foxwell es un fotógrafo creativo que gusta de tomar fotografías en alta definición sobre objetos inanimados “en movimiento”; en esta ocasión presenta su nueva película en Stop Motion denominada WoodSwimmer, la cual, nos sumerge…

close

Conoce el nuevo logo de Opel un diseño acorde a las tendencias 2017

Opel una de las empresas del sector automotriz alemán con mayor presencia en el mundo ha renovado su marca para a “adecuarse al mundo digital”. Este cambio obedece a una nueva dirección de la directiva…

close

Colorstrology, que dice el color de tu nacimiento sobre ti

Colorstrolgy, es una combinación de la astrologia, numerologia y de la teoría del color; esta mezcla conforma un análisis que busca describir la personalidad de las personas mediante el color Pantone asignado a su fecha…

close

Creativa serie fotográfica que recrea escenas de Disney

Savannah Kate Bridge es una profesional de la fotografía que ha utilizado parte de su tiempo libre para una de sus principales aficiones. Esta afición consiste en recrear algunas escenas de películas de Disney mediante…

notifications Recién publicamos
close