Tenemos una charla de una persona que aprecio, adoro, que me cae súper bien, que es lo máximo
y que siempre que viene y que la veo, pues estoy contento y alegre.
Y estoy hablando de nada más y nada menos que Carmen Ansio.
Carmen, ¿cómo estás?
¿Qué tal? Muy buenas. Muy bien.
Lo he pasado un poco mal detrás de bastidores, no he parado de reírme.
Así que ahora necesito concentrarme un poco para poder explicaros cosas.
Es imposible no reírse.
Es difícil, es difícil, la verdad. Es un crack.
Pues tenemos aquí a la buena de Carmen que nos va a hablar de algo, de animaciones CSS con scroll
porque la verdad es que CSS está evolucionando un montón y ahora podéis hacer animaciones
utilizando el scroll sin JavaScript y eso me parece que es espectacular.
Así que nada, vamos a dejar a la buena de Carmen que os lo explique, ¿vale?
Y que ahí le dejo la batuta para que esté con todos ustedes y así yo voy a...
Muchas, muchas, muchas gracias por invitarme y de nuevo me uno a la felicitación que te ha hecho Sabital
porque es increíble lo que estás consiguiendo y nada, muy contenta, muy contenta por ti.
Así que vamos al lío, vamos al lío.
Venga, pues te dejo aquí, no sé si de qué compartir...
Vale, ya la veo por ahí.
Sí, te lo tengo por ahí compartido.
Pues me quito por aquí, te dejo aquí.
Súper.
Bueno, pues si me escucháis porque acabo de perder a Miguel, comienzo.
¿Sí? ¿Me escucháis bien por el chat?
¿Sí? ¿Todo bien?
Sí, perfecto.
Pues vamos a empezar.
Todo perfecto.
Gracias, gracias.
Genial.
Muy bien, pues vamos a empezar.
Vamos a hablar, como decía Miguel, de animaciones CSS con scroll.
Tengo un montón de demos, voy a intentar ir bastante rápido.
No os sufráis porque os compartiré la presentación con todas estas demos
para que podáis luego revisarlas con más tranquilidad.
Pero primero quiero presentarme, soy Carmen Anzio y por si no lo sabéis,
pues me encanta hablar sobre CSS.
Llevo un montón de tiempo haciéndolo y voy a continuar haciéndolo
porque trabajo como Design Engineer en Orifiers actualmente.
Soy parte del equipo de DevToolings y además de encargarnos de un formato
open source que tenemos para animar que se llama DotLoti,
también nos encargamos de otra cosa.
Y es que tenemos el objetivo de ayudaros, de ayudar a developers a implantar
a nuestros web players de Loti y los run times para poder hacer pues
contenido más interactivo en la web y animaciones como esta.
Quiero pedir perdón, soy vegetariana, no me juzguéis por este momento
porque como veréis en cuanto haga clic a esta palomita, pues hasta luego.
Bueno, pues esas son las cosas que nos encargamos en el equipo
para que podáis hacer contenido más interactivo en la web.
Pero antes de comenzar quiero recordaros que un gran poder conlleva
una gran responsabilidad, atento a estos, ¿vale?
No sé si sois más de DC o de...
Bien. Bueno, lo que quiero decir es que aunque a nosotros nos parezcan
geniales, increíbles, maravillosas estas animaciones, no significa que a todo el mundo
le parezcan, ¿de acuerdo?
Así que es súper importante respetar las preferencias de los usuarios
y hay mucha gente que prefiere no verlas.
Además, os voy a enseñar algunos ejemplos para que entendáis lo que quiero decir.
¿De acuerdo? Así sí. A ver si carga.
Muy bien. Voy a hacer scroll.
Esto es un ejemplo gráfico de lo que estoy diciendo.
Voy a hacer scroll y vais a ver que lo siento mucho por este momento.
Seguro que a alguien más le molesta.
¿Alguien le molesta este efecto? Estoy segura que sí.
Hay gente que tiene más o menos sensibilidad a las animaciones.
Así que, por favor, respetar esas preferencias.
Es muy sencillo, es muy fácil.
Solo necesitáis utilizar una media query.
Igual que hay media queries de rango y media queries para hacer un montón de cosas,
pues hay una media query que se llama Preferred Reduce Motion que podemos desactivar las animaciones
que sean pesadas o que sean más complejas y para el usuario que hayan decidido que no quieren verlas,
que quieren tener una animación menos molesta.
Así que ponéis aquí dentro vuestras mega animaciones y solo se van a mostrar la gente que no tenga ninguna preferencia activada.
Así que, antes de meternos de lleno en el tema de las animaciones de CSS con scroll,
quiero explicaros un par de cosas para estar alineados en algunos términos que necesito que sepáis.
Que es básicamente que es una animación y que es scroll y telling.
Porque es una técnica que voy a comentar en varios de los ejemplos que tengo hecho.
Así que, probablemente creas que o pienses que la animación es un proceso que crea imágenes en movimiento.
Puedes estar en lo cierto, ¿no?
En plan, la magia que hay detrás de dar vida a estos elementos estáticos.
Seguro que conocéis a este personaje.
Ahora es de dominio público, así que lo puedo utilizar, Disney.
Pero, bueno, en la web, la pinta que tienen las animaciones es esta.
Es una animación básica de CSS.
En la que, pues, creamos unos keyframes que son fotogramas clave,
que luego se compilan en una secuencia que crea el efecto este animado, ¿no?
Y eso es como se ve en CSS.
La animación de, o sea, la función de arroba keyframes,
grow define cómo el elemento va a escalar en el tiempo.
Importante el tiempo, acordaos.
Siempre voy a comentar esto.
Entonces, luego tenemos el 0, que es el inicio de la animación.
Tiene la escala 1, que es su tamaño original.
Y al final de la animación va a haber una escala del doble.
Es decir, cuando se aplica esto a un elemento, esta animación va a transicionar y va a hacer que,
de forma suave, un elemento cambie de tamaño de su tamaño original al doble.
Entonces, ¿qué pasa entre medios cuando le indicamos esto al navegador?
Pues que el navegador es nuestro amigo y se encarga de la interpolación y hace el trabajo por nosotros.
Recordad siempre, el navegador es nuestro amigo.
Así que, en web, una animación no es solo un proceso que crea imágenes en movimiento,
tanto en diseño web como en desarrollo web.
La animación puede guiar a los usuarios, proporcionarles feedback y, pues, por lo tanto,
mejorar mucho la experiencia de usuario y hacer que sea mucho más agradable.
Entramos en qué es el scrollytelling.
El scrollytelling facilita muchísimo el consumo de información al usuario en el momento en el que estamos preparados para consumirlo.
Es decir, puedes hacer que un relato largo se convierta en una experiencia interactiva, como, por ejemplo, este.
Esta es la primera, digamos, la primera vez que yo vi este efecto o esta técnica aplicada en una web.
Esto fue como en el 2012, por ahí.
Ganó un premio Pulitzer, es del New York Times.
Y, bueno, fue la primera vez que vi cómo una historia súper larga con un montón de contenido, de imágenes, de cosas interactivas, se publicaba en la web.
Dado esto, yo me pregunto, ¿podemos conseguir esto algo parecido con CSS?
Ese es el primer ejemplo que os quiero enseñar.
Todos los ejemplos van a estar en CodePen y van a estar dentro de esta slide deck que os voy a compartir.
Vais a tener el link al final de la charla.
Entonces, fijaos que cuando yo hago scroll, pasan varias cosas, ¿no?
Este elemento se convierte en un menú, aparece la barra del progreso, las imágenes van entrando en el viewport o en la ventana gráfica a medida que yo hago scroll de forma suave.
Y de esta manera podemos leer un montón de información y hacer que el usuario pueda interactuar con la página y que consuma esta información cuando le venga en gana.
Es decir, no avasallamos con un montón de información.
Entonces, ahora que os he explicado esto, ¿qué nos referimos a las animaciones basadas en scroll o en el desplazamiento del usuario?
Pues, normalmente nos hacemos referencia a 2 tipos diferentes de animaciones.
Una que sucede mientras te desplazas.
Es decir, el progreso de la animación se conecta directamente a la animación y al desplazamiento de la página web en el porcentaje que el usuario haya hecho scroll.
Por ejemplo, la barra de progreso que habéis visto.
Y la segunda es que es una animación cuando el elemento entra, sale o se desplaza por una zona visible de la página llamada scrollport.
Aparte del viewport del navegador o la parte visible de la ventana, pues, con estas nuevas animaciones podemos llamar también scrollport al contenedor que se desplaza dentro de los elementos que tenemos en la página.
Bien, este ejemplo es antiguo, lo realicé hace un tiempo, pero quiero explicaros que dibujé todos los SVGs para que se mostraran a medida que el usuario se iba desplazando y se mostrase el contenido.
Y al revés, ¿no?
Va subiendo, digamos, se va dibujando o se va despintando a medida que el usuario hace zoom hacia arriba o hacia abajo.
Depende de si utilizáis un Magic Mouse, porque yo estoy utilizando un Magic Mouse ahora.
O sea, scroll, no sé si va para arriba o hacia para abajo.
Pero, bueno, para ser justos, esta demo no la hice con CSS Vanilla.
Bueno, utilizo una biblioteca que probablemente muchos de vosotros conocéis, que es la de, no es la de este superhéroe, es la de este superhéroe.
¿Alguien sabe qué es? ¿Seguro?
El calcetín verde.
Es GreenSoft, GSAP, es la plataforma de animación de GreenSoft, que sí que tiene JavaScript.
Pero, de nuevo, llegados a este punto, me pregunté, ¿podemos conseguir este efecto solo con CSS?
Pues, sí.
Esa sería la animación en CSS que he utilizado para que veáis.
Es muy similar a la de CSS básica, pero añadimos una línea nueva de código Animation Timeline Scroll.
Así que, hemos linkado la animación y el punteado, ribeteado del SVG al desplazamiento del usuario.
Así que, cuando yo hago scroll, se pinta.
Es solo una línea.
Podemos llegar también a pintar el relleno, ¿vale?
Pero es solo un ejemplo para que veáis que podemos llegar a hacer lo mismo que hacía con GreenSoft, pero ahora mismo lo puedo hacer con CSS.
Bastante interesante.
Echemos un vistazo a la forma tradicional de crear animaciones por scroll sin utilizar, en este caso, ninguna biblioteca como GreenSoft, únicamente con vanilla JavaScript.
Seguro que, bueno, si eches un vistazo a la JavaScript que hay aquí dentro, vais a ver que tenemos el Intersection Observer, un AdEventListener, ¿vale?
Para escuchar el scroll de la página y con eso lo que conseguimos es que la barra de progreso se vaya actualizando de manera, pues, suave a medida que las secciones van subiendo y se va haciendo el progreso de la página, ¿no?
Bien, esto es con JavaScript.
Voy a explicarte y voy a mostraros por qué no necesitamos JavaScript.
Y hay un concepto muy interesante que necesitáis saber, que es el main thread, que es lo que pasa cuando una página web carga, ¿vale?
El main thread, digamos, que es como la autopista por donde todos los bundles pasan.
Entonces, os voy a explicar de manera visual qué pasa cuando utilizamos un montón de bundles de JavaScript, como, por ejemplo, librerías de terceros.
Pasa esto.
Todos los bundles de JavaScript están intentando cargar a la vez en el main thread de tu página y lo que está haciendo es que está bloqueándola por completo.
Así que nos podemos despedir de la performance de tu sitio web porque esto es lo que está pasando.
¿Qué pasa con las animaciones con CSS?
¿Por qué utilizar estas animaciones únicamente con CSS?
Bueno, pues que ahora mismo porque podemos.
Así de sencillo, porque podemos y porque además podemos obtener también el scroll de la página por completo.
En este ejemplo estoy utilizando técnicas más modernas como, por ejemplo, el arroba property.
Pero lo que estoy haciendo es pasar el progreso de la página, atención, a una custom property de CSS y de esta manera podemos utilizar esta información para crear animaciones, crear los efectos visuales que queramos que entren y salgan.
O incluso para mostrar información como en este caso que estoy mostrando el porcentaje de scroll de la página.
O sea, yo hago scroll y me dice el porcentaje de contenido que hay.
Obviamente no hay más contenido.
Le he puesto un alto fijo para que sí que muestre este porcentaje.
Pero dependiendo del contenido que tengas en un artículo, en una grid, lo que sea, pues vas a poder calcularlo.
Así que únicamente con CSS.
¿Qué hay detrás de esta técnica?
Lo que hay detrás es una nueva API que es la de Scroll Driven Animations y nos permiten crear animaciones controladas por el scroll del usuario.
Eso es lo que hay detrás.
Es esta API.
Así que estas animaciones, lo bueno que tienen es que se ejecutan fuera del main thread.
O sea, hola, ¿vale?
No necesitamos JavaScript.
Se ejecutan fuera del main thread únicamente con CSS.
Esto hace que el rendimiento de la página, pues, sea increíble.
No perjudicamos la performance añadiendo, pues, cargas extras de nada.
Vamos a ver un ejemplo de cómo linkar el scroll a una animación existente, sencilla,
que seguramente no sea mi mejor animación CSS, pero, bueno, os lo voy a enseñar.
Esa es la pinta que tiene una animación que lo que va a hacer es que va a aparecer, ¿vale?
Cuando, ahora vais a verlo de manera visual.
Y quiero que os quedéis con algo importante que lo único que voy a cambiar en esta animación de Slate In,
que va a hacer que un elemento se mueva de derecha a izquierda en 2 segundos, ¿vale?
Es solo una muestra, ¿vale?
Ya, como os digo, no es mi mejor animación.
No la es, no la juzguéis, ¿vale?
Pero es una muy sencilla, familiar y fácil para que podáis entenderlo de una manera muy sencilla, ¿no?
Entonces, tenemos esta línea que es la que está cargando los keyframes y lo que está pasando dentro.
Y les estoy diciendo que en 2 segundos esa animación suceda.
Vuelvo a hacer hincapié en lo de los segundos porque si queréis ver cómo modificar esto e incluirle el scroll,
lo que vamos a tener que hacer, como podéis ver aquí, es utilizar justamente lo mismo, la misma línea de animación,
quitarle los segundos e incluir esta otra que es Animation Timeline Scroll.
Y de esta manera vamos a tener el logo de Mido, igual que antes, va a aparecer y va a desaparecer,
pero esta vez está linkado al scroll de la página.
Entonces, yo que estoy haciendo scroll, ya aparece y desaparece.
Así de sencillo.
¿Qué es lo que he cambiado?
Como os decía, los fotogramas clave se mantienen igual y la propiedad de animación cambia a, pues, a lo que os he dicho.
Quitamos los segundos.
He eliminado la duración porque, vuelvo a repetir, que es algo como que a veces cuesta y sigo viendo ejemplos con duración incluida en el scroll.
Sobre todo si preguntáis a ChatGPT o si incluye duración y no es necesaria, luego pide disculpas por el error.
Pero lo único que he hecho ha sido eliminar la duración porque las animaciones basadas en este desplazamiento de la página son un tipo de animaciones que no se ejecutan con el tiempo.
Así que únicamente dependen de la posición del desplazamiento del usuario en la web.
Así que únicamente he añadido esa línea.
Un poco la magia detrás de todo esto.
¿Qué podemos llegar a hacer también?
Podemos hacer que veamos el alcance y controlar el alcance de esa animación.
Imaginaos, yo puedo hacer que aparezca, se haga un poco más grande y desaparezca.
Estos son ejemplos básicos en elementos individuales, así, aislados.
Pero vamos a ver ejemplos.
Algunos más creativos, otros más enfocados a componentes e incluso a una landing page entera para ver qué podemos hacer con el scroll como protagonista.
Para no quedarnos únicamente en un ejemplo como este de qué bonito, tengo un cuadrado que gira, ajá, precioso.
Pero esto está aislado, no puedo utilizarlo realmente de una manera práctica en ninguna de mis webs.
Pues, bueno, podemos hacer cosas creativas que están muy bien para aprender y para ver hasta dónde llega la tecnología.
Eso lo suelo hacer a menudo.
Pero vamos a ver qué podemos llegar a controlar con el scroll.
Podemos llegar a controlar el background, por ejemplo.
Vamos a cambiar un background, ¿sí?
De forma muy, muy, muy sencilla.
Esto es muy sencillo de hacer.
Podéis revisar luego las demos porque no tenemos tiempo para revisarlas todas.
¿Qué podemos hacer también?
Efectos que ya tengáis creados, como por ejemplo este ejemplo que es más antiguo, que tiene una sombrita link.
Podéis linkar, mejor dicho, o vincular.
Venga, no voy a hacer broma.
Ese elemento o esa sombra la podéis vincular también al scroll.
Es decir, podéis vincular lo que queráis al scroll.
No hace falta que sea únicamente un efecto.
Este ejemplo no tiene nada que ver con el scroll, pero os lo quiero enseñar porque combina SVG y CSS.
Utilizo SVG para poder hacer unos filtros bastante avanzados, ¿vale?
Pero hay herramientas online con las que podéis generar estos filtros, no os preocupéis.
Y puedo aplicar estas distorsiones y desenfoques.
Y con CSS lo que puedo hacer es utilizar propiedades como MixBlend para hacer que la capa del fondo modifique cosas del foreground y hacer un clippad para hacer un recorte.
Aquí detrás lo que hay, ¿qué os imagináis que hay?
Aquí hay una de JavaScript, ¿eh?
Fijaos, no miente con el tab, no hay tab de JavaScript.
Aquí lo que hay es una imagen.
Es una imagen que es un background con unas líneas.
Y lo que estoy haciendo con MixBlend, con el clippad y con los filtros de SVG,
que al final los filtros de SVG son filtros súper potentes nativos con los que podemos realizar un montón de cosas que con JavaScript necesitaríamos librerías externas, ¿vale?
Lo tenéis de forma estándar en la web dentro de un SVG.
Que no os den miedo los SVGs, que no solo son gráficos increíbles, sino que podemos hacer muchas cosas como estas también.
Bueno, pues, mirad, tenemos un efecto bastante chulo como de ojo de pez cuando hacemos scroll, pues, aquí en el texto que queramos incluir.
Aquí he puesto mi ducon, pero, bueno, damos unos efectos más reales de la vida real donde podemos aplicar esta técnica,
como, por ejemplo, cuando tenemos muchos elementos en una grid para cargar una grid, por ejemplo, con muchas imágenes,
podemos hacer que el usuario, como he dicho antes con el scrollytelling, tenga todo el poder y pueda consumir el contenido en el momento que quiera.
Fijaos, podemos hacer grids de imágenes que vayan cargando y que no solo carguen y hagan ese efecto,
sino que, fijaos que cuando hago scroll, la propia imagen tiene como un scroll interno también.
Podemos controlar el scrollport, que es lo que decía antes, podemos controlar el contenedor general,
podemos controlar el viewport, es una pasada.
O sea, esto hace tiempo era complicadísimo poder hacerlo y mucho menos sin JavaScript.
Perdón por este momento, aunque sea del Barça, tengo que reconocer que no podemos utilizar rojo y azul junto.
Ya os fijáis porque molesta muchísimo, lo siento.
Esto baila. Me ha hecho gracia cuando Savitar ponía el ejemplo antes del color porque es algo parecido a este ejemplo que tenía ya preparado.
No lo he hecho a puesta, ya lo tenía preparado.
Entonces, no solo podemos hacer scroll vertical.
Fijaos que aquí venimos de un scroll de una sección en vertical, hacemos scroll, luego hacemos un scroll en horizontal
y por último acabamos también con el vertical.
Bueno, tenemos un montón de opciones de modificar cómo se mueve el usuario por nuestra página.
Después os enseño una landing page completa con todos estos efectos juntos, que creo que os será mucho más útil para poder revisarla.
Y lo bueno de todo esto es que no cambiamos el scroll del usuario.
Es decir, el usuario lo está haciendo todo el rato, en todo momento está haciendo scroll en vertical.
Porque seguro que os ha pasado que en un montón de carrusel o efectos, cuando entráis tenéis que hacer scroll vertical.
Luego una vez que entráis en el carrusel, tenéis que hacer scroll en horizontal.
Entonces, es un jaleo.
Entonces, de esta forma no hace falta que modifiquemos ese comportamiento, digamos, nativo,
sino que ya estamos haciendo que el usuario haga scroll de forma en vertical todo el rato, ¿vale?
De forma natural.
Vamos a ver este ejemplo.
He puesto como ejemplo de texto, pero también hay imágenes incluidas.
Aquí veréis que de nuevo estoy utilizando algunos clip path.
Aquí no hay SVG, pero sí que hay clip path.
Con lo que podemos hacer que se recorte la imagen, que cargue, que tengas un título también.
Todo esto es muy interesante para cuando queréis, por ejemplo, si tenéis un portfolio y queréis mostrar diferentes trabajos en los que habéis estado haciendo o proyectos,
pues, bueno, es una manera más dinámica y dar un efecto bonito y algo que recuerde a la gente cuando haya visitado vuestra página.
También podemos hacer, aquí sí que hay SVG, podemos hacer que haya esta aparición de texto y no solo de una manera, pues, de smooth, ¿no?
De que se vaya difuminando, sino que añadirle un blu-ray, no sé cómo decirlo, poder desenfocarlo, ¿no?
Como un efecto gaussiano directamente y hacer cosas muy, muy chulas también a nivel de texto.
Eso sí, disclaimer, no convirtáis nuestra página web en la página de Homer Simpson con todo que parezca una feria, ¿vale?
Utilizadlo en momentos concretos y cosas que queréis destacar mucho, ¿sí?
Otro ejemplo en el que se pueden añadir físicas fake.
Esto es como una física fake.
Fijaos que cuando yo hago scroll, el texto aparece y se posiciona y hace boom, ¡pum!
¿No?
Podemos crear como físicas en las que, combinando el scroll, las 2 líneas de tiempo nuevas que hay,
que son las de scroll y la de view timeline, podemos hacer que esos efectos parezcan que tengan de verdad una física detrás, ¿no?
No sé si habéis jugado a videojuegos, habéis hecho algo con motores de videojuegos, todo el tema de físicas,
que cuando cae un elemento, pues, que le caiga algo con más velocidad o pues, he hecho que con algo.
Pues, todo eso, estoy dando ejemplos para que el ejemplo final que os voy a enseñar podáis entender el potencial de lo que podemos hacer ahora mismo con el scroll.
Vale, este es un hover en una card.
Vamos a hacer una card fácil, ¿no?
Es aquí Pikachu, el mejor Pokémon.
No, no quiero ningún debate sobre esto.
Podemos linkar el scroll a ese hover, en vez de hover lo quitamos y ese flip que hace la card, viendo la cara y la cruz de la carta, pues, podemos linkarlo.
Bueno, es un efecto que dices, bueno, lo podemos hacer en vertical.
¿Podemos ir a hacer un carrusel?
Pues, sí, podemos crear una galería de componente carrusel en el que, pues, ya no necesitamos, digamos, depender de una librería de JavaScript externa,
todas las dependencias que eso conlleva, que seguro que lo conocéis ya, seguro que habéis utilizado un montón de librerías de JavaScript para hacer más sonris, para hacer carrusels, para hacer un montón de cosas que actualmente, pues, fijaos, no hay ni una línea de JavaScript aquí.
O sea, que es maravilloso.
Podemos realizar carrusels horizontales tanto con la nueva API de Scroll Driven Animations o con Scroll Snap, que es una técnica que es, bueno, tiene un poco más de tiempo.
Es anterior a las Scroll Driven Animations, pero veáis que también podemos hacer y controlar ese scroll como si fuesen diferentes secciones.
Y, además, incluir la resistencia, digamos, a la hora de pasar esa card en móvil, por ejemplo, es un efecto que queda muy guay y no necesitamos de nuevo JavaScript para hacerlo.
También podemos crear un montón de carrusels en vertical con ese efecto que he dicho, ¿no?
De como si tuviese esa resistencia.
Fijaos lo que pasa aquí cuando entra la siguiente card.
Pong, pong, pong, pong, ¿vale?
Es como que le pega un golpe, ¿vale?
Como en plan, apártate, que vengo yo.
Entonces, podemos hacer que esas físicas o esa simulación de físicas tengamos, pues, efectos como este de poder hacer que, dependiendo de lo fuerte que el usuario haga scroll,
pues, va a parecer que le dé un golpe como con más potencia ahí que la parte del viewport, ¿no?
Muy bien.
Por último, solo quería deciros este que podemos combinar el scroll con Mixed Blends, como os he dicho antes.
Mixed Blend hace que podáis tener opciones de como si habéis trabajado con Photoshop o con otros editores gráficos,
sabéis que podéis editar, pues, el cómo se ve la transparencia de una capa, pues, también podemos trabajar con ese Mixed Blend para las imágenes
y utilizar eso como efecto, ¿no?
En plan de, pues, bueno, como si fuese un mega-chrombo maravilloso.
No sé si habéis jugado a este juego.
Os lo recomiendo encarecidamente.
Es Ori.
Es muy bonito y es muy guay.
Grab-up de todos los efectos que hemos visto.
Los unimos en una única landing page para que los tengamos.
Y podáis hacer cosas un poco más reales que podáis aplicar, como, por ejemplo, crear distintos efectos como transiciones,
elementos que aparecen de forma suave, componentes como, por ejemplo, esta card que se va apelazando,
no, se va alineando, se va quedando como en posición fija cada vez que hago scroll.
Elementos que aparecen de forma horizontal o incluso que cuando llegan a cierto punto de la sección aparecen de forma vertical,
como he dicho antes, sin necesidad de cambiar el origen real nativo del scroll del usuario.
A mí me encanta este efecto de que el elemento pase a ser el menú.
O sea, me parece maravilloso porque esto era muy complicado de hacer sin necesidad de,
o sea, ahora mismo sin necesidad de JavaScript lo podemos hacer.
Entonces, no puedo estar más contenta.
Seguro que me decís, muy bien, Carmen, genial, pero me da miedo, no quiero aprender cosas nuevas.
No sé, mucha gente inteligente ha trabajado en estas APIs para desarrollar nuevas características
que, creedme, es muy fácil de animar.
Es muy sencillo, es muy parecido a como ya veníamos animando en CSS, es súper similar.
Así que os recuerdo que la especificación introduce 2 nuevas líneas de tiempo.
Una línea de tiempo que coincide con la posición de desplazamiento del usuario en el eje del scroll.
Y una línea de tiempo que coincide con la posición de cualquier elemento, pues,
que entra dentro del contenedor y que se desplaza, que se muestra.
Y todo eso lo podemos combinar y hay otras propiedades que podemos hacer efectos mucho más potentes y más avanzados, ¿vale?
Así que recordad, cuando una animación utiliza una de estas 2 líneas de tiempo,
sigue la línea de, no sigue la línea de duración, sino la del scroll.
Podemos quitar la duración de esa animación.
Y esto, en términos generales, es una animación que define un montón de propiedades nuevas.
Y lo que está haciendo es que una imagen se adapte al contenedor cuando hace scroll, ¿vale?
Únicamente para que veáis que hay otras propiedades como, por ejemplo, animation range,
que es la que controla el cómo entra o cómo sale ese elemento y qué porcentaje cubre del contenedor que está,
en el que está dentro, ¿no? El que está anidado.
Os dejo un link a la spec de scroll driven animations, ¿vale?
Para que podáis echarle un vistazo.
No sé si soy muy de papers o de todo lo que se está haciendo, pero bueno.
Si no, la buena noticia es que Bramus, que es developer relations de Google,
tiene un montón de demos increíbles en su página web con un montón de herramientas que os pueden ayudar
a depurar animaciones, a entender el comportamiento entre bastidores,
detrás de las escenas, ¿no? De los elementos y contenedores,
cómo se comportan dentro de esa ventana gráfica y cómo se comportan al desplazarse.
Y, bueno, si os interesa saber el estado de la plataforma,
no solo de esta especificación, sino de otras,
esta web es bastante interesante porque podéis ver el progreso de cómo está implementado
cualquier tipo de especificación, ¿vale?
De nuevo, Bramus ha hecho un add-on, ha hecho una extensión para el navegador,
donde dentro de las developer tools, acordaos, las developer tools también son nuestras amigas,
podéis debuguear y mirar todo esto de una forma, pues, con más calma
y entender qué está pasando detrás.
Las malas noticias.
Lo siento, tenía que dejar esto para finales, tenía que poner los dientes largos con los ejemplos
y luego deciros que aún no son compatibles con todos los navegadores.
Tened en cuenta que funcionan en Chromium o con un pack activado en Firefox,
se vienen muy pronto para Safari.
Y, bueno, acordaos de mirar en CanEU siempre la compatibilidad para comprobar en qué estado están.
Y quiero acabar con esta sección que he llamado RetroTime.
Primero, para quitaros un poco el miedo al hecho de trabajar con estas dos líneas nuevas de tiempo
y comentaros que podemos juntar un montón de líneas de tiempo para que pasen cosas como esta,
que yo pueda controlar a Mario en qué momento salta y en qué momento aparece la moneda.
Y que si os da miedo tener que trabajar con este tipo de nuevas líneas y de especificar los timelines en cómo se van a mover y todo eso,
que no os dé miedo, que lo que os tiene que dar miedo es trabajar con sprites.
No sé si habéis trabajado alguna vez con sprites.
Es horrible encontrar la posición, la coordenada justa de dónde se encuentra ese elemento o esa cosa que queréis enseñar en ese momento.
Así que animaros a revisarlo, animaros a mirar los ejemplos porque vais a ver que es muy sencillo de hacer.
Y esto era solo una coña.
Si veo a vuestras manos, quiero preguntar si alguien conoce Outrun.
Seguro que si alguien levanta la mano y me dice que sí que lo conoce,
pues seguro que os preguntaría qué tal lleváis vuestros dolores de espalda porque ya tenemos una edad.
Este juego es bastante vintage.
Y quiero enseñaros una demo para finalizar, que no es mía, ojalá fuese mía, pero es de Phillip.
Puedes encontrar a Phillip como work and team en internet.
Esto es una demo y un artículo que habla de cómo crear un juego solo con CSS
que detecta todos los movimientos por desplazamiento gracias a las scroll driven animations.
Explica cómo creó el juego, cómo logró que estas animaciones funcionen en ambas direcciones con desplazamiento,
cómo crear un sistema de colisiones.
Se basa en un artículo de Adam Argyle, que es Developer Relations en Google.
Os dejo el link por si queréis leerlo.
El truco principal, esto lo estoy tocando ahora en directo, ¿vale?
Este es el truco principal.
Utiliza los timelines para poder, utiliza diferentes timelines, es decir, de dirección horizontal y vertical.
Utiliza CSS Grid, ¿vale?
Para poder crear este sistema de colisiones y detectarlas.
Le permite detectar si hay un vehículo que está en la misma celda que un obstáculo, como un árbol, una piedra, lo que sea.
Y lo está comprobando constantemente gracias a cálculos de CSS para que luego me digáis que CSS no es un lenguaje de programación.
¿Vale?
Yo la primera vez que vi la demo me quedé así, hablé con Filip y le dije, tienes que explicar más cosas sobre esto.
Ojalá verlo en alguna charla porque la lógica que hay aquí detrás es increíble.
Él también se ha peleado con sprites.
Os dejo un vídeo del juego para que lo veáis.
No quiero decir palabrotas, pero esto es jodidamente increíble.
Puedes controlar el coche que salte, que se agache y obviamente si te estampas con algún elemento, pues hasta luego.
Mil aplausos para Filip, se lo merece totalmente, es increíble.
Y solo quería deciros que el futuro de CSS pinta increíble, pinta muy bien.
Se avecinan nuevas funcionalidades, nuevas propiedades.
Nos va a facilitar aún más la creación de, no solo de animaciones, sino de un montón de diseños increíbles en la web.
Así que estad atentos a los cambios, revisad que han ellos, tened en cuenta que todas las feature flags que hay en los navegadores
para que no incluyáis nada que no esté totalmente compatible en todos los navegadores que los usuarios utilicen.
Y como siempre, quiero agradecer a estas 3 personas maravillosas su dedicación, feedback y ayuda.
Y me motivan siempre a seguir investigando.
Mil gracias.
Los 3 son Developer Relations en Google.
Así que aquí estamos ya.
Muchísimas gracias.
Tenéis las slides en mi perfil de slides.com.
Puedes encontrar ahí la presentación y algunas más.
Así que nada, muchísimas gracias.
Cualquier duda que tengáis, aquí estoy.
Gracias a ti, Carmen.
Muchas, muchas gracias.
Estás hecha una crack.
Impresionantes las demos de CSS con scroll.
O sea, es que te vuela la cabeza las cosas que se pueden hacer.
Y aprovechando que tenemos a Carmen, voy a deciros una cosa.
Mira, no sé si ya habéis conseguido vuestra entrada para la GSConf España, que vamos a hacer el 1 de marzo del 2025.
Hoy, de forma totalmente exclusiva, limitada, tenemos un descuento especial de 30 euros de la entrada, ¿vale?
Que podéis aprovechar, llamar rápidamente a vuestra empresa.
Oye, vamos a dejarlo hasta mañana por la mañana.
Pues si a mañana a primera hora tenéis que preguntarle a vuestra empresa para que os la pague.
Pero a partir de ahí, esta oferta especial desaparece.
¿Y por qué digo lo de la GSConf y tal una vez más?
1 de marzo, la primera GSConf histórica.
La primera presencial que hacemos aquí en España.
Gracias a Kikodin por patrocinarnos.
Y vamos a buscar patrocinadores.
Pues es que a Carmen la vamos a tener también en la GSConf.
Así que nada, muchas gracias.
Si os habéis quedado con ganas de escuchar más a Carmen,
el 1 de marzo del 2025 la vamos a tener por ahí, Carmen.
Sí, muchísimas gracias por la invitación.
Ya sabes que tienes mi sí para todo.
Estoy encantada y estoy muy contenta y muy feliz, la verdad, de participar.
Así que mil gracias.
De hecho, luego os comentaremos otra cosa más sobre lo que estamos trabajando.
Y Carmen también es parte.
Es otra sorpresa que tenemos más adelante.
Carmen está en todas porque de verdad Carmen es una persona que aprecio, que admiro,
que es que me cae muy bien, que sabe un montón, de la que aprendo.
O sea, es que lo tiene todo, Carmen.
Es recíproco, o sea, te quiero un montón.
Yo también te quiero a ti.
Pues nada, Carmen, cuídate mucho.
Muchas gracias por la pedazo de charla.
Muchísimas gracias.
Y nos vemos muy pronto.
Seguro que antes que el 1 de marzo del 2025 la GSConf.
Seguro que nos vemos antes.
Pero allí nos vemos seguro.
Seguro.
Muchísimas gracias.
Un saludo a todo el mundo.
Cuídate, Carmen.
Gracias.
Hasta luego.
Ay, la he cortado.
Hasta luego.
Perdona, Carmen.
Adiós.
E.