Enviar búsqueda
Cargar
Más allá de los Keyframes - Char.la Mayo 2017
•
Descargar como PPTX, PDF
•
0 recomendaciones
•
265 vistas
Evangelina Ferreira
Seguir
Charla dictada en la edición de mayo de Char.la.
Leer menos
Leer más
Tecnología
Denunciar
Compartir
Denunciar
Compartir
1 de 70
Descargar ahora
Recomendados
Presentación de Cristalab Peru 2007
Presentación de Cristalab Peru 2007
John Freddy Vega
Android studio; migrar o no migrar...esa es la cuestión
Android studio; migrar o no migrar...esa es la cuestión
SlashMobility.com
Animando con sass
Animando con sass
Evangelina Ferreira
Introducción a html
Introducción a html
Evangelina Ferreira
"Los Mitos de la Semántica Web" - Wordcamp BA 2015
"Los Mitos de la Semántica Web" - Wordcamp BA 2015
Evangelina Ferreira
Seminario de Introducción a Google Adwords y Marketing
Seminario de Introducción a Google Adwords y Marketing
Evangelina Ferreira
2024 State of Marketing Report – by Hubspot
2024 State of Marketing Report – by Hubspot
Marius Sescu
Everything You Need To Know About ChatGPT
Everything You Need To Know About ChatGPT
Expeed Software
Recomendados
Presentación de Cristalab Peru 2007
Presentación de Cristalab Peru 2007
John Freddy Vega
Android studio; migrar o no migrar...esa es la cuestión
Android studio; migrar o no migrar...esa es la cuestión
SlashMobility.com
Animando con sass
Animando con sass
Evangelina Ferreira
Introducción a html
Introducción a html
Evangelina Ferreira
"Los Mitos de la Semántica Web" - Wordcamp BA 2015
"Los Mitos de la Semántica Web" - Wordcamp BA 2015
Evangelina Ferreira
Seminario de Introducción a Google Adwords y Marketing
Seminario de Introducción a Google Adwords y Marketing
Evangelina Ferreira
2024 State of Marketing Report – by Hubspot
2024 State of Marketing Report – by Hubspot
Marius Sescu
Everything You Need To Know About ChatGPT
Everything You Need To Know About ChatGPT
Expeed Software
Proyecto integrador. Las TIC en la sociedad S4.pptx
Proyecto integrador. Las TIC en la sociedad S4.pptx
241521559
SalmorejoTech 2024 - Spring Boot <3 Testcontainers
SalmorejoTech 2024 - Spring Boot <3 Testcontainers
Iván López Martín
ATAJOS DE WINDOWS. Los diferentes atajos para utilizar en windows y ser más e...
ATAJOS DE WINDOWS. Los diferentes atajos para utilizar en windows y ser más e...
FacuMeza2
International Women's Day Sucre 2024 (IWD)
International Women's Day Sucre 2024 (IWD)
GDGSucre
Cortes-24-de-abril-Tungurahua-3 año 2024
Cortes-24-de-abril-Tungurahua-3 año 2024
GiovanniJavierHidalg
guía de registro de slideshare por Brayan Joseph
guía de registro de slideshare por Brayan Joseph
BRAYANJOSEPHPEREZGOM
POWER POINT YUCRAElabore una PRESENTACIÓN CORTA sobre el video película: La C...
POWER POINT YUCRAElabore una PRESENTACIÓN CORTA sobre el video película: La C...
silviayucra2
Redes direccionamiento y subredes ipv4 2024 .pdf
Redes direccionamiento y subredes ipv4 2024 .pdf
soporteupcology
KELA Presentacion Costa Rica 2024 - evento Protégeles
KELA Presentacion Costa Rica 2024 - evento Protégeles
Fundación YOD YOD
Instrumentación Hoy_ INTERPRETAR EL DIAGRAMA UNIFILAR GENERAL DE UNA PLANTA I...
Instrumentación Hoy_ INTERPRETAR EL DIAGRAMA UNIFILAR GENERAL DE UNA PLANTA I...
AlanCedillo9
Global Azure Lima 2024 - Integración de Datos con Microsoft Fabric
Global Azure Lima 2024 - Integración de Datos con Microsoft Fabric
Keyla Dolores Méndez
La era de la educación digital y sus desafios
La era de la educación digital y sus desafios
Fundación YOD YOD
PARTES DE UN OSCILOSCOPIO ANALOGICO .pdf
PARTES DE UN OSCILOSCOPIO ANALOGICO .pdf
SergioMendoza354770
EPA-pdf resultado da prova presencial Uninove
EPA-pdf resultado da prova presencial Uninove
FagnerLisboa3
Plan de aula informatica segundo periodo.docx
Plan de aula informatica segundo periodo.docx
pabonheidy28
Trabajo Mas Completo De Excel en clase tecnología
Trabajo Mas Completo De Excel en clase tecnología
ssuserf18419
trabajotecologiaisabella-240424003133-8f126965.pdf
trabajotecologiaisabella-240424003133-8f126965.pdf
IsabellaMontaomurill
Hernandez_Hernandez_Practica web de la sesion 12.pptx
Hernandez_Hernandez_Practica web de la sesion 12.pptx
JOSEMANUELHERNANDEZH11
CLASE DE TECNOLOGIA E INFORMATICA PRIMARIA
CLASE DE TECNOLOGIA E INFORMATICA PRIMARIA
WilbisVega
Product Design Trends in 2024 | Teenage Engineerings
Product Design Trends in 2024 | Teenage Engineerings
Pixeldarts
How Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental Health
ThinkNow
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
marketingartwork
Más contenido relacionado
Último
Proyecto integrador. Las TIC en la sociedad S4.pptx
Proyecto integrador. Las TIC en la sociedad S4.pptx
241521559
SalmorejoTech 2024 - Spring Boot <3 Testcontainers
SalmorejoTech 2024 - Spring Boot <3 Testcontainers
Iván López Martín
ATAJOS DE WINDOWS. Los diferentes atajos para utilizar en windows y ser más e...
ATAJOS DE WINDOWS. Los diferentes atajos para utilizar en windows y ser más e...
FacuMeza2
International Women's Day Sucre 2024 (IWD)
International Women's Day Sucre 2024 (IWD)
GDGSucre
Cortes-24-de-abril-Tungurahua-3 año 2024
Cortes-24-de-abril-Tungurahua-3 año 2024
GiovanniJavierHidalg
guía de registro de slideshare por Brayan Joseph
guía de registro de slideshare por Brayan Joseph
BRAYANJOSEPHPEREZGOM
POWER POINT YUCRAElabore una PRESENTACIÓN CORTA sobre el video película: La C...
POWER POINT YUCRAElabore una PRESENTACIÓN CORTA sobre el video película: La C...
silviayucra2
Redes direccionamiento y subredes ipv4 2024 .pdf
Redes direccionamiento y subredes ipv4 2024 .pdf
soporteupcology
KELA Presentacion Costa Rica 2024 - evento Protégeles
KELA Presentacion Costa Rica 2024 - evento Protégeles
Fundación YOD YOD
Instrumentación Hoy_ INTERPRETAR EL DIAGRAMA UNIFILAR GENERAL DE UNA PLANTA I...
Instrumentación Hoy_ INTERPRETAR EL DIAGRAMA UNIFILAR GENERAL DE UNA PLANTA I...
AlanCedillo9
Global Azure Lima 2024 - Integración de Datos con Microsoft Fabric
Global Azure Lima 2024 - Integración de Datos con Microsoft Fabric
Keyla Dolores Méndez
La era de la educación digital y sus desafios
La era de la educación digital y sus desafios
Fundación YOD YOD
PARTES DE UN OSCILOSCOPIO ANALOGICO .pdf
PARTES DE UN OSCILOSCOPIO ANALOGICO .pdf
SergioMendoza354770
EPA-pdf resultado da prova presencial Uninove
EPA-pdf resultado da prova presencial Uninove
FagnerLisboa3
Plan de aula informatica segundo periodo.docx
Plan de aula informatica segundo periodo.docx
pabonheidy28
Trabajo Mas Completo De Excel en clase tecnología
Trabajo Mas Completo De Excel en clase tecnología
ssuserf18419
trabajotecologiaisabella-240424003133-8f126965.pdf
trabajotecologiaisabella-240424003133-8f126965.pdf
IsabellaMontaomurill
Hernandez_Hernandez_Practica web de la sesion 12.pptx
Hernandez_Hernandez_Practica web de la sesion 12.pptx
JOSEMANUELHERNANDEZH11
CLASE DE TECNOLOGIA E INFORMATICA PRIMARIA
CLASE DE TECNOLOGIA E INFORMATICA PRIMARIA
WilbisVega
Último
(19)
Proyecto integrador. Las TIC en la sociedad S4.pptx
Proyecto integrador. Las TIC en la sociedad S4.pptx
SalmorejoTech 2024 - Spring Boot <3 Testcontainers
SalmorejoTech 2024 - Spring Boot <3 Testcontainers
ATAJOS DE WINDOWS. Los diferentes atajos para utilizar en windows y ser más e...
ATAJOS DE WINDOWS. Los diferentes atajos para utilizar en windows y ser más e...
International Women's Day Sucre 2024 (IWD)
International Women's Day Sucre 2024 (IWD)
Cortes-24-de-abril-Tungurahua-3 año 2024
Cortes-24-de-abril-Tungurahua-3 año 2024
guía de registro de slideshare por Brayan Joseph
guía de registro de slideshare por Brayan Joseph
POWER POINT YUCRAElabore una PRESENTACIÓN CORTA sobre el video película: La C...
POWER POINT YUCRAElabore una PRESENTACIÓN CORTA sobre el video película: La C...
Redes direccionamiento y subredes ipv4 2024 .pdf
Redes direccionamiento y subredes ipv4 2024 .pdf
KELA Presentacion Costa Rica 2024 - evento Protégeles
KELA Presentacion Costa Rica 2024 - evento Protégeles
Instrumentación Hoy_ INTERPRETAR EL DIAGRAMA UNIFILAR GENERAL DE UNA PLANTA I...
Instrumentación Hoy_ INTERPRETAR EL DIAGRAMA UNIFILAR GENERAL DE UNA PLANTA I...
Global Azure Lima 2024 - Integración de Datos con Microsoft Fabric
Global Azure Lima 2024 - Integración de Datos con Microsoft Fabric
La era de la educación digital y sus desafios
La era de la educación digital y sus desafios
PARTES DE UN OSCILOSCOPIO ANALOGICO .pdf
PARTES DE UN OSCILOSCOPIO ANALOGICO .pdf
EPA-pdf resultado da prova presencial Uninove
EPA-pdf resultado da prova presencial Uninove
Plan de aula informatica segundo periodo.docx
Plan de aula informatica segundo periodo.docx
Trabajo Mas Completo De Excel en clase tecnología
Trabajo Mas Completo De Excel en clase tecnología
trabajotecologiaisabella-240424003133-8f126965.pdf
trabajotecologiaisabella-240424003133-8f126965.pdf
Hernandez_Hernandez_Practica web de la sesion 12.pptx
Hernandez_Hernandez_Practica web de la sesion 12.pptx
CLASE DE TECNOLOGIA E INFORMATICA PRIMARIA
CLASE DE TECNOLOGIA E INFORMATICA PRIMARIA
Destacado
Product Design Trends in 2024 | Teenage Engineerings
Product Design Trends in 2024 | Teenage Engineerings
Pixeldarts
How Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental Health
ThinkNow
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
marketingartwork
Skeleton Culture Code
Skeleton Culture Code
Skeleton Technologies
PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024
Neil Kimberley
Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)
contently
How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024
Albert Qian
Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie Insights
Kurio // The Social Media Age(ncy)
Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024
Search Engine Journal
5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary
SpeakerHub
ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd
Clark Boyd
Getting into the tech field. what next
Getting into the tech field. what next
Tessa Mero
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Lily Ray
How to have difficult conversations
How to have difficult conversations
Rajiv Jayarajah, MAppComm, ACC
Introduction to Data Science
Introduction to Data Science
Christy Abraham Joy
Time Management & Productivity - Best Practices
Time Management & Productivity - Best Practices
Vit Horky
The six step guide to practical project management
The six step guide to practical project management
MindGenius
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
RachelPearson36
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Applitools
12 Ways to Increase Your Influence at Work
12 Ways to Increase Your Influence at Work
GetSmarter
Destacado
(20)
Product Design Trends in 2024 | Teenage Engineerings
Product Design Trends in 2024 | Teenage Engineerings
How Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental Health
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
Skeleton Culture Code
Skeleton Culture Code
PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024
Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)
How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024
Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie Insights
Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024
5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary
ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd
Getting into the tech field. what next
Getting into the tech field. what next
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search Intent
How to have difficult conversations
How to have difficult conversations
Introduction to Data Science
Introduction to Data Science
Time Management & Productivity - Best Practices
Time Management & Productivity - Best Practices
The six step guide to practical project management
The six step guide to practical project management
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
12 Ways to Increase Your Influence at Work
12 Ways to Increase Your Influence at Work
Más allá de los Keyframes - Char.la Mayo 2017
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
4.
5.
6.
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
17.
18.
Rotoscopia
19.
15 a 25
fps
20.
21.
Motion Graphics Vectorial
22.
23.
Entonces… ¿En la web?
¿En el navegador?
24.
Rotoscopia no. Rotoscopia es
un arte manual.
25.
26.
¡Motion Graphics sí! SVG
Al rescate
27.
Lucas Bebber
28.
Chris GannonChris Gannon
29.
Sarah Drasner
30.
¡Motion Graphics ya está
con nosotros!
31.
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”
36.
37.
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
48.
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
66.
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/
Descargar ahora