Este documento describe cómo se puede lograr efectos similares a la rotoscopia en la web utilizando animaciones CSS. Explica que la rotoscopia involucra dibujar sobre algo grabado, mientras que la motion graphics es vectorial. Luego detalla cómo propiedades como clip-path, filtros y blend modes pueden usarse para "recortar" videos, aplicar efectos y combinar videos y animaciones de manera interactiva, logrando efectos parecidos a la rotoscopia pero aprovechando las capacidades del medio web. Finalmente, concluye que esto no es exact

1. Más allá de los Keyframes

2. Evangelina Ferreira
• Desarrolladora Front-End
• Aerolab
• Docente
• Co-organizadora de CSSConf Argentina

3. <3 Animación <3

7. “¿Rotoscopia en la web?”
- Mente de Eva

8. “Hell YEAH”

9. “Hell YEAH”
… Taaaaaaal vez!

10. SVG y Clip-Path
… podría funcionar.

11. …

12. ¿Y Motion Graphics?

13. ¡PAREN TODO!
¿Qué es Motion Graphics?
¿Qué es la Rotoscopia?

14. Rotoscopia
Dibujar sobre algo grabado

15. Rotoscopia 1900

16. Rotoscopia hoy

18. Rotoscopia

19. 15 a 25 fps

21. Motion Graphics
Vectorial

23. Entonces…
¿En la web? ¿En el navegador?

24. Rotoscopia no.
Rotoscopia es un arte manual.

26. ¡Motion Graphics sí!
SVG Al rescate

27. Lucas Bebber

28. Chris GannonChris Gannon

29. Sarah Drasner

30. ¡Motion Graphics
ya está con nosotros!

32. Pedacitos de Rotoscopia

33. Animación sobre
vídeo ya grabado

34. Vamos a buscar vídeos!
Vimeo -> Filtrar por Copyright y descargar!

35. Dos vídeos
Animación random Vídeo “común”

38. Clip-Path
• “Recortar” el vídeo
• Distintas shapes
• Círculo
• Elipse
• Inset (rectángulo con bordes redondeados)
• Polígonos
• Forma con curvas realizada con SVG

39. Clip-Path -> demo1

40. Clip-Path x2

41. Segundo vídeo espejado

42. Es animable
:D

43. Animable -> demo1

44. Animable

45. 
Soporte

46. Soporte actual

47. Op. 2
Abrir Photoshop

49. Capas, el vídeo por debajo -> demo2

50. OK Firefox!
OK Chrome!
OK Edge!
OK IE 9+!

51. Girls just wanna have fun.
Olvidate de IE. Olvidate de Edge. Firefox te quiero.

52. Super propiedades de CSS
• Clip-Path: http://caniuse.com/#feat=css-clip-path
• Filter: http://caniuse.com/#feat=css-filters
• Blend-Modes: http://caniuse.com/#feat=css-mixblendmode

53. Filter

54. Blend Modes

55. Bennett Feely
• Clippy
• Blend Modes: http://bennettfeely.com/gradients/
• Filters: http://bennettfeely.com/filters/
• -------
• CSS Blender: http://www.sarasoueidan.com/demos/css-blender/
• Sara Soueidan

56. demo3
Con transitions y animations!

57. Filtros

58. + Clip-Path
(Solo Chrome por ahora)

59. Clip-Path -> demo4

60. Clip-Path +
Filtros

61. Blend Modes
De dos vídeos
O vídeo e imagen
O vídeo y animación

62. Blend Modes -> demo5

63. Blend all this

64. Más interactivo
Clip-Path con :hover, filters y blend-modes!

65. Todo junto, pero interactivo! -> demo6

67. No, no es rotoscopia

68. Es Motion Graphics aplicado
como Rotoscopia interactiva
¡Pedile a tu TV que haga esto!
Aprovecha el medio en el que estás!!!

69. Ah, y es solo CSS
Y probablemente pueda mejorarse MUCHO más con algo de JS :D

70. ¡Gracias!
@evaferreira92
Slides y códigos: https://github.com/evaferreira/mas-alla-de-keyframes/