Animar?!
¡Con código!

María Evangelina Ferreira Kuzminski

¡Hola!

Itinerario para hoy

  1. La Historia de mi Vida
  2. ¿Cómo animamos en 2016?
  3. CSS Vs. JS
  4. ¡Almuerzo!

La historia de mi vida

2007 - 2008

2007 - 2008

Turbo Pascal

Captura Turbo Pascal

Mientras...

Tenía un blog en Terra, después lo pasé a Blogger

HTML & CSS

¡Creé mi primer sitio!

CD-Art

Captura mi primer sitio

Puerta 18

¡Eureka!

Che, ¡programar está bueno!

Pasaron los años...

2010 - 2015

Traducción?!

2013

Hermione happy

Volví

Diseño Multimedia

2014

"Animación"

Recordando mis años de Puerta 18

"Búsqueda implacable"

"Un viaje inesperado"

Historia del proyecto

1 día cortando papelitos
2 días de grabación
3 días de edición
3 personas

Guión

Guión

Storyboard

Storyboard Storyboard Storyboard

Conseguir elementos

Armado elementos

Atar para eje de movimientos

Dino

Grabación

Grabación

Grabación

Grabación

Un año después

¿Algo así en la web?

Algo así en la web

OMG Janice Friends TV show

¿Qué hubiera hecho la Eva de 16 años?

"Flash!"

Con Flash era fácil

... Lo pirateabas y listo

You can't sit with us - Mean Girls

¿Con qué reemplazo a Flash?

La barrera era baja

¿Qué lo reemplazó?

Elementos de hoy

2011 +

Canvas es... ¿exagerado para esto?

Y la barrera NO es baja

SVG es amigable

SVG

SVG es herramienta suficiente

¡A trabajar!

Paso 1

Conseguir elementos

www . freepik . com

¡Al rescate!

Bicicleta

Bicicleta de freepik.com

Bosque / Árboles

Árboles de freepik.com

Paso 2

Re-Armar en Illustrator

¡Nombre a todo!

Agregar nombres a objetos en Illustrator

Paso 3

¡Animar!

Bicicleta

  1. Movimiento en X
  2. Movimiento ruedas

SVG

Basado en XML SVG code

SVG bicicleta

	<g id="bici-completa">
		<g id="rueda-atras">...</g>
		<g id="rueda-adelante">...</g>
	</g>
		

Movimiento en X

Mover las ruedas sobre su eje

Transform-origin absoluto

Transform-origin absoluto

Eje de rotación desde Illustrator

¿Y por qué no "center center"?

Por el "bug" que nunca fue "bug"

Transform-Box

Sobre transform-box en MDN

Movimiento ruedas

Movimiento ruedas

¡Los dos juntos!

Bosque

  1. Árboles
  2. Montañas

Capas

Firewatch

Firewatch website

Perspectiva y profundidad

Separar en capas

4 capas, 4 SVG

Capas

  1. Montañas
  2. Árboles fondo
  3. Árboles medio
  4. Árboles frente

Mover las capas

Background-Position

El HTML

	<div class="escenario">
		<div id="montanias"></div>
		<div id="arboles-fondo"></div>
		<div id="arboles-medio"></div>
		<div id="arboles-frente"></div>
	</div>
		

Position relative y overflow hidden!
Backgrounds con repeat-x y bg-position: bottom!

Moviendo fondos

Capas

Planos

Planos

Planos Planos

Planos

Planos Planos

Acercamiento

Planos

Colores que giran

Colores que giran

Música

Audio

Happy Together video by The Turtles

Happy Together,
The Turtles

Play

Adobe Premiere

La editamos con algún software

O... Usamos JavaScript

currentTime y timeupdate :D

Play - Entre segundos

¡¿85.3?!

Árboles drogados

Filter

Hue-Rotate

Hue-Rotate

Color Wheel

Hue-Rotate

Mismo brillo, misma luminosidad

Hue-Rotate Simple

Hue-Rotate Completo

¡Ahora todo junto!

A delirar

Entonces...

No es sobre CSS Vs. JS

Roll Eyes gif

Es sobre SVG

Chuck Norris approves

SVG ROCKZ!

Tres últimas cosas

Team work

Planificación

La importancia de lo inútil

¡Gracias!

/