Vas a aprender animaciones desde cero de CSS.
Vas a aprender más que eso.
Algo que yo, sinceramente, no he visto que expliqué en muchos sitios,
que son las animaciones basadas en scroll con puro CSS.
Con cero líneas de JavaScript que te van a volar la cabeza.
Mira, ¿veis esto? Esto es puro CSS.
Esto tiene cero líneas de JavaScript.
Para que lo veáis, que no tiene nada de JavaScript.
Mira, cero. No hay nada de JavaScript aquí.
¿Veis? No hay nada de JavaScript.
Y en cambio, fijaos. Fijaos qué cosa más bonita.
¿Vale? Fijaos.
Mira, voy a ir haciendo scroll.
Y fijaos en el header.
¿Has visto el header? ¿Qué cambia?
Vale, pues el header.
Eso, con CSS, está detectando el scroll.
Y ojo las imágenes.
¿Veis las imágenes cómo van apareciendo?
¿Veis las imágenes cómo van apareciendo y van desapareciendo?
Todo esto está hecho con CSS.
En menos de 15 líneas.
Y eso lo vas a aprender hoy.
Para tu portfolio, para tu web, para tu producto, para tu mamá, para quien sea.
Y vas a ver lo fácil que es.
Y va a ser tan fácil que vas a decir,
pero Midu, ¿por qué esto no está prohibido por las autoridades?
Sí, es que es increíble.
Con cero bibliotecas.
Esto lo vais a hacer y lo vais a entender súper fácil.
Todo esto, ¿veis?
Con esta animación así, con el fading que se mueva para arriba, para abajo y tal.
Pues vais a ver.
Y además el header, que también está muy chulo.
El header, que veis que se hace pequeño, que cambia el color, que hace un efecto blur.
Y encima lo hace con una transición.
Todo esto es CSS puro.
De verdad, no os engaño porque lo vamos a hacer hoy juntos.
Desde cero vais a ver cómo lo hacemos aquí.
Y aquí tenemos un poco todo el spoiler.
Y os lo voy a explicar.
No os preocupéis.
Funciona también con vídeos.
Funciona con cualquier elemento que os echéis a la cara de HTML.
Así que hoy os lo voy a explicar.
¿Se puede hacer lo mismo pero para arriba?
Se puede hacer para arriba, para izquierda, para la derecha, en diagonal.
O sea, lo podéis hacer de muchas formas.
Con profundidad, con muchas veces.
Con muchas formas.
Así que lo podéis hacer de maneras diferentes.
Os recuerdo porque a lo mejor, pues dice, oye, yo no tengo ni puñetera idea de CSS.
Bueno, no te preocupes.
Tenemos aquí una de vídeos, bueno, y de listas y de historias.
Tenemos aquí un poco de todo.
Fijaos, tenemos aquí el curso de CSS desde cero, completo y gratis.
Es una lista de reproducción donde tenemos el de CSS en general, donde explicamos Flexbox desde cero y donde explicamos también Grid.
Para que ya no tengáis problemas de Flexbox.
De Grid y de CSS en general, como son los elementos, como son los márgenes, los paddings, el modelo de la caja y todo esto.
Y aquí, pues eventualmente, en algún día, pondremos el que estamos haciendo hoy también, ¿vale?
En CSS existen dos formas de animar elementos.
Y son las transiciones y las animaciones.
Y vamos a ver la diferencia entre ambas y cómo podemos utilizarlas y cuándo utilizar una y cuándo utilizar otra.
Así que vamos a empezar con la que yo diría que es la más fácil, que serían, obviamente, las transiciones, ¿vale?
Así que vamos con las transiciones y vamos a empezar por aquí.
Con las transiciones, ¿qué pasa?
Bueno, las transiciones, ¿cómo funciona?
Vamos a utilizar Codilink, que es el playground de código que tenemos, aunque como no vamos a utilizar JavaScript, puedo ponerlo así.
Y quitamos, vamos a poner esto más bien así, ¿vale?
Y quitamos esto por aquí y lo dejamos así.
Vale.
Entonces, con las transiciones, ¿cómo funciona?
Las transiciones en CSS, básicamente, lo que vamos a poder hacer es cambiar un elemento que transicione de un estado inicial a un estado objetivo, un estado final, ¿vale?
Vamos a transicionarlo entre dos estados.
¿Y qué es esto de un estado?
¿Qué es esto de un estado?
Bueno, no te preocupes.
Por ejemplo, vamos a poner un ejemplo bastante sencillo, pero que lo vas a ver clarísimo, con un dip, para que veas, con un dip.
Que puedes utilizar un botón, puedes utilizar lo que quieras.
De hecho, normalmente, un botón sería bastante chulo, la verdad.
Pero bueno, vamos a poner aquí un pulser.
Le ponemos width 30, 30 píxel, ¿vale?
Vamos a hacer una redondita con mi color favorito, 09F.
Vamos a poner también el border radius, border radius.
Que el border radius, sí, mira, esto es un truquito interesante.
Si el ancho y el alto son iguales, puedes hacer un border radius 100% para que te quede un círculo perfecto.
Pero si, por lo que sea, no es cuadrado, entonces te va a quedar así un poco raro.
Y de hecho, vas a ver que conforme más, pues va a quedar un poco extraño.
Puedes hacer el border radius, tal forma que podrías hacer, es ponerle, pues, un número así, 99999X.
Y así te aseguras que sea también totalmente redondeado.
Pero esto es más un hack.
Si es cuadrada la forma, con un 100% te va a quedar perfecto.
Así que, solo para que lo sepas.
De hecho, a partir del 50% ya funcionaría exactamente igual, ¿eh?
Le puedes poner 100%, pero el 50% ya te quedaría el círculo.
Solo para que lo sepas.
Muy bien, vamos a poner el position relative, por si luego hacemos cositas dentro, en el after y tal.
Y vamos a hablar de los estados.
A ver, en CSS ya hemos visto que hay elementos que pueden tener un estado.
Por ejemplo, ¿qué puede ser un estado?
El estado hover.
Hover significa que el usuario tiene el cursor encima de ese elemento.
Por lo tanto, su estado ha cambiado.
También tendríamos el estado de focus, el de active, luego veremos otros más.
Pero el hover sería un estado porque estamos cambiando de elemento.
El elemento ahora tiene un estado diferente.
Y entonces podemos escalarlo y hacer algo al respecto.
Por ejemplo, scale 2, ¿no?
Y ahora cuando os cambia su estado, ¿ves?
¡Pum!
Se hace más grande.
Vamos a utilizar todos los conocimientos de grid para centrar esto.
Place content center, ¿vale?
Y vamos a hacer que esto, min, height, 100.
Y así lo ponemos aquí.
Bueno, no sé si hacerlo más pequeño, solo para que lo veáis.
Vale, para que lo veáis ahí.
Voy a hacerlo más grande para que veamos bien esto, ¿ok?
Bueno, entonces, este elemento cuando se pone encima, fíjate, cambia su estado.
Y ya teníamos que con el hover, hacemos que su escala sea doble.
Otra forma que podríamos hacer esto sería cambiar el ancho y el alto.
O sea, podríamos poner que ahora fuese 100.
Y el resultado sería visualmente el mismo, pero no es exactamente el mismo en términos de cuánto ocupa, ¿vale?
Porque el scale lo que haría sería ocupar el mismo espacio, pero visualmente verse más grande.
En cambio, esto sí que haría que ocupa 100% de píxeles, ¿vale?
Pero si utilizas el scale, se va a ver visualmente más grande, pero va a ocupar el mismo espacio.
Solo para que lo sepas, porque si no, estas cosas a veces tiene la gente y se vuelve un poco tarumba.
Entonces, aquí tendríamos esto, ¿no?
Ya tenemos dos estados.
Estado inicial, cuando no estamos haciendo absolutamente nada con este elemento.
Esto, estado final, que es cuando hacemos hover, dos estados.
Y por lo tanto, cuando ya tenemos dos estados, podemos hacer una transición, ¿no?
Queremos transicionar estado inicial a estado final.
Y esto muchas veces mejora la experiencia de usuario.
¿Y por qué mejora la experiencia de usuario esto?
¿Por qué ocuparía esto algún tipo?
Bueno, porque le estamos ayudando de alguna forma al usuario a entender de dónde viene y a dónde va, ¿sabes?
Y esto muchas veces le puede ayudar de decir, oye, si añadimos una transición, vamos a orientar visualmente al usuario.
Y estamos dando como una sugerencia sobre la causa y el efecto de esta interacción que ha ocurrido.
Entonces, ¿cómo lo podemos hacer?
Pues añadiendo un poquito de CSS.
Mira, antes de añadir la transición, vamos a añadirle un poquito más de CSS.
Vamos a hacer que esto lo dejamos a scale 2.
Vamos a hacer que le cambiemos también el color.
¿Vale?
Entonces, fíjate, ahora se ve mucho más claro.
Estamos cambiando el color.
Y también vamos a tener un box shadow.
0, 0, 10, px.
Y vamos a poner que también sea lila.
Entonces, fíjate, ¿no?
Ahora se ven los dos estados como mucho más bestias.
Ok.
Entonces, para hacer la transición necesitamos solo una propiedad.
¡Fácil!
¿Vale?
Necesitamos indicarle cuánto tiene que durar la transición.
O sea, por defecto ya va a saber que tiene dos estados diferentes.
Pero tengo que decir, bueno, quiero que transiciones entre los dos estados en un tiempo determinado.
En este caso, mira, voy a quitar también el HTML, que no es muy importante.
Y así lo tenéis ahí mejor.
Lo que queremos es decirle que la duración de la transición sea de X segundos.
Aquí podemos utilizar segundos o podemos utilizar milisegundos.
Por ejemplo, podríamos poner 500 milisegundos.
O podríamos poner un segundo, dos segundos.
O 0,5 segundos.
¿Vale?
Segundos o milisegundos.
Por defecto diríamos que no hay ninguna transición, que es 0.
Así que, ¿ves?
Sale así, directamente.
Pero si queremos decirle, oye, he escrito mal Transition.
Perdón, ¿eh?
Pero bueno, igualmente todavía no ha estado funcionando.
Pero bueno, por defecto diríamos que sería 0 la transición.
Pero si le decimos que queremos una transición entre este estado y este, que sea de 2 segundos,
lo que va a ocurrir ahora es que automáticamente ya está haciendo esta transición.
Y lo que es interesante es que nosotros no hemos tenido que decirle qué es lo que tiene que ocurrir en medio,
cómo son los colores que tienen que cambiar en mitad, cómo se tiene que escalar.
No le estamos diciendo absolutamente nada.
Automáticamente ya está el navegador detectando cómo tiene que ir de uno a otro.
Ahora, error súper común con el tema de las transiciones, que esto lo he visto así de veces.
Como puedes ver, cuando tú haces el hover se ve la transición y cuando sueltas se ve también la transición,
pero hacia atrás.
Lo cual tiene todo sentido para volver al estado inicial.
¿Qué pasa?
Que hay gente que la transición la pone en el hover.
Y esto, normalmente, no siempre, porque a veces lo queremos, pero normalmente esto está mal.
Porque ¿qué va a ocurrir con esto?
Esto lo que sí que va a pasar es que al principio se va a ver, pero cuando salgas, ¡pum!
¿Vale?
Hay veces que esto puede ser interesante, pero no siempre.
Así que ten cuidado con esto, ¿vale?
Pero fíjate, hacia atrás y tú, ¡pum!
Para evitar esto, tienes que tener la transición, la tienes que tener como mínimo,
porque luego ya veremos que lo puedes poner en más sitios,
como mínimo lo tienes que tener en el elemento en su estado inicial, ¿vale?
Si no, tendríamos estos problemas.
¿Qué estados podemos encontrar?
Podemos encontrar un montón de estados.
A ver, tendríamos el hover, el focus, focus within, el target, el active, ¿no?
Cuando se activa el elemento.
Cuando cambias una clase de JavaScript, puedes cambiar una clase a un elemento de JavaScript
y eso va a cambiar su estado, porque estamos cambiándole.
Cuando desactivas un elemento, un formulario, un input, estamos cambiando su estado.
Pero ten en cuenta que también cualquier atributo que cambies del elemento,
si le añades una clase, si le añades un atributo, eso es que está cambiando también su estado.
Y por lo tanto, ahí también podríamos animar entre un estado y el otro.
Así que lo importante es esa diferencia entre un estado inicial y un estado final.
¿Ok? Esa sería la transición.
¿Hay algún elemento HTML al que no le puedas agregar animaciones?
Elementos HTML, a todos los elementos HTML se le pueden agregar animaciones.
Lo que no se puede animar, por ejemplo, un vídeo, lo que es de dentro del vídeo,
a lo mejor no se puede animar.
Pero más allá de eso, todos los elementos HTML se pueden animar de una forma u otra.
Eso seguro, ¿eh?
Vamos a continuar.
Vamos, bueno, a los select, claro, los estiles, no se puede estilar el select,
pero sí podrías animarlo de alguna forma, por ejemplo, de moverlo, de mover el select.
O sea, animar se podría animar, pero no se puede animar todo,
porque, por ejemplo, lo de internamente del select no lo puedes animar.
Ahora bien, aquí podemos ver que se está animando diferentes cosas.
Su tamaño, su color, el box shadow, ¿no?
Se están animando muchas cosas.
Solo con una línea lo hemos logrado.
Pero, por defecto, vemos que se anima todo, todas las propiedades.
Nosotros podemos indicar qué propiedades son las que queremos animar.
Por ejemplo, por defecto, tenemos aquí un transition property all.
Se están animando todas.
Pero imagínate que dices, bueno, yo no quiero animar ninguna.
Pues pones un non.
Y entonces, pues te quedas sin animación otra vez.
Esto no tiene mucho sentido.
Pero sí que podríamos decir, oye, yo solo quiero que se anime realmente la escala.
Entonces, vamos a ver que ahora la transición del color es inmediata,
no hay transición.
Pero, en cambio, el que se haga más pequeño o grande, ¿vale?
¿Ves?
Sí que se está animando.
El color es inmediato, pero podemos ver que lo otro sí que, o sea,
el tamaño sí que se está animando.
También podemos decir más de una.
Por ejemplo, podemos decir, bueno, quiero el background y la escala,
pero no el box shadow.
Así que podríamos ver aquí que el shadow aparece inmediatamente
y desaparece inmediatamente.
Pero todo lo demás es que está haciendo.
Lo podemos separar por comas y ahí podemos indicar qué propiedad se anima.
Y ahora me dirás, bueno, Midu, ¿pero esto para qué sirve?
Esto no sirve para nada.
Vamos a ver.
Amigos, hay un tema con esto, ¿vale?
Si tú pones un transition all, puede haber problemas.
Porque si tú lo animas todo, tienes un problema de rendimiento.
Sobre todo si tienes sombras.
Las sombras suelen ser bastante, bastante caras de animar.
Y esto lo he visto así de veces, de que tienes una lista de elementos,
de 25, 50, 80.000 elementos, y lo que estás haciendo es una animación
cuando haces hover sobre cada una de las cars, ¿no?
Pues esto tiene un impacto bastante negativo en el rendimiento
y tienes que tener cuidado con esto.
A lo mejor te interesa evitar animar el box shadow,
pero sí que quieres animar otra cosa, el borde o lo que sea, ¿ok?
Luego, ¿por qué?
Porque si tú pones all, a lo mejor se te animan cosas que no quieres.
Como por ejemplo, a veces puede ser que por lo que sea,
tengas una fuente.
Esto seguro que lo habréis visto muchas veces
cuando entráis a algún porfolio de alguien
que mueves un poquito la ventana y empieza todo a moverse,
a animarse, el tamaño de la fuente, los colores, los tamaños,
y todo empieza a moverse.
Parece un videojuego eso, que en algún momento vas a pillar
el mando de la PlayStation.
Bueno, eso es porque ha puesto un transition all a saco
y ahí lo que está pasando justamente es que están cambiando la fuente,
el tamaño de la fuente y todo esto, y se está animando,
se está transicionando.
Entonces, por eso a veces es importante nosotros controlar.
Lo más sencillo es poner el all, nos quedamos a gusto,
pero tener cuidado por temas de rendimiento
y también porque a veces puede quedar mal en la UX
porque se estén animando cosas o que no queremos
o que no son necesarias, ¿vale?
Muy bien, vamos a quitar, vamos a decir que,
oye, sí, que quiero que sea el all.
Bueno, vamos a dejar el background scale
para que el shadow sea directo.
Ok, aquí lo que podemos ver, mira, voy a ponerle rojo,
que queda más, pum, rojo.
Mira, entonces, como estamos viendo la transición que ocurre
entre un estado inicial y el siguiente,
la velocidad es lineal, o sea, que siempre tiene la misma aceleración.
Para llegar del principio al final,
está utilizando la misma velocidad de cambio, ¿no?
O sea, podemos ver que no es que vaya más rápido al principio
o al final, simplemente va de principio a fin y lineal.
Va exactamente igual.
Entonces, ¿cómo lo estamos haciendo esto?
Porque tenemos un transition timing function.
Y aquí tenemos un montón de formas y una de ellas es lineal,
que sería la que tendríamos por defecto.
Y aquí podemos ver que funciona exactamente igual.
Tendríamos una forma que es totalmente lineal,
pero es muy artificial.
¿Por qué es artificial?
Porque realmente en la vida real,
las animaciones que ocurren no son lineales.
Existe la gravedad, que tiene una aceleración,
el peso de las cosas hace que al principio, pues,
pueda ir más rápido y luego cada vez más lento.
Los objetos, como tienen un peso, pues, se nota, ¿no?
Y por eso queda muy artificial.
Por eso muchas veces, cuando animáis cosas en la web,
tenéis que tener cuidado de dejarlo todo lineal.
A veces tiene sentido, pero hay otras que se necesita
que tenga como una aceleración en algún momento, ¿no?
Acelerar la entrada o acelerar la salida,
o las dos, que vaya más lento por el medio.
Y para hacer eso, tenemos diferentes funciones.
Tenemos una función, por ejemplo,
para iniciar la animación lentamente
y que luego, pues, vaya a toda velocidad.
Para eso hacemos ease in.
Y lo vamos a ver ahora, ¿ves?
Va como, mira, voy a quitar el boxado
para que lo veamos, a ver,
lo vamos a animar todo para que lo veamos, ¿vale?
Fíjate, al principio va más lento
y al final va más rápido.
Al principio va más lento y al final va más rápido.
Luego también tendríamos el ease out,
que sería al revés.
Inicia la animación a toda velocidad
y luego finaliza más lentamente, ¿vale?
Fíjate ahora la diferencia, ¿no?
Aquí tenemos que rápidamente se ha hecho gordito,
pero luego cada vez va más lento.
Eso es el ease out.
Ease es como voy a tomármelo con calma.
Me voy a tomar la salida con calma, ¿vale?
Luego tendríamos el ease in out,
que esto lo que hace es que tanto a la entrada
como la salida va con calma
y en el medio es donde realmente va a velocidad máxima.
Fíjate, lentito, luego acelera,
luego lentito otra vez.
Y luego tendríamos el ease.
El ease es bastante parecido al in out,
pero comienza ligeramente un poquito más rápido, ¿vale?
¿Ves?
Comienza ligeramente un poquito más rápido.
Es casi imperceptible.
Hay una, estos son los más típicos, ¿vale?
Pero hay una, hay una que muy poca gente conoce,
que está muy chula,
que está muy chula,
que te tienes que entender.
¿Qué es esta?
Mira, cuando tenemos timing function, ease y tal,
ok, pero tenemos un método que nos puede permitir indicar
cuántas, cuántas, cuántos pasos tiene que hacer
para terminar la animación.
Y se llama steps.
Y nosotros aquí le podemos decir,
oye, ¿cuántos pasos tienes que hacer para hacer la animación?
Le podemos decir cinco.
Y claro, esto va a quedar muy ortopédico,
porque va a utilizar cinco pasos
para hacer la transición entre uno y otro.
Mira.
¿Ves?
Cinco pasos.
Ha hecho un, dos, tres, cuatro, cinco.
En dos segundos.
Ha dividido los dos segundos en cinco pasos, ¿vale?
Un, dos, tres, cuatro, cinco.
¿Vale?
Eso es lo que ha hecho.
Cuanto más pasos pongáis,
más, digamos, más fluida se va a ver la animación.
¿Ves?
Aquí tendríamos diez pasos.
Cuanto más pasos pongáis,
veinte, pues vais a ver aquí que veinte,
pues cada vez se ve más fluido.
Pero está bastante chulo esto y dirás,
bueno, pero esto, ¿ves?
Ahora, claro, tiene cincuenta pasos,
ya casi es muy fluido.
Esto es bastante interesante porque más adelante veréis
que hay algunas animaciones que vais a querer,
como por ejemplo algunos loaders y cosas así,
que a lo mejor queréis que sea en pasos,
que haga un, dos, tres, cuatro.
Y así vais a controlar perfectamente.
Podríais hacer una rotación, por ejemplo,
en la animación,
pero lo que conseguís es que rote
y al hacer cuatro pasos sea primero arriba,
luego a la derecha, luego abajo, izquierda
y luego al principio, ¿no?
Y así pam, pam, pam, pam.
Así que hay bastantes cosas chulas
para hacer con este de steps
que al final no es muy conocido.
Hay otro que es como el más top,
que es el de Kubik-Bissier.
Nunca acuerdo cómo se pronuncia.
Kubik-Bissier, ¿ok?
Que esto es un método
que recibe cuatro parámetros.
Al final representados como
x1 y 1
y luego x2 y 2.
Que yo nunca me acuerdo de esto de memoria,
pero te voy a enseñar una herramienta
que te va a encantar
para hacer esto
sin tener que acordarte y tal.
Lo importante que sepas
es que esta función
lo que te va a ayudar
es que puedas personalizar
la curva Bissier cúbica de la animación.
No hace falta que sepas,
de hecho ya te lo digo yo,
que yo esto no lo he usado a mano nunca,
pero que sepas
que las herramientas de desarrollo,
si le das aquí a inspeccionar,
y esto está muy chulo,
aquí hay una herramienta muy chula,
muy chula.
¿Veis aquí que hay como un iconito?
¿Vale?
Tú le das a este iconito
y ya te sale aquí además
como una explicación de la animación.
En este caso nos ha enseñado
la animación que tenemos ahora.
Aquí tendríamos la lineal, ¿vale?
Y así además puedes ver,
ves que la animación lineal
siempre tiene la misma velocidad.
Aquí puedes ver como la ease in out,
que al principio va más lenta
y sale más lenta.
Pues además de todas estas,
tiene un montón aquí ya preestablecidas
que te pueden ayudar.
Por ejemplo,
¿ves aquí que hay como...
Y las pueden modificar.
Aquí puedes ir cambiando esta curva.
Y fíjate que cuando cambias esta curva
de la animación,
que aquí le estamos diciendo como,
bueno, pues quiero que vayas aquí súper rápido
y luego al final vas más lento
y luego incluso puedes ir para atrás.
O sea, podrías hacer una animación
que se queda al final
y luego vuelva para atrás
como si fuese un efecto rebote.
Y aquí te está dando
el Cubic Visier este
con todos los pasos que necesitas.
Y ya no te tienes que preocupar
de hacerlo tú y no sé qué.
Mira, aquí en este caso, ¿ves?
Aquí podemos hacer que vuelva.
O sea, está súper chulo
todo lo que puedes hacer aquí.
Y tiene algunas preestablecidas
para que tú no tengas que preocupar
de, ah, ¿cómo se haría esto?
O lo otro, ¿vale?
Le vas dando aquí
y vas a ir viendo
todas las que tiene.
Algunas están muy chulas
pues para que empiece
al principio más lento
y todo esto.
Y aquí, ¿ves?
Si dejas esta,
pues ya te ha puesto este.
Y aquí, pues podemos ver
que está funcionando
con la animación
que hemos configurado.
Así que ahí tendríamos
un trucazo,
unas herramientas
para que no te tengas que preocupar
con el Visier este,
la función,
porque yo sinceramente
nunca he sido capaz
de hacer a mano
lo que realmente quería.
O sea, siempre lo tengo que hacer
o con alguna herramienta y tal
y esa es la que yo utilizo.
Alguien estaba pasando esta
que está súper chula.
También que tenéis aquí
como ejemplos
de cómo funcionan
las animaciones, ¿veis?
Y también tenéis aquí
como las diferentes curvas
de la animación
y aquí tendríais
la propiedad
que tenéis que copiar.
O sea que está
súper, súper chula.
Y si no podéis utilizar
un custom
que es exactamente lo mismo
que os he enseñado
esa herramienta de desarrollo.
Bueno, he visto a alguien.
Eso, Feralp.
Gracias, Feralp.
No me da tiempo,
no me da tiempo a verlo.
Aquí tendríamos todo esto.
Al menos ya he visto
la de Duration,
hemos visto la de Property,
hemos visto la de Timing Function.
Pero también hay una
muy importante
que es la propiedad
de Delay.
Que al final
lo que nos permite
es especificar
en qué momento
va a comenzar
la transición.
O sea,
nosotros por defecto
tenemos un delay
de cero
porque empieza
la animación
inmediatamente, ¿no?
Pero le podemos decir,
oye,
quiero que la animación
tarde 200 milisegundos
en empezar.
¿Vale?
Y fíjate que ahora
pues ha tardado
200 mil segundos.
Para que lo notéis,
ponemos un segundo,
me pongo aquí,
tarda un segundo
en empezar.
¿Y esto para qué
puede ser interesante?
Y es muy buena pregunta.
Mirad,
una de las cosas
interesantes
en las transiciones,
animaciones
y todo esto
es el hecho
de que puedes jugar
con el delay
para que se muestre
como de una forma
mucho más bonita.
¿No?
O sea,
como que vaya cayendo
cada una de ellas.
Por ejemplo,
mira,
vamos a imaginar
que aquí
en lugar de tener
uno,
¿vale?
Un elemento,
de hecho,
voy a ir a otra pestaña
si dejaremos el original,
¿vale?
Imagina que tenemos aquí,
vamos a poner un section
y esto,
vas a ver que esto
te va a ayudar un montón
para hacer muchas animaciones
que hasta ahora
no sabías cómo hacer
y que te van a ayudar
a decir,
ah,
para esto puedo utilizar
el delay.
Vamos a poner tres pulsers
y vamos a hacer
que hasta ahora
el hover
era en el pulser,
¿no?
Era en la redondita.
Vamos a hacer
que esto en realidad
sea en el section.
O sea,
cuando en el section
hacemos hover,
vamos a enseñar
todos los pulsers
y el pulser
vamos a poner una opacidad
que sea de uno.
Vamos a poner por aquí
para que se muestre,
vamos a poner
que la opacidad
es de cero
y esto que habíamos hecho aquí
del scale
y todo esto
vamos a hacer
que sea aquí.
Bueno,
ni siquiera,
es que no hace falta,
solo para que lo veáis.
Yo creo que esto
no hace falta.
Ya con la opacidad
habrá suficiente
porque lo vais a ver
mucho más claro.
Entonces,
vamos a estilar el section
para que se vean
todos los elementos
con un display flex,
separamos 17 píxeles,
centramos todo,
align content center,
no,
content no,
items,
¿vale?
Items
y vamos a poner aquí
un mensaje que sea
add hover
para mostrar
los elementos,
¿vale?
Vamos a mover esto
por aquí,
un poquito así,
esto por acá,
a ver si esto nos ha roto,
vale,
vale,
muy bien,
haz clic para mostrar
los elementos,
el pulser,
esto es cero,
lo he hecho bien,
¿no?
¿Qué ha pasado aquí?
¿Qué ha pasado aquí?
Ah,
ah,
vale,
porque tengo el delay,
la madre que me parió,
porque tengo el delay,
vale,
que tengo el delay,
vamos a poner una buena fuente,
font family con el system UI
y vamos a poner que el font size
sea más pequeñito
para que lo veamos bien,
¿vale?
Se me queda,
no le queda suficiente espacio,
a ver,
vale,
ahí está,
vamos a quitar esto,
vale,
fíjate que ahora salen las tres
y salen cada uno
pues al mismo tiempo,
¿no?
Salen ahí,
cuando hace hover
se muestran los tres elementos,
pero aquí justamente
podrías jugar con el delay
para que quedase como mucho,
mucho más chulo,
porque puedes decirle,
mira,
vamos a tirar esto,
el delay aquí,
no tenemos ningún delay,
vale,
lo que podemos hacer
es que además
como podemos utilizar
la cascada de CSS,
aquí por defecto
todos los pulsers,
todas las redonditas
que vemos aquí,
ya vemos que son redondas,
que tienen este fondo,
que tienen el borde radius,
que la duración de la transición,
esto lo voy a quitar,
la duración de la transición
es dos segundos
y que el timing function
es un is
y por defecto
la opacidad tiene vacía,
vale,
o sea,
esto sería para todos,
pero ahora lo que podemos hacer
es decir,
vale,
vamos a ir a un pulser en concreto
y le vamos a decir,
el primer pulser,
el first child,
vamos a poner
que tenga un delay
y esto va a ser específico
para el primero
de cero segundos,
que esto es,
o sea,
esto es lo por defecto,
pero solo para que lo veáis visualmente,
vale,
el pulser,
el segundo hijo,
el segundo hijo,
vamos a decirle
que tenga un transition delay
de 300 milisegundos
y el tercer hijo,
vamos a decirle
que tenga un transition delay
de 600 milisegundos,
vale,
entonces ahora,
ya solo con esto,
ya estamos haciendo,
fíjate,
una animación tal que así
y fíjate que con esta animación
tan sencilla,
estoy seguro
que este loader
la has visto 80 mil millones de veces
y no te has dado cuenta,
esto es uno de los loaders
más típicos del universo,
esto de que lo hace así con el delay,
¿y con qué creéis que lo hace?
Con un delay,
vale,
lo hace justamente con un delay,
de forma que cada uno
de los elementos,
dice,
el primer elemento no tiene un delay,
el segundo sí,
el tercero sí,
entonces ahora ya estás entendiendo
mucha de esa magia
cómo se está haciendo
y esto está muy chulo,
¿por qué?
Porque esto lo podéis hacer
siempre que tenéis elementos
que están en fila
y que dices,
claro,
si tú tienes muchos elementos
que están en fila
y haces un opacity
de golpe de todos,
queda muy raro,
queda muy raro
porque no se está mostrando
como de forma,
no sé,
la experiencia del usuario
al verlo
es un poco extraño,
seguro que has visto
alguna página
que has dicho,
ay,
qué bonita,
que tiene este tipo de efecto
en el que va apareciendo
cada uno de los elementos
con un poquito de retraso
y esta sería la forma
de hacerlo,
con un delay,
¿vale?
Así que nada,
ahí tenéis el ejemplo del delay,
veis que ha quedado
uno detrás del otro,
y ahí lo tenéis,
y también como podéis ver,
sí,
exacto,
no es magia,
es programación,
como podéis ver además
también cuando se va,
o sea,
cuando dejáis de hacer el hover,
también ese delay existe,
¿vale?
Entonces el primero que se va
es el primero,
segundo,
tercero y tal,
así que es súper importante esto,
ahora,
todo esto que os he enseñado
está muy bien,
esto está muy bien,
esto que os he enseñado,
volvemos a nuestro ejemplo
del pulser que teníamos por aquí,
¿vale?
Esto está muy bien,
pero,
ay,
¿qué ha pasado con este?
¿qué ha pasado con este?
Ah,
porque tengo un segundo de,
vale,
había puesto el delay otra vez,
esto está muy bien,
pero hemos tenido que escribir
como un montón,
transition duration,
transition timing function,
no sé qué,
obviamente existe una forma corta
de escribir esto,
que es transition,
la forma corta
es poner transition,
primero pondríamos la,
bueno,
se puede poner de diferentes órdenes,
¿vale?
Hay diferentes órdenes
que podéis utilizar,
no siempre podéis utilizar el mismo,
o sea,
podéis,
por defecto,
podéis,
veis,
tener como un montón de formas
en que podréis poner primero
el nombre de la propiedad,
depende de lo que pongáis,
ponéis la función antes,
después,
o sea,
que es un poco raro
porque podéis hacerlo
de diferentes formas,
porque algunas propiedades
son opcionales,
pero lo más típico
es que al principio
podréis poner la propiedad,
o sea,
background,
o poner all,
pero esto lo podéis quitar
y saltároslo,
pero vamos a decir
que vamos a poner el background,
por ejemplo,
y luego le tendríamos
que poner la duración,
que aquí podríamos poner
300 milisegundos,
por ejemplo,
después de la duración
tendríamos la función
de animación
que hemos visto,
el ease,
el lineal,
el que sea,
y luego sería el delay,
si queremos un delay
de 200 milisegundos,
200 milisegundos,
o dos segundos,
¿vale?
Entonces aquí tendríamos
que vamos a animar
el background
durante 300 milisegundos
de forma lineal
y vamos a tener
un delay de dos segundos,
si nos ponemos aquí,
bueno,
si nos ponemos aquí,
¿me ha pasado de mí?
Ah, no,
no ha pasado de mí
porque solo es el background,
por eso el scale
es directo,
pero el background,
¿ves?
Tarda dos segundos y tal.
Si queremos que el scale
también tenga
una duración determinada,
podemos poner una coma
y decir,
vale,
el scale quiero que tarde más,
o sea,
que sean 500 milisegundos,
le vamos a quitar el delay,
500 milisegundos
y que sea con un
in,
is,
in,
out,
y entonces ya veis
que cada propiedad
podéis hacer
que tenga duraciones
diferentes
y funciones de animación
diferentes,
¿vale?
¿Veis?
Y por eso,
y esto seguro
que lo habéis visto
un montón de veces,
que se consigue
este tipo de cosas
en las que parece
que una propiedad
se anima de una forma,
otra de otra,
pues lo está haciendo
básicamente así,
podéis tener transiciones
para cada una
de las propiedades
y lo mismo incluso
con el boxado,
el boxado podéis hacer
pues que sea también
diferente
y que también
pues tarde
un poquito más,
¿vale?
Y ahí veríais
que el boxado
tarda más en aparecer
y ya está.
Así que esta sería
la forma,
la forma corta
y que además
os permite fácilmente
hacer que cada propiedad
tenga diferentes tiempos,
diferentes funciones
y ya está.
Así que para que veamos
un poco
cómo sería
la forma larga,
imagínate,
¡pum!
La forma larga,
cuatro líneas
ahí a saco.
La forma corta
de todo esto,
pues sería así,
¡pum!
Y además,
como el delay cero
es por defecto,
lo podrías quitar
y fíjate,
te estás ahorrando
un montón de líneas.
Pero es importante
muchas veces
entender cómo funciona
por detrás
para no saltar de golpe
y decir,
¡ah, bueno!
Yo lo voy a hacer así
de golpe.
Bueno, no,
pues espérate,
primero entiende las propiedades
y luego utiliza el atajo,
¿vale?
Ya que tenemos aquí
ahora la pregunta del millón.
Oye,
Midu,
¿pero qué podemos animar
y qué no podemos animar?
Bueno,
te voy a explicar dos cosas.
Uno,
la lista oficial.
Tienes una lista oficial
de propiedades
que son animables,
¿vale?
Que puedes utilizar
en las transiciones
y en las animaciones.
Tienes la lista oficial
y, bueno,
pues ya lo tendrías,
las diferentes animaciones
que puedes hacer y tal.
Pero,
lo que yo os voy a decir,
porque al final
es un rollo
que estéis ahí buscando
continuamente,
¿cuál es la propiedad
que se va a animar y tal?
A ver,
es muy sencillo.
Tenéis que pensar,
¿la propiedad
que estoy animando
podría tener
un estado intermedio?
Por ejemplo,
un color,
es obvio que un color
de azul a rojo
sí que tiene
un estado intermedio.
Viajará hasta ahí.
También casi cualquier cosa
que vaya con píxeles,
tamaños,
posiciones
y cosas así.
Pero,
¿qué no se va a poder animar?
Hombre,
si cambias
el tipo de la fuente
y pasas
de una fuente
serif
a una sans serif,
no hay un estado intermedio.
Si cambias
un background image,
una imagen
a otra imagen,
no hay un estado intermedio.
¿Cuál es el estado intermedio
entre esas dos?
Pues no hay estado intermedio.
De hecho,
hasta hace poco
tampoco se podía
hacer una transición
con el display non
y ahora sí que se puede hacer.
Cosa que por fin
me parece maravilloso
porque antes
no se podía hacer.
Pero que sepáis
que ahora,
o sea,
que no podéis animarlo todo,
sobre todo
si no tiene un estado intermedio.
Pensad,
oye,
¿puede tener un estado intermedio?
Por ejemplo,
los gradientes.
Los gradientes
tampoco se pueden animar.
No se pueden animar
al menos por ahora.
Así que nada,
hay que tener paciencia
y a ver si se puede hacer
alguna cosa.
Solo se puede hacer
con propiedades continuas,
más con propiedades discretas.
Casi todo lo que tenga
píxeles
y todo esto
y que puedan tener
un estado intermedio,
pues ya está.
Yo normalmente
lo pienso así
y nunca he tenido problemas
de pensar,
ah, no,
esto se va a venir.
Así que en general
se puede animar casi todo,
todos los elementos,
casi todo,
pero las transiciones,
por ejemplo,
un font family
que no tiene un estado intermedio,
no se podría hacer.
¿Vale?
Ahora,
cosas interesantes
de las transiciones
que hemos visto aquí.
Dos cosas
que son dos truquis
que están,
a ver,
es básico,
pero es interesante.
Fijaos,
aquí que hemos puesto,
a ver,
porque ahora esto se me da,
coño,
ah,
porque he puesto transform,
voy a poner all,
¿vale?
Para que se anime todo.
Vale,
perfecto.
Mira,
hemos animado esto,
pero hay veces
que queréis que
al hacer hover,
al inicio,
tenga una animación
y al final tenga
otra duración
o otra forma.
Pues esto lo podéis lograr
justamente haciendo esto.
Puedes decir que aquí,
en el inicio,
la duración sea de 300 milisegundos
y esto será el estado final,
¿vale?
O sea,
hay que pensarlo como al revés.
Esto será el estado final.
El estado final
tardará 300 milisegundos
en volver
y aquí podríamos cambiarle
la duración
y decir que tarde un segundo.
¿Qué va a pasar con esto?
Que cuando haces hover
tarda un segundo,
pero cuando sueltas,
ves,
es más rápido.
Esto está muy chulo,
aunque a veces cuesta,
porque es pensarlo
como al revés,
¿no?
Como para la primera animación,
la primera animación,
¿vale?
Sería como al principio
la tienes que poner
en el hover
y la del final
la tienes que poner
en el elemento aquí.
Y entonces fíjate
que cuando haces hover
va más lento
y cuando suelta
va más rápido.
Esto también lo habréis notado
así de veces,
así de veces,
un montón de veces,
en un montón de páginas
y es porque tiene sentido.
Tiene sentido
porque muchas veces
vamos a querer
que cuando el usuario
hace la acción,
por ejemplo,
que se pone encima,
que sea un poquito más lenta,
pero cuando se va
que sea más rápida
porque vamos a querer
que pierda la atención
en ese elemento.
Por lo tanto,
la hacemos un pelín
más rápida
justamente por eso.
Eso lo vais a ir notando
ahora que lo sabéis,
lo vais a notar.
Cuando entra más lenta
y cuando te vas más rápida
para que la atención
del usuario
ya se quite de ahí.
Ya os he comentado
el tema
de tener más de una transición
en diferentes propiedades,
pero vamos a hablar
de un tema de accesibilidad
bastante importante
y que no cuesta nada,
no cuesta nada,
es un momento.
Tema de accesibilidad.
A ver, amigos,
hay un tema
y es que hay veces
que hay gente
que se puede marear.
He visto muchas veces
páginas de productos
de millones
o porfolios
de gente
que tiene demasiadas animaciones
y incluso
hay gente
que le marea
y esto es real.
Hay mucha más gente
de la que pensamos
que tienen gafas,
que tienen problemas de vista,
que se marean fácilmente,
que tienen epilepsia,
o sea,
un montón de cosas.
Por lo tanto,
deberíamos tener cuidado
y entonces
se pueden desactivar
las animaciones
muy fácilmente
con una media query.
¿Cómo lo podemos hacer?
Mira,
lo que podemos hacer aquí
es añadimos
una media query
que le decimos,
vale,
cuando el usuario
prefiere
que hayan animaciones
reducidas,
¿vale?
Vamos a decir
que el pulser,
las transiciones,
transition,
sea none,
¿vale?
Vamos a hacer
una media query
que vamos a tener
la opción
de cuando sea
prefers,
reduce,
motion,
lo tenga en reduce
o si no sería
no,
ah,
no me acuerdo,
no preference,
creo que es
no preference,
creo que por defecto
diríamos no preferencia,
pero si el usuario
nos dice
que lo que es reducido
le vamos a quitar
las transiciones.
¿Cómo funciona esto?
Mira,
fíjate,
yo ahora veo exactamente
igual la animación,
la veo igual,
¿no?
Pero si yo me voy aquí,
me voy a los ajustes
del sistema,
¿vale?
Me voy aquí
a accesibilidad
y ahora os lo enseño,
accesibilidad,
aquí,
me voy a la pantalla,
y le digo,
reducir movimiento,
le doy aquí,
esto va a desactivar
un montón de animaciones
del sistema operativo,
por ejemplo,
cuando se ponen más pequeñas
las ventanas,
más grandes y tal,
pero también ha desactivado
la animación
gracias a esta media query,
fíjate,
si quito la media query,
vemos la transición,
si pongo la media query,
ya no tengo la transición,
entonces le estamos dando
a un usuario
una forma de decir,
ostras,
vale,
si este usuario
no quiere una animación,
pues ya estaba,
le vamos a desactivar
esta animación y tal,
esto lo podéis llevar
a un extremo muy brutal
de desactivar
todas las animaciones,
pero a veces una cosa
que podéis hacer es,
por ejemplo,
que sean duraciones
más grandes,
que no anime
tantas cosas,
o sea,
podéis hacer un montón
de cosas,
no hace falta muchas veces
que desactivéis totalmente
las animaciones,
pero a lo mejor
queréis animaciones
que sean más discretas,
vale,
al final podéis hacer esto,
que sean más discretas,
no hace falta desactivarlas,
y ya está,
sino que con que las hagáis
más discretas,
a veces ya funciona,
mira,
ajuste el sistema,
ya lo ponemos aquí otra vez,
y ya me funciona otra vez,
¿ok?
así que ahí lo tenéis,
hay un estándar
para el tema
de accesibilidad web,
sí que hay un montón
de estándar
para el tema
de accesibilidad web,
tanto de contrastes,
márgenes,
como de grande
tienen que ser los botones
y todo esto,
entonces,
estos eran los keyframes,
vamos con el tema
de las animaciones,
porque hay los keyframes,
estas son las transiciones,
las transiciones
están súper bien,
eso también lo tiene Windows,
lo tienen todos sistemas
operativos,
porque es obvio,
bastante obvio,
de hecho,
esto también lo podríais incluso
hacer en un botón físico
en vuestro sistema operativo,
no con una media query,
pero sí con una clase
que podéis aplicar al body
y así desactivarlo todo,
¿no?
Lo tiene Windows,
Linux,
Ubuntu,
Macos,
lo tienen todos,
es que es algo bastante básico,
esto serían las transiciones,
que está súper bien,
porque nos permite
hacer una transición
entre dos estados,
¿vale?
Pero también tenemos
las animaciones CSS,
que nos permiten animar
elementos
sin necesidad
de interactuar con ellos,
simplemente vamos a crear
una secuencia de estados
de la animación,
¿vale?
Como unos fotogramas clave
y vamos a decirle,
vale,
quiero que vayas
de este fotograma clave
a este y ya está,
que te animes,
y le podemos decir
que eso sea infinito,
que vaya hacia atrás
y tal,
lo vamos a ver,
porque lo interesante
de esto es los keyframes,
que son la clave,
la salsa,
la vida
de lo que vamos a ver,
por ejemplo,
los keyframes
son la forma
que nos va a permitir
que vayamos a poder decirle
cómo queremos
que se anime algo,
por ejemplo,
ahora habíamos hecho
dos estados,
vale,
vamos a quitar esto,
vamos a quitar todo esto,
vamos a quitar esto,
le quitamos el hover,
le quitamos la transición
también,
no queremos transición,
quitamos esto,
este es el CSS,
nos ha quedado esto limpio,
¿ok?
Vamos a crear
unos fotogramas claves
y a estos fotogramas claves
cuando queremos crear
la animación
le tenemos que dar un nombre,
aquí tenemos que poner
animation name,
vamos a poner,
por ejemplo,
yo que sé,
scale
o move,
vamos a poner move,
solo para que veas,
move,
¿ok?
Y aquí le tenemos que decir
dónde está empezando
este fotograma,
le podríamos poner
una palabra clave
que significa from,
que sería como desde el principio,
esto sería lo mismo
que poner 0%,
como el punto 0%
de nuestra animación
o el segundo 0
de la animación,
pues from sería
como el estado inicial
de nuestra animación,
el estado inicial
de nuestra animación
vamos a decir
que sea el translate
y que vamos a tenerlo
en 0 pixels,
¿vale?
Vamos a tener
que se quede
exactamente igual,
pero vamos a decir
que su destino,
el final de esta animación,
vamos a decir
que se mueva
el translate,
vamos a decir
que se mueva
100 píxeles,
¿vale?
Ahora vamos a querer
utilizar esta animación,
esta animación
ahora la podemos utilizar
en cualquier elemento CSS,
la podemos reutilizar
tantas veces
como queramos,
para utilizar una animación,
pues nos vamos aquí
animation
y le decimos
la animación
que tienes que utilizar
es move,
ajá,
pero no está pasando nada,
¿qué está pasando aquí?
nos han engañado,
vale,
parece que no funciona
porque
obviamente
no le hemos dicho
qué duración
tiene que tener
esta animación,
así que vamos
animation,
duration,
que ya veis
que es bastante parecido
a lo transition,
vamos a decir
tres segundos,
¿vale?
vamos a refrescar
porque,
bueno,
pum,
¿ves?
ya se cae,
se cae,
¿has visto?
vale,
hemos visto diferentes cosas,
uno,
¿por qué tengo que refrescar?
y eso tiene que ver
por cómo es la animación
y es que la animación
solo ocurre una vez,
fíjate,
que voy a refrescar
y ves,
ocurre una vez
y no solo ocurre una vez
sino que cuando termina
vuelve a su estado inicial,
o sea,
vuelve otra vez al principio,
todo esto
lo vamos a arreglar
y lo vamos a entender
y no te preocupes,
pero tenemos que pensar aquí
como que esto es una película,
como las películas de Pixar,
una película animada,
lo que estamos haciendo aquí
es decirle,
oye,
vamos a crear una película,
una película
donde su primer frame
lo primero que se ve en la película
es que nuestro elemento
está en esta posición,
en la posición del eje vertical
está en la posición cero
y quiero que en la película
cuando termine
el último frame de la película
ya cuando salen los créditos
y todo esto,
lo que quiero
es que la posición vertical,
en la posición del eje Y
sea 100,
por eso durante 3 segundos
lo que vamos a hacer
es que vaya de un sitio al otro
y ahora os vais a reír,
lo que os vais a decir,
va a decir
ah, que exagerado,
no sé qué,
esto,
esto es exactamente lo mismo
que utilizan las películas de Pixar
para animar todos los muñecotes
que veis,
lo que pasa es que es mucho más complejo,
pero la idea de los keyframes,
la idea de tener
un movimiento
de A a B
es justamente lo mismo,
lo que pasa es que aquí lo hacen,
pues esta mano
tiene que ir de aquí a aquí
y entonces
como se hace ese movimiento
de un sitio a otro
lo hace exactamente así,
yo sé que ahora
vais a decir
no, imposible,
obviamente a una escala
mucho más compleja,
mucho más complicada,
pero esta es un poco la idea
en la que muchos movimientos
se tienen que hacer realmente así,
así que es la base,
es la base muy básica,
pero de aquí van
la idea de los fotogramas clave,
también esto lo podemos ver
en un montón de cosas
que se hacían antiguamente
con flash y cosas así,
¿vale?
pero para que os hagáis
un poco la idea.
Ahora,
esto del translate
quiere decir
es trasladar este elemento
en el eje vertical
que sería la I,
aquí el 0 sería
su valor por defecto
y lo estamos moviendo
100 píxeles hacia abajo,
por eso pues
que cuando hacemos la animación,
¿ves?
cae hacia abajo
100 píxeles
y cuando acaba
vuelve al principio,
¿ok?
Flash es una cosa muy antigua
que si me pongo a explicar
igual nos salen canas
de lo antiguo que es,
o sea que imagínate.
Bueno,
entonces ya habíamos visto
que la duración
le hemos puesto 3 segundos
y tal.
Vamos a hacer un ejemplo
más complicado
porque es más interesante
y que además
habréis visto
10.000 millones de veces
en un montón de sitios
y que seguro
que os habéis preguntado
oye,
pero ¿esto cómo se hace?
Mira,
vamos al pulser este,
le vamos a poner
un pseudoelemento
after.
Un pseudoelemento
es un elemento
que está dentro
del elemento HTML
pero que no lo tenemos
nosotros que escribir
y que el after
significa que está justo después.
Si alguna vez tenéis dudas
de oye,
pero ¿qué es el after y tal?
¿Esto de dónde sale?
Bueno,
cuando inspeccionéis los elementos
fijaos
que,
bueno,
ahora no me va a salir,
ahora lo enseño.
Mira,
ahora cuando le pongamos un contenido
es que sin contenido
no aparece.
¿Ves?
Tenéis que poner un contenido vacío
porque si no,
no aparece.
Pero veis ahora
que pone aquí
after
es como un elemento
invisible
que no tenemos que escribir
en HTML
pero que quiere decir
dentro del div
al final del div
tenemos este
pseudoelemento
que podemos poner
lo que nos dé la gana.
De hecho,
aquí podemos poner
hola
y esto
no va,
ah,
no ha aparecido.
Hola,
¿ves?
Y ahí lo tenemos.
Hola.
Y lo podéis escribir
y escribís ahí el hola.
O sea,
no habría ningún problema
en ponerle contenido.
Pero muchas veces
se utiliza para alguna floritura,
para enseñar alguna cosa,
una imagen,
un icono,
lo que sea.
Pero ahí es donde está
el pseudoelemento after.
Igual que un after
también tenemos el before.
Podríamos poner
un pseudoelemento
justo al principio
del elemento div
o al final.
Y esto se utiliza un montón
así que está muy bien
que lo sepas.
Vamos a poner
que esté en position absolute
que va a ser absoluto.
Va a estar,
como tenemos aquí un relative,
esto lo vimos
en la primera clase,
me parece.
Creo que lo vimos
en la primera clase.
Mira,
le vamos a poner un width
que sea del 100%.
Vamos a posicionarlo
arriba a la izquierda.
Le vamos a poner
un background
que sea exactamente
el mismo que ya tenemos.
Vamos a poner
un border radius
de 50%
y lo vamos a poner
un z-index de menos uno
para que esté justamente detrás.
Si le ponemos
un scale 2
y opacity 0.5,
¿vale?
Este que casi no se ve,
o sea,
el que tiene menos opacidad
es el que está detrás.
Y con estas cosas,
esto lo voy a quitar ahora
porque le vamos a hacer
una animación,
pero con esto
vamos a hacer
una animación
que es como,
a ver si lo encuentro,
animation pulse css.
Es que es muy típica
esta animación.
A ver si encontramos...
Es una animación
que se ve un montón
especialmente,
a ver,
en temas de...
Mira,
esto.
¿Veis esto?
Esto es lo que vamos a hacer.
Lo vamos a hacer
porque está muy chulo
y se utiliza bastante
incluso en botones,
en temas de notificaciones
y cosas así
y se hace en un momento.
Así que vamos a quitar esto
y vamos con los keyframes.
A ver,
tema de keyframes.
Los keyframes
que vamos a querer
en este Pulse
es muy fácil.
Le decimos
que tiene que ir
al principio
con una opacidad
de cero
porque no se tiene que ver
y luego podemos decirle
diferentes pasos.
Como antes he puesto el from,
lo voy a hacer
con el tanto por ciento.
Al inicio de mi película,
en el punto cero,
la opacidad de ese elemento
tiene que ser
totalmente transparente
y en la mitad
de la película
vamos a hacer
que ya se transforme
con una escala
o esto lo podemos poner
directamente.
Scale,
ponemos 1.4
para que salga más grande
y le vamos a poner
una opacidad
de .4
o 40%.
Lo que quieras.
Esto hay gente
que no sabe
que se pueden poner
tantos porcientos
las opacidades
pero podéis poner
0.4
o como lo hago yo
que es como a mí me gusta
por la forma corta
.4.
Puedes obviar el cero
y ya funciona.
Entonces ya tendríamos
aquí la animación de Pulse.
La animación de Pulse
vamos a utilizarla
en este After.
Entonces decimos
Animation Name
va a ser el Pulse
Animation Duration
vamos a poner
2 segundos
y Animation Timing Function
vamos a decir
Is In Out
y aquí vamos a entender
una nueva propiedad
que es la que hemos visto antes
el Timing Function.
Esto lo que va a indicar
es con qué aceleración
se tiene que reproducir
la animación
y esto lo que quiere decir
es que tanto al principio
como al final
va a ir más lento
que el azar
en la parte central.
como podéis ver
parece que no se ve
pero es que hay que refrescar
porque la animación
ya ha terminado
como solo funciona una vez
pues es lo que hay
ahora lo arreglaremos eso
vamos a refrescar
bueno
me he dejado
he dejado la del movimiento
vamos a quitarla del movimiento
vale
quitamos la del movimiento
y lo veremos más claro
vale
ahí lo tenemos
¿veis?
habéis visto lo que ha pasado
¿no?
que ha hecho esa Pulse
como así
como si fuese un corazón
lo podemos hacer
un poquito más grande
para que sea como
un poquito más drástico
y lo veamos
¿vale?
¿veis?
como más drástico
está bastante chulo
también podríamos decirle
que aquí la opacidad
se quede
al punto 6
y así nos aseguramos
que no llega a hacer
la opacidad al 100%
al final
¿vale?
y así
pues quedaría
una cosa así
vale
perfecto
el problema que estamos viendo
es que la animación
no se repite
la animación
solo ocurre una vez
la animación
está ahí una vez
y ya está
y dices
bueno pero yo creo que
se repita más veces
porque si no queda raro
queda como extraño
porque no se repite
más veces
bueno esto lo podemos arreglar
igual que podemos dar
el nombre
la duración
la función
de cómo tiene que hacer
la reproducción
la velocidad y tal
podemos decirle
cuántas veces
se tiene
que ejecutar
o tiene que reproducir
la película
por defecto
ya hemos visto
que se reproduce una vez
pero podemos decir
reproducelo 5 veces
¿vale?
entonces si ahora
refrescamos
vamos a ver
que lo hace
una
dos
¿ves?
tres
y cuando llega
la quinta
va a terminar
va a decir
bueno yo he llegado
hasta aquí
porque obviamente
no voy a estar viendo
esto todo el rato
¿ves?
termina
se acabó
pero hay veces
que por lo que sea
hay veces que hay animaciones
que quieres hacer una vez
dos veces
para que no sean muy intrusivas
pero hay veces
que por lo que sea
tú quieres que sean infinitas
quieres que lleguen
hasta el infinito
y más allá ¿no?
pues para eso
lo que puedes decirle aquí
es que te lo haga
infinitas veces
y ahora ves
que lo está haciendo
todo el rato
ahora ya no para
de hacerte esta animación
todo el rato
y ahora como la estamos
haciendo todo el rato
ya no hace falta
que la hagamos tan grande
y ya está
entonces ya la estamos
haciendo continuamente
la va a hacer
todo el rato
vale
igual que hemos visto
antes que teníamos
la de duration
obviamente aquí también
teníamos la animation delay
si queréis esperar
que tarde un tiempo
esto puede ser interesante
por ejemplo
imaginad que entráis
a una página
y tenéis
como un sitio
que son las notificaciones
de cuántos mensajes
tiene el usuario
si tiene un producto
en el carrito
lo que sea
normalmente
nada más entrar
es un poco intrusivo
que ya le pongas
ahí los flasheos
pues puedes decir
oye esta animación
voy a hacer que tarde
10 segundos
para que cuando el usuario
ya ha visto bastante
la página
ey
recuerda que tienes esto
entonces por ejemplo
aquí un segundo
y luego el delay
lo puedes hacer así
y es mucho más fácil
no que ya le estés flasheando
desde el principio
pones un delay
de 5 segundos
y haces que se mueva
o lo que sea
vale
entonces ya tendríamos
esto por aquí
pero
hay una cosa
muy interesante
muy chula
justamente sobre el tema
de las animaciones
y lo vamos a ver
en
ventana incógnito
la ventana porno
vale
que es el tema
de
hemos visto cuántas veces
podemos repetir
pero vamos a ver
el tema de la dirección
de una animación
mira
tengo aquí una imagen
de Mario
it's a me Mario
bueno
pues vamos a hacer
que Mario
vamos a hacer un poquito
más chiquitito
bueno
no tan chiquitito
vamos a poner
80
vale
este en Mario
un poquito cabezón
vamos a
tendremos una animación
que sea mover
le vamos a poner
animation duration
que sea 2 segundos
vamos a decir
que se va a mover
infinito
vale
infinito
le vamos a decir
que la
la secuencia
porque vamos a mover
al Mario
vamos a hacer
que la velocidad
sea lineal
durante toda la animación
y
por ahora vamos a dejar así
vamos a hacer el keyframes
vamos a llamarle
animación mover
porque vamos a mover
al bueno del Mario
este
y lo vamos a mover
de izquierda a derecha
podemos moverlo
como lo hemos visto antes
transform
transform
translate
x
y aquí moverlo
en el punto 0
pues vamos a decir
que esto sea 0
y al final
vamos a decir
que lo movemos
pues yo que sé
lo vamos a mover
translate x
lo movemos
200 píxeles
vale
y míralo
ahí está
moviéndose
muy bien Mario
muy bien Mario
ya se está moviendo
de izquierda a derecha
de inicio a final
va
del punto 0
al punto 200 píxeles
una cosa muy interesante
que no te he comentado antes
es que
el estado inicial
de las animaciones
como en este caso
ya ves que
esto sería
como el valor por defecto
esto fíjate
que lo podemos quitar
porque es que
ese es el
su punto inicial
si le quitamos el from
como su punto inicial
tampoco lo necesitamos
o sea
le puedes indicar
directamente
cuál es el destino
porque el estado inicial
ya lo sabe
ya lo conoce
y no necesitas
indicárselo
yo te lo estoy indicando
básicamente
para que lo entiendas
visualmente
pero en este caso
como el estado inicial
es exactamente el mismo
que tiene por defecto
lo puedes quitar
para que es interesante esto
porque hay veces
que por lo que sea
quieres que empiece
con una opacidad
en concreto
y que también
muevas la opacidad
hacia el final
y aquí podemos ver
que la animación
empezaría
desde ese punto
y luego termina
con la opacidad
al tope
y esto como no es algo
que tiene por defecto
pues a lo mejor
es una cosa
que te puede interesar
pero si ya tiene
todos los valores
por defecto
lo podrías quitar
entonces
¿por qué te enseño
este ejemplo?
porque un tema
de las animaciones
obviamente
que es muy importante
la dirección
en este caso
nuestro amigo Mario
va de izquierda a derecha
porque le estamos
moviendo aquí
que vaya
como que reproduzca
el vídeo
la animación
hacia adelante
pero podríamos decirle
que la animación
la dirección
sea al revés
¿vale?
entonces
no es que se va a dar
la vuelta al Mario
obviamente
pero la animación
que estamos haciendo
de izquierda a derecha
de ir del from
al to
en este caso
lo vamos a hacer
en reversa
o sea
que vamos a ir
del to
al from
y esto
¿por qué puede ser interesante?
bueno
pues como puedes ver
porque hay veces
que queremos
desandar
el camino
que queremos hacer
a veces puede tener sentido
especialmente
imagínate
que tienes una UI
que sea
de borrar una cosa
¿vale?
y que cuando lo borres
haga el camino inverso
que habías hecho
al crearlo
¿no?
eso está muy chulo
porque lo puedes hacer
en reversa
imagínate que al crearlo
pues haces
que aparezca
y se haga grande
y cuando lo eliminas
hace en reversa
el mismo
la misma animación
¿vale?
hay un montón de casos
que está bastante
bastante chulo
que puedas hacer
este tipo de cosas
también incluso
hay a veces
que lo que te interesa
es alternar
¿qué quiere decir esto?
que cuando termine
la reproducción
luego vaya
hacia atrás
y esto también
lo habrás visto
en sliders
por ejemplo
de que cuando termina
la animación
vuelve hacia atrás
además hay veces
que si por lo que sea
no tienes la iteración
que sea infinita
pues a veces
haces una vez
la animación
¿no?
que vas
hacia adelante
vuelves una vez
y termina ahí
y ya está
entonces tendrías también
la posibilidad
de alternar
cuando termina la animación
entonces vuelve para atrás
y también tendrías
el alternate reverse
el alternate reverse
es como empezar
al revés
pero también ir alternando
¿vale?
y obviamente tendrías
el normal
el normal es el que
por defecto
no hace falta que lo indiques
pero es el normal
que va hacia adelante
y ya está
ahora bien
imagínate que estás cansado
de ver al Mario este
¿lo ves?
y ya te estás cansando
porque no para de andar
pues que sepáis
que podéis pausar
también las animaciones
esto
normalmente en CSS
no es tan
tan útil
¿no?
porque claro
pausar una animación
yo te puedo decir
animation
play
state
y le deis a pause
y lo pausas
¿vale?
y lo quitas
y se despausa
y lo pausas
y lo pausas
¿no?
pero bueno
hay veces
que sí que puede ser interesante
y te voy a explicar dos
¿no?
una obviamente
es con javascript
que tengas algún botón
o algo
de que al darle click
insertes
esta propiedad
para evitar que se mueva
y hay veces
que tenemos animaciones
que si el usuario
tiene que interactuar
con ese contenido
puede ser molesto
por ejemplo
imagínate
que yo te digo
tienes que darle click
al Mario
claro
pero el Mario se mueve
es un poco rollo
que yo me pongo encima
y cada vez que le quiero dar click
se sigue moviendo
pues una forma
que podrías hacer esto
es cuando hace hover
en este caso en el Mario
pero pueden ser
cualquier elemento
que se esté moviendo
que tenga una animación
le puedes decir
bueno
cuando hago el hover
entonces vamos a pausar
al bono del Mario
además le podéis cambiar
pues la opacidad
le podéis decir
vale pues ahora
ponemos la opacidad
o incluso el contraste
le vamos a poner 150%
le podéis cambiar el cursor
lo que sea
¿no?
y entonces
¿ves?
ya lo tenemos así
y cuando te pones encima
se pausa
esto también habréis visto
aunque no se habéis dado cuenta
que ocurre en cars
que a lo mejor
tú estás
se está animando
todo el rato
y cuando te pones encima
se pausa
o se pausan solo algunas
y otras
sí que siguen funcionando
pues así es como se podría hacer
justamente esto
para aprovechar un poco
que estamos aquí
con el image
image hover
te voy a enseñar una cosita
que no hablamos
del curso de CSS
y me parece que está bastante chulo
que lo conozcas
que es el CSS nesting
y es que
cuando tenemos aquí
el image
y aquí tenemos image hover
ahora en CSS
podemos utilizar
el ampersand
¿vale?
para indicar
también como el parent selector
¿no?
y en lugar de tenerlo separado
lo podríamos poner
aquí dentro
y esto funcionaría
exactamente igual
a como estaba funcionando
antes
¿ok?
esto lo que quiere decir
esto lo va a cambiar
por el image
porque este ampersand
se está refiriendo
a este image de aquí
y ves
fíjate
que funciona exactamente igual
¿por qué me pone aquí
un montón de cosas rojas
que funciona mal y tal?
el problema
es que
esta versión
de Visual Studio Code
que tenemos aquí instalada
no soporta
esta sintaxis
porque es bastante nueva
pero lo cierto
es que si miráis
a Can I Use
para ver el soporte
que tiene el CSS nesting
que es la funcionalidad
que si has utilizado
SAS
seguro que la conoces
el 80%
de los navegadores
ya la soportan
así que
la verdad
es que ya
está bastante
bien parida
lo último
que le han añadido
es la gente de Safari
así que
nada
yo creo que ya
muy pronto
vamos a tener
un montón de soporte
pero bueno
solo para que conozcas
esta sintaxis
que hace que sea
mucho más legible
entender
que te estás refiriendo
dentro del image
pues vamos a tener
que cuando hacemos
hover en el image
le vamos a aplicar
estos estilos
y si no
tendríamos que hacer
el otro
ahora bien
vamos a hablar
de otro tema
que esto sí que es interesante
también para el tema
de animaciones
y es que
fíjate en la animación
del Mario
cuando con todo esto
le voy a quitar
que sea infinito
le he quitado el infinito
para que solo lo haga una vez
y fíjate lo que pasa
con el Mario
si yo refresco
todo esto
voy a dejar esto
como estaba
solo para que
no salgan rojo
que si no
si viene alguien tarde
va a decir
eso es tan rojo
eso es tan rojo
bueno
vamos a hacer
que solo ocurra una vez
vale
la animación
vale
y fíjate lo que ocurre
lo que pasa
cuando termina la animación
es que vuelve
a su estado
inicial
o sea
a su estado inicial
aunque ha terminado la animación
y esto es un error
muy común
que tenéis en muchas animaciones
porque decís
ostras pero porque esto vuelve
a donde estaba
que no se que
que no se cuanto
esto es porque
como se tiene que comportar
el elemento
antes y después de la animación
por defecto
lo que hace es
volver a su estado inicial
sin importar la animación
los keyframes
pero a veces
lo que queremos
es decir
bueno
queremos que
si ha terminado la animación
y se ha vuelto a la derecha
vamos a hacer algo
para que se quede
exactamente ahí
para eso
lo que
lo podemos utilizar
es una propiedad
que se llama
animation fill mode
ok
por defecto sería
none
que significa
que el elemento
no mantiene
ningún estado
también tendríamos
el backwards
que sería
que el elemento
al inicio
usa el keyframe
inicial
y luego tendríamos
el que nos interesa
en este caso
que sería el forwards
que esto lo que va a hacer
es que una vez
que se haga la animación
lo que va a hacer
es quedarse
al final
vale
fíjate
le damos
y ahora cuando termine
la animación
se queda
en el frame final
esto lo estamos diciendo
oye
el animation fill mode
es que tiene que ser
el forwards
podéis utilizar los both
y así lo que vais a decir
es que el elemento
al inicio
usa el keyframe inicial
y el elemento
cuando se termina
la reproducción
utiliza el keyframe final
así ya
normalmente
normalmente
a ver
no es
no se puede decir
siempre
no sé qué
pero muchas veces
vais a necesitar el both
porque vais a querer
controlar
cuando la animación
está al principio
y al final
que realmente
no haya un cambio
que no dé un salto
de que algo
cuando termina la animación
vuelva a su estado inicial
va a ser bastante raro
y también al principio
queréis que esté
en el sitio inicial
entonces normalmente
se utiliza el both
y a partir de aquí
vais a ver
que con los ejemplos
que haremos del scroll
y todo esto
vamos a utilizar el both
pero solo para que lo sepáis
esto lo necesitáis
en animation fill mode
para indicarle
que cuando
cómo se tiene que comportar
el elemento
fuera de la animación
tanto
antes de iniciarse
como
después de finalizar
y si lo que queréis
es que cuando
después de finalizar
se quede con el
keyframe final
o sea el estado final
que teníamos aquí
tenemos que indicarle
el forwards
y así nos aseguramos
que cuando termina
la animación
se queda al final
si no lo que va a pasar
es que se va a resetear
y va a volver al principio
¿ok?
así que le ponemos el both
y tal
ahora ya otra vez
estamos viendo
muchas propiedades
el animation
duration
timing
direction
fill mode
no sé qué
de hecho el animation
es animation name
que está utilizando
animation directamente
pero sería animation name
entonces todo esto
de nuevo
tenemos un atajo
no nos preocupemos
tenemos animation
que le tenemos que poner
el nombre
que sea mover
mover
la duración
dos segundos
el timing function
que en este caso
es lineal
¿no?
cómo tiene que reproducir
la animación
que a qué velocidad
a lo largo
de los keyframes
luego tendríamos
también el delay
que en este caso
pues sería
cero segundos
aunque también
es opcional
o sea
podríamos evitar
poner cero segundos
y ponerle que directamente
cuántas veces se tiene que ejecutar esto
le podríamos decir
que esto es infinito
también sería opcional
y si no
le podemos poner
la dirección
que en este caso
pues ya hemos dicho
que normal
pero también normal
es su valor por defecto
así que podríamos ponerle
el fill mode
que sería both
y ahora con esto
mira le vamos a poner
el infinite
aquí
y todo esto
que vemos aquí
todo esto
junto con el both
bueno el both
ahora no tiene mucho sentido
así que le voy a dejar
el both
para que sea como
el que teníamos antes
todo esto
estas cuatro
cinco líneas
que tenemos aquí
sería básicamente
una línea
con todo esto
de nuevo
esta sería la forma correcta
de hacerlo
porque ya cuando
ya tienes experiencia
pues ya sabes
dónde poner el nombre
y tal
pero es interesante
si estás empezando
lo pongas separado
para entender exactamente
qué estás haciendo
¿ok?
así que bueno
y esto ahora
¿por qué no funciona?
bueno no funciona
porque solo tenemos una vez
si queremos que se
se haga más veces
le ponemos un infinite
y ya está
ya lo hace infinitas veces
de nuevo
también
interesante
tendríamos el steps
igual que teníamos el lineal
también aquí le podríamos poner
cuántos pasos
tiene que hacer
imaginad que queremos
que la animación
la haga en cinco pasos
pues fíjate lo que hace
pim pim pim
vale en cinco pasos
y esto
seguramente
si te suena
es con esto
podrías hacer un juego
de Game & Watch
el Game & Watch
a ver si os voy a poner
un vídeo de YouTube
para que veáis
con el Game & Watch
es justamente
este efecto
en el que
en el que está haciendo
a ver si lo encuentro
a ver
joder pero es que esto
esto son
eso son mentiras
esto
¿veis?
que tiene estas animaciones
un poquito
ta ta ta
pues eso sería un poquito así
ese tipo de animación
la podríais hacer así
pip pip pip
con los pasos
y lo podrías hacer con el steps
y cuanto más le pongáis
pues más fluido sería
aquí está dando pasitos
muy pequeñitos
pero bastante animados
también tenéis que tener en cuenta
que podéis poner
más de una animación
aquí hemos puesto
una animación
de mover al Mario
vamos a quitarle el infinite
para que solo lo haga una vez
¿vale?
y lo que vamos a querer es
oye
primero vamos a querer
que se mueva
pero después
vamos a querer
agrandarlo
y para
vamos a hacer que esto sea lineal
y que tenga un delay
para que ocurra
después de moverlo
vamos a decir
que tenga un delay
de dos segundos
y vamos a hacer
que también tenga voz
para que
tanto el principio
como el final
se quede con los keyframes
del principio
y del final respectivamente
y podríamos añadir
un keyframes
para hacer nuestro Mario
pues hacerlo un poco más grande
podemos decirle
que al principio
esto es interesante
porque podemos decir
mira al principio
la escala es uno
al 25%
la escala
vamos a decir
que es dos
o uno punto dos
o uno punto cuatro
¿vale?
le podríamos decir aquí
que la escala
a ver
que he puesto
que se me está quejando aquí
que he liado
que he liado
punto y coma aquí
y aquí
esto no necesita punto y coma
¿por qué se me pone esto en rock?
¡ah!
el nombre
joder
el nombre
se me había olvidado
el nombre
vale
luego ponemos 50%
la escala
le vamos a poner dos
el 75%
volvemos con una escala
a 1.6
y al 100%
vamos a poner una escala
de dos
y entonces
si ahora
este agrandar
le hacemos un refresh
vamos a ver
que primero anda
y cuando termina
se hace grande
es un poco raro
como se hace grande
porque es una imagen
un poco extraña
pero bueno
solo para que
entendamos un poco
como hace esto
pero lo hace después
y podéis ir concatenando
todas las imágenes
o sea
lo podéis hacer
o sea
todas las animaciones
podéis hacer aquí
tantas animaciones
como queráis
las podéis ir separando
por coma
y decir
primero haces el mover
luego el agrandar
aquí con el delay
de dos segundos
para que no se solapen
porque si aquí
no le ponéis un delay
vais a ver
que lo que ocurre
es que lo va a hacer
mientras está andando
¿vale?
y aquí lo que queremos
es que lo haga
después de andar
pues le tenemos que poner
un delay
que sea exactamente
lo mismo
que la animación
del principio
¿vale?
y por eso
pues está pasando
esto de aquí
así que ahora
ya sabéis
cómo hacer
dos animaciones
bueno sí
lo bajo un poco
lo bajo un poco
la gente se me está
poniendo nerviosa
por body padding
top
100px
y así lo bajamos
un poquito
y queda ahí
¿vale?
¿cuánto pesa
hacer una animación?
pues nada
eso que estáis viendo
o sea
son bytes
entonces
son bytes
no tienen
un impacto
muy malo
de rendimiento
porque esto
se anima
con GPU
y funciona
mucho mejor
que si esto
lo hacéis
con JavaScript
o sea
que os recomiendo
un montón
que lo hagáis
con CSS
justamente
porque está animado
y el impacto
que tiene
es bastante pequeñito
sigo pensando
que le faltan
saltitos a Mario
bueno a ver
no voy a hacer el juego
y tal
pero bueno
Steps se va acercando
como a FPS
claro
a ver
FPS serían
frames por segundo
mira Steps
podrían ser
¿cuántos frames por segundo?
si tú le pones aquí
un segundo
y aquí pones
10 pasos
significa
que esto sería
que vas a dibujar
10 frames por segundo
10 frames de la animación
por segundo
pues son un segundo
10 pasos
si quieres que fuesen
60 frames por segundo
sería
duración
un segundo
y tendrías
60 pasos
o sea que sí
claro que sí
eso sería exactamente
lo mismo
para que sigas
manteniendo
60 frames por segundo
tendrías que hacer
que si son 2 segundos
los Steps
fueran 120
o sea que sí
efectivamente
si en la animación
metes una etapa final
repetida de la inicial
es lo mismo
que ponerle
Fill Mode
Both
no es lo mismo
porque el Both
lo que hace
es
cómo se comporta
antes de la animación
y cómo se comporta
después de la animación
no es exactamente
lo mismo
a lo que comentas
lo que comentas
sería que
inicia
y termina
igual
pero cuando tú
haces el Both
lo que va a ocurrir
es que la animación
final
es la que se va a mantener
que puede o no ser
igual al principio
¿cómo podrías posicionarlo
en un lugar específico?
eso
con Position Absolute
lo puedes poner
donde te la gana
entiendo que para que vuelva
al punto de inicio
lo suyo sería añadir
otra animación con Delay
podríamos
lo podríamos mover al revés
o también
como hemos comentado antes
lo que podríamos hacer
por ejemplo
si solo fuese mover
podríamos poner
que sea infinito
y alternate
alternate reverse
alternate
¿vale?
y así
pues estaría moviéndose
para un lado
y para el otro
en este caso
está haciendo el ease
por defecto
así que vamos a querer
que sea lineal
y ya está
ya lo tenía moviendo
o le podemos decir
que tenga steps
se pone 15 steps
y así se mueve
para adelante
y para atrás
y esto sea con el alternate
si lo que quieres
que solo ocurra una vez
pues nada
le quitas el infinite
y cuando refresques
hará una vez la animación
luego otra vez para atrás
y ya lo tendrías
ya lo tendrías
no sé si lo ha hecho
ah porque solo lo ha hecho una vez
claro
tendríamos que hacer
que lo haga dos veces
claro
queremos que haga dos veces
la animación
porque si le decimos
que solo haga una
solo la hace una vez
pero bueno
ves
la hace dos veces
será la de ida
y la de vuelta
no entiendo la diferencia
entre forward y both
ambos acaban en el mismo sitio
¿no?
efectivamente
acaban en el mismo sitio
pero no empiezan igual
o sea
el both
lo que se está encargando
también es
que el elemento
antes de la animación
se vea igual
que al principio
¿cómo se podría poner
marios, marios
y cada uno
con una animación random
que uno suba
al otro baje?
pues a ver
es un tema de trabajárselo
es un tema de hacer
más de un mario
y que cada mario
tenga animaciones
totalmente diferentes
o sea
tú aquí
si tienes dos marios
fíjate
dos marios ¿no?
ahora
están haciendo exactamente lo mismo
mira ahí están moviéndose
pero lo que podrías hacer
es decir
bueno
el image
el nc child
el segundo mario
vamos a hacer
que la animación
sea
no me acuerdo
como era
ay la he quitado
ah no
está aquí
agrandar
¿vale?
pues vamos a poner
agrandar
que sea
un segundo
que sea
a ver
vamos a poner
que sea con steps
también
que sean 10 steps
¿vale?
y aquí lo que podríamos conseguir
ahora
si refrescamos
que cada mario
hace una cosa diferente
vamos a poner
que también
sea both
y vamos a poner
que el margen
de este
sea 100 pixels
ah bueno
claro
es que este
a ver
position
absolute
solo para que lo veamos
en otro sitio
que si no
no lo vemos
pero
ahora
mira
si ahora le damos
¿ves?
ahora están haciendo cada uno
una cosa
¿no?
o sea
ya está
lo único que tienes que hacer
es específicamente
hablar de uno u otro
y cambiar la animación
y ya está
y sin ningún problema
eres muy grande
gracias
me encantó la decisión
¿qué tomaste de dejar el curro
para dedicarte a esto?
gracias
he de decir que se nota
que te mola lo que haces
gracias también
eres toda una inspiración
para muchos
un abrazo enorme
muchas gracias
Saiko
muchas gracias amigo
gracias infinitas
¿puede una animación
hacer override de otra?
se puede hacer override
puedes cambiar la animación
sin ningún tipo de problemas
¿cómo afecta la animación
al rendimiento?
lo hemos comentado antes
de hecho es la segunda vez
que lo he comentado
esta es la tercera
y al final
el tema es que depende
de la animación
obviamente
pero las animaciones
si son normales
suelen tener muy buen rendimiento
¿por qué?
porque están
aceleradas por GPU
y vuestras tarjetas gráficas
por muy mala que sea
ya os digo yo
que animaciones CSS
las puede mover
sin problemas
¿vale?
así que no os preocupéis
por lo que podáis hacer
con el Mario
porque es que
si tenéis ejemplos
increíbles
de animaciones
animadas
con CSS
con la GPU
por ejemplo
3GS
que es una biblioteca
de Javascript
pero lo que hace
es utilizar
por debajo
la GPU
todo esto
ya me diréis
si funciona increíble
todo esto funciona increíble
pues ya os digo yo
que vuestras animaciones
vuestras animaciones
que hacéis
con CSS
no son en 3D
no tienen este tipo de cosas
así que no os tenéis
que preocupar
con estas cosas
y vuestra tarjeta gráfica
integrada
también puede
sin ningún tipo de problema
¿vale?
entonces
vamos con más cosas
porque
ahora que ya tenemos
todo esto
ahora que ya tenemos
todo esto
vamos a ver
animaciones
del scroll
que esto está
bien chulo
y es que
a ver amigos
vamos a
vamos a abrir
otro codilink
otra ventana
incógnito
modo porno
modo porno
porque la verdad
es que esto
es casi porno
ah vaya
se me ha quedado
el bueno del
mira
me voy a guardar
este URL
por si acaso
venga
modo porno
amigos
mirad
imaginemos
claro
lo malo
es que necesito
un HTML
muy largo
a ver
necesito un HTML
muy largo
le voy a pedir
a HGPT
que me escriba
un HTML
muy largo
¿vale?
dame
un código
HTML
muy largo
con títulos
y contenido
de texto
que hable
sobre
Spiderman
y su
trabajo
en la ciudad
de New York
yo que sé
lo que sea
¿ok?
si
es que
pero Lipsum
te da HTML
es que
creo que
creo que tenga HTML
creo que tenga HTML
y todo esto
da igual
si
HGPT
que trabaje
HGPT
vamos a hacer que trabaje
para algo
¿vale?
entonces
así no
mira
esto está perfecto
esto está perfecto
ya
si si
quiero HTML
porque quiero que tenga
elementos
y todo esto
y así
la vida heroica
de Spiderman
en Nueva York
los orígenes
de un héroe
Spiderman
conocido también
como Peter Parker
pero que spoiler es este
que le acabas de joder
le acabas de joder
toda la vida
a este chico
pero no ves que lleva
una máscara
pero menudo
menudo
madre mía
tío
le has cagao
tío
Spiderman
conocido también
con Peter Parker
ya está
toma por culo
todos los años
intentando Peter Parker
que nadie se diese cuenta
que era Spiderman
imagínate la tía May
doxeado a tope
imagínate
imagínate la tía May
leyendo este artículo
o sea
¿qué?
¿cómo Peter Parker?
o sea
le acabas de joder vivo
tío
ay dios
que bueno
Peter Parker
la madre que lo parió
con el spoiler máximo
muy bien
a ver
Cody Link
Cody Link nuevo
vale
esto por aquí
vamos con Peter Parker
venga Peter Parker
venga
pego todo este HTML
vale
todo este HTML
ahí a saco
y vamos a empezar
porque
ahora os voy a hablar
de cómo podéis hacer
animaciones
que funcionan
a través
del scroll
y está muy chulo
porque es algo muy nuevo
pero está bastante interesante
vamos a ver
vamos a explicarlo
a través de tres ejemplos
que son muy típicos
que normalmente
se necesita JavaScript
y vas a ver que con esto
no vas a necesitar
ningún tipo de JavaScript
vamos a añadir aquí
un progress
para poner una barra de progreso
y ahora entenderás por qué
con todo este HTML
vale
con esa barra de progreso
vamos a dejar esto así
más o menos
y a esto
esto por aquí
esto por aquí
venga
la vida heroica
de Spider-Man en Nueva York
que bueno
vamos a cambiarle el system
le ponemos este
este colorcito
perfecto
ahora
vamos a estilar
este progress
vamos a poner un progress
vamos a poner arriba
una barrita
que esté fijada
vamos a poner arriba
del todo
vamos a por ahora
vamos a hacer que tenga
todo el ancho
vamos a poner que tenga
una color rojo
como Spider-Man
como Peter Parker
le vamos a poner
una altura de 1m
vale
y vale
veis que hay un margen
eso es por culpa del body
vamos a poner margen 0
y padding 16px
bueno claro
si le pongo 16
ya lo hemos cagado
entonces vamos a poner esto
vamos a poner todo esto
a través de un main
para que no nos falle
oye
me parece muy bien
que me ha dado semántico
bastante semántico
vamos a poner aquí
un padding
para separar
así
ahora perfecto
vale
entonces tenemos aquí
una barra de progreso
por ahora roja
ahora la arreglamos
vale
le vamos a hacer una animación
porque quiero que esta barra roja
se vaya haciendo
o sea
vaya haciéndose más grande
conforme voy haciendo
scroll en el artículo
esto es una cosa que habréis visto
mil millones de veces
y que muchas veces se hace
con alguna biblioteca de javascript
que detecta o escucha el scroll
hace unos cálculos muy raros
y a partir de esos cálculos
lo que hace es decir
vale
pues ahora tengo que dibujar
este tanto por ciento
¿qué es lo que vamos a hacer?
bueno
lo que vamos a hacer es
empezar con el width
ahora veis que si le pongo 50
vale
pues sería la mitad
entonces vamos a empezar por 0
porque estamos arriba del todo
y queremos que esa barra
se vaya haciendo más pequeña
o más grande
dependiendo del scroll
de nuestra página
vamos a añadir una animación
que le vamos a llamar
progress grow
vale
y esto lo que vamos a decir
es que va a empezar
con el width a 0%
y su valor final
vamos a poner aquí
el valor final
cuando llegamos al final
del scroll
obviamente vamos a hacer
que sea del 100%
muy bien
ahora
obviamente
la animación que queremos utilizar
es la que hemos creado
progress grow
vamos a decir
que sea automático
porque cada vez no sabemos
cuántos segundos
tiene que durar esto
no lo sabemos
entonces tiene que ser automático
porque va a depender
de otro tipo
de reproducción
que no es el tiempo
o sea
la línea del tiempo
no son los segundos
es otra cosa
y es el scroll
del usuario
la línea del tiempo
en lugar de ser tiempo
va a ser
el progreso
del scroll del usuario
por lo tanto
le vamos a decir
que sea automático
y
en lugar de decirle
que la animación
va a tener algún tipo
de función
vamos a decir
que sea lineal
porque cuando el usuario
está scrolleando
es lineal
así que decimos
que es lineal
ahora bien
como le indicamos
que realmente
lo que necesitamos
es escuchar
el scroll del usuario
pues hay una propiedad
que es nueva
que no lo tienen
todos navegadores
por ahora
y se llama
animation timeline
y animation timeline
lo que justamente
te va a indicar
es que
si por defecto
como línea del tiempo
se utiliza el tiempo
lo que te va a permitir
animation timeline
es utilizar cosas diferentes
para hacer esa
esa evolución
de la animación
y en lugar de utilizar
el tiempo
vas a poder utilizar
por ejemplo
el scroll
o por ejemplo
cuánto se ve
de un elemento
en el viewport
que también lo vamos a ver
en un ejemplo
muy chulo
entonces animation timeline
fijaos que ya tiene
un 64% de soporte
que tampoco está mal
y
nos quedaría
safari
que por lo que
tengo en cuenta
por lo que está leyendo
ahí en
isus y tal
parece eso están pensando
pero firefox
que también le falta
ya lo tienen
experimental
y en las siguientes versiones
lo van a activar
fijaos que
ves que está aquí
como con un flag
y aquí con numeritos
pues ya lo podéis activar
no está soportado
por defecto
pero lo podéis activar
en modo experimental
o sea
que va a llegar pronto
aún así
que sepáis
que de animation timeline
si por lo que sea
lo que queréis utilizar
hay bibliotecas
que te da
la posibilidad
de añadirlo
con javascript
que mientras
por ejemplo
un navegador
que por lo que sea
todavía no lo soporta
pues que puedas utilizarlo
ves aquí lo podrías utilizar
gracias a utilizar
un polyfill
un polyfill
es una biblioteca
que simula
una funcionalidad
que ese navegador
todavía no tiene
y esto es una cosa
muy típica
en el mundo
de desarrollo web
pero si por lo que sea
lo que se utiliza
en tus desarrollos
que sepas
que tienes una forma
de asegurarte
que lo vas a poder hacer
y funcionar
en todos los navegadores
independientemente
de el soporte
que tenga
obviamente
funcionará peor
vale
es normal
funcionará peor
si tienes que cargar
el polyfill
porque no lo va a hacer
100% nativo
pero va a soportar
el tiempo
¿por qué?
porque el día de mañana
podrás quitar el polyfill
y ya está
y no tendrás ningún tipo
de problema
¿ok?
entonces
dicho esto
ya tendríamos esto
pero le tenemos que decir
qué línea del tiempo
la que tiene que utilizar
o sea
animation
timeline
¿vale?
a partir de qué
tenemos que decir
si progresa o no progresa
la animación
pues lo vamos a hacer
a través del scroll
del scroll del usuario
pero le tenemos que indicar
dos cosas
una
de qué elemento
qué elemento es el que queremos
ver el scroll
porque ojo
no solo podemos escuchar
el scroll
de toda la ventana
sino que podríamos
escuchar el scroll
por ejemplo
de un elemento
contenedor
¿vale?
un elemento más pequeño
y con esto se pueden hacer
mil millones de maravillas
pero por defecto
el más interesante
sería la raíz
¿no?
el
este
el de la raíz
y luego
opcional
en este caso
le tenemos que indicar
qué scroll
es el que queremos escuchar
si el vertical
o el horizontal
o sea
el que va de bloque
que en nuestro caso
sería vertical
o en línea
que sería
el formato texto
sería horizontal
así que debería ser
block
pero el block
si no me equivoco
es el valor por defecto
entonces ya no tenemos que utilizar
pero si te quieres asegurar
pones block
y ya está
entonces fíjate que ahora
conforme voy
haciendo scroll
¿vale?
fíjate
que ya tenemos
la animación
claro
se está animando la barra
y está recuperando
automáticamente
cuánto ancho
tiene que dibujar
porque lo que le estamos diciendo
es que el animation timeline
o sea la línea del tiempo
de nuestra animación
es que
si el scroll es cero
vamos a estar en este punto
en el from
en el punto
cero por ciento
¿vale?
pero cuando terminamos
de scrollearlo todo
vamos a estar al final
que por lo tanto
va a estar en el cien por cien
y entre el cero por ciento
y el cien por cien
automáticamente
como ya hemos visto
como funcionan las transiciones
y las animaciones
el navegador
va a saber
cuál es
el
o sea la parte
o sea tienes que calcular
en qué partes ha quedado
no lo tienes que poner tú
constantemente
entonces conforme vas scrolleando
va detectando
para acercarse al cien por cien
cómo tendría que animarse
y ahí lo tendríamos
y tendríamos
solo con css
con cero líneas
de javascript
estaríamos teniendo
una animación del scroll
que está
súper chula
o sea estamos aquí scrolleando
y ya estamos animando
con css
y nos ha costado
¿cuánto?
cuatro líneas de css
oh yeah
cuatro líneas de css
ahora bien
esto está muy chulo
pero hay más
hay más
porque obviamente
entiendo que esto
os puede gustar
pero
le falta un poco
esto es un ejemplo
muy sencillo
pero que os da
para la vida
de hecho vamos a ver
un ejemplo
que es mucho más
diría yo
como más real
con vuestros porfolios
que tenéis un montón
de porfolios
que estoy seguro
que este tipo de cosas
seguro
que os van a llamar la atención
mira
voy a cambiar
voy a ir a otro sitio
me voy a ir a una ventana incógnito
codi.link
vale
me voy a copiar un html
que tengo
con un montón de imágenes
vale
una chica por aquí
un montón de gente
otra chica
otra chica
la chica me sale
porque los he pillado
de unsplash
en modo random
solo hay una imagen
que he pillado
que es esta
con mi amigo
ay no lo veis
no veis
bueno luego lo veis
el tema
tenemos todo
todo este html
vale
que son unas imágenes
en una section
y tenemos un título arriba
vamos a utilizar
lo que hemos aprendido
para darle un poco
de estilo a esto
voy a ir con los estilos
a fuego
vale
vamos a ir aquí
el body
vamos a poner
el fondo de color negro
vamos a quitarle el margen
el font family
vamos a utilizar
el system UI
vale
por aquí bien
el section
tengo un section
que es el que envuelve
las imágenes
vale
fíjate que tengo aquí
un section
perfecto
pues en section
vamos a decir
que utilicemos
dos columnas
vamos a ponerle
un padding
de 16 píxeles
por arriba
y por los lados
de 32 píxeles
y vamos a dejarle
una separación
entre columnas
que sea de 32 píxeles
y ahora
por las imágenes
vamos a hacer que las imágenes
cada una de las imágenes
a ver
que esto lo correcto
sería section image
pero bueno
más o menos
ya entendéis
no es importante
ahora como estiramos esto
esto es para el ejemplo
vamos a ponerle un poco
de border radius
para que quede bien
fachero
vale
ajustamos aquí el auto
vamos a poner un margin button
para separación vertical
y ya tendríamos algo así
donde tenemos las imágenes
esto no sé si lo sabíais
pero podéis poner columns 2
y esto os hace dos columnas
lo que pasa
es que tenéis que tener en cuenta
que este tipo de columnas
el como se está haciendo
de izquierda
no funciona de izquierda a derecha
o sea
esta por ejemplo
sería la primera imagen
y esta que ves a la derecha
no es la segunda imagen
la segunda imagen
la tienes aquí
pero igualmente
hay veces que este columns
puede tener sentido
siempre y cuando
no te importe tanto
el orden en el que se ven las cosas
porque claro
si tú esperas
que la segunda imagen
se vea a la derecha
que tengas en cuenta
que no es así
vale
la segunda imagen
la tienes justo aquí
lo cual es un poco raro
pero bueno
al menos lo tenéis
lo podéis hacer en dos columnas
y se ve bastante bien
¿qué más?
bueno
tenemos el h1
¿vale?
tenemos el h1
que hemos dejado arriba
con esto de curso de css
animaciones
vamos a poner aquí
color white
para que lo veamos
color white
text align center
¿vale?
vamos a poner un font size
bueno
vamos a dejar el font size
que tiene
padding de 16 píxeles
para que tenga un poquito
más de separación
y margen
le ponemos cero
el margen que tiene
por defecto el h1
vamos a decirle
que ocupe el 100%
¿vale?
para que se nos centre bien
que no sé si hay alguna cosa
ahí que tiene algún
porque creo que no
no sé si está bien centrado
a lo mejor sí
no lo sé
alguna cosa a lo mejor
ahí que no está
de todo bien centrado
pero no es importante
eso no es lo importante
lo importante es
vamos a poner
que tenga un position sticky
que ya sabéis
que esto lo aprendimos
el otro día
y así
se nos va a quedar
el título
siempre arriba
¿vale?
se ha quedado
sería muy parecido
a un fix
en este caso
¿vale?
o sea que podéis poner un fix
pero claro
el problema del fix
es que no ocupa espacio
y al principio
daría este salto
en cambio el sticky
al principio
sí que ocuparía espacio
por eso quedaría bien
y luego se quedaría pegado
o sea que importante
ahí la diferencia
vale
entonces ya teníamos
todo esto
con el color
también
no sé si el top
no sé si debería
podemos poner el h1
que el left sea cero
bueno
veo que se ve igual
así que no hay ningún problema
hasta aquí bien
pero
imaginad
y esto es una cosa
que he visto
que hacéis muchas veces
en vuestros porfolios
¿vale?
que lo que queréis
es que cuando hace scroll
el usuario
la navbar
cambie
ya sea de color
ya sea el título
ya sea lo que sea
¿no?
y entonces lo que queréis
es animar la navbar
para cambiarla
y que se integre mejor
con la página
y utilicéis un montón
de javascript
y he visto
verdaderas salvajadas
por ahí
pero bueno
vamos a poner aquí
yo que sé
enhance header
vamos a ponerle
¿vale?
la animación
es que mejoramos el header
y vamos a ponerle
directamente el destino
el destino
es que vamos a querer
un background
que sea blanco
como blanco
pero con una opacidad
vamos a decirle también
que el backdrop
va a tener como un blur
para que de esta forma
como que se difumine
lo que tiene detrás
vamos a hacer
que la fuente
sea más pequeña
para que no ocupe
tanto espacio
ves que aquí
cuando haces scroll
ves ocupa demasiado espacio
igual sería interesante
que no ocupase tanto
y le vamos a cambiar
el color también
de la fuente
porque básicamente
como vamos a poner
ese fondo blanco
pues para que realmente
tenga un cambio
y ahora
vamos a decirle
oye
quiero utilizar la animación
esta de enhance
header
quiero que tenga
una animación lineal
y quiero que sea
both
esto mira
ya me está enseñando esto
¿no?
quiero que sea both
y para que funcione así
claro
el problema es que ahora
como la duración
como la duración
claro
si le quito el both
salde así
si pongo el both
ya se queda como al final
¿por qué?
porque la duración
que tenemos por defecto
es cero
pero claro
nosotros no queremos
tener ningún tipo
de animación
de tiempo
sino que queremos
una animación
que sea por el scroll
y como hemos visto antes
vamos a utilizar el scroll
con el elemento root
y el block
¿vale?
hasta aquí
perfecto
vamos a ver ahora
cómo funciona
vale
ahora funcionar
funciona
y fíjate
que hace esto
hace esto
y se integra súper bien
pero alguien me dirá
hay un problema
y es que la animación
tarda mucho
o sea
lo que está tirando
de scroll
claro
hasta que no llegas
al final
no llega
al final
de la animación
y es un poco rollo
porque fíjate
que tienes que
bajar un montón
para que se llegue
a integrar el header
entonces
la pregunta del millón
que seguro
que alguien me ha dicho
es
oye
pero ¿qué pasa?
¿por qué no
podemos hacer una cosa
que sea más rápida?
a ver
hay diferentes formas
de hacer esto
aunque a mí
la que me gusta
especialmente
¿por qué block?
block
como he explicado antes
es porque
los bloques
van en vertical
en nuestro sentido
de escritura
y de lectura
de texto
¿no?
la en línea
para nosotros
es de izquierda a derecha
en horizontal
y los bloques
los ponemos
uno encima del otro
de arriba a abajo
entonces
nosotros lo que queremos
escuchar en este caso
sería
el scroll
vertical
¿no?
o sea
cuando hacemos
vamos de arriba a abajo
por eso
le ponemos
root block
igualmente
el block
es el que es por defecto
así que si lo queréis quitar
lo podéis quitar
lo que podemos hacer
con esto
es ponerle
un rango
a la animación
le podemos decir
que el rango
de la animación
en el eje
de línea
es cero
y en el eje
del bloque
en el eje vertical
podemos decirle
que llegue
hasta los 200 píxeles
por ejemplo
entonces
lo que vamos a hacer
con esto
fíjate
es que la animación
va a ir de cero
a 200 píxeles
de scroll
y por lo tanto
va a ser mucho
más rápido
así que
en los 200 primeros píxeles
del scroll
se va a animar
y luego va a quedar
ya la animación
en el estado final
lo que estamos diciendo
es bueno
el scroll
que estamos viendo
aquí en la línea
del tiempo
lo único que quiero
es que te quedes
con los primeros
200 píxeles
que toda la animación
la hagas
en los primeros
200 píxeles
claro
cuanto menos pongáis
aquí
si ponéis 100 píxeles
vais a ver
que se anima
mucho más rápido
si ponéis
1000 píxeles
pues vas a ver
que esto
se anima
mucho más lento
así que
es bastante clave
que pongáis un número
que tenga bastante sentido
para que haga una animación
que se integre
bastante bien
en nuestra página
¿vale?
en este caso
pues fijaos
estamos haciendo
que el navbar
cambie totalmente
su estilo
que se integre
que tenga ahí
un efecto blur
súper chulo
y lo hemos hecho
pues con
menos de 10 líneas
de código CSS
y todo con GPU
todo animado
perfectamente
¿está bien usar píxeles?
¿no sería mejor
todo con tantos porcientos?
depende
pero en este caso
podría tener sentido
hacerlo con píxeles
no pasa nada
o sea
ni está bien
hacerlo todo
con tantos porcientos
ni está bien
hacerlo todo
con píxeles
todo tiene su
su sentido
¿vale?
se puede poner
infinite
es que el infinite
ya hemos visto
que es el por defecto
o sea
si le quitas el rango
bueno
es que no sé
a qué te refieres
con infinite
pero no se puede repetir
infinitas veces
el scroll es limitado
no puede
no puede hacer infinito
la animación
¿no?
para que se scrollee
y se vayan mostrando
las imágenes
que van apareciendo
poco a poco
bueno
eso lo vamos a hacer
ahora a Tecnorex
de hecho
lo he comentado
no sería bueno
un porcentaje
porque variará
dependiendo
el largo de la página
claro
es que sería un poco complicado
es como que no lo estarías
controlando tan bien
si pones un tanto porciento
¿no?
además del scroll
¿qué más puede usar
el timeline?
ahora lo vamos a ver también
pero además del scroll
podemos utilizar el view
podemos indicar
cuando un elemento
está en el viewport
detectarlo
y entonces
según si está
en el viewport
pues cambiar el estilo
de ese elemento
lo cual está bastante chulo
¿en mobile funciona igual?
funciona igual
en los navegadores
que funcionen
¿qué tal con Guillermo
San Francisco?
súper bien
míralo
qué felices
estábamos ahí
fuimos a correr
y tremendo
¿y si se utilizan
las medidas
M y REM?
pues fatal
porque no vas a saber
exactamente a qué te estás
refiriendo
a ver
muchas veces
leéis una cosa
lo convertís en un mantra
y no entendéis realmente
por qué se hacen
el tema de los M y los REM
muchas veces
tiene sentido en las fuentes
porque sabes
que son relativos a algo
entonces hay veces
que la gente se vuelve loca
y pone márgenes
con M, con REM
y tal
o con tantos porcientos
y a ver
todo tiene su sentido
en una cosa en concreto
y no de utilizar
siempre M o REM
o sea que cuidado
con estas cosas
¿vale?
que a veces se lea
no utilices pixels
utiliza REM
y entonces todo el mundo
se pone margin
margin
dos REM
y luego también
o un 1%
o sea sí
es una cosa
loca
tenga cuidado
o sea entender por qué
por qué se utiliza
ese tipo de cosas
¿vale?
entonces
esto lo habéis entendido
hemos hecho un navbar ahí
buenísimo
¿vale?
hemos hecho un navbar
maravilloso
¿ok?
vale
¿se podría volver
al estado cero de animación
sin volver al top?
¿con solo hacer scroll up
un poco?
no porque tiene que ser
como que ir hacia el otro
o sea no tendría sentido
sería muy rara
la experiencia del usuario
sería muy rara
sería muy raro que
cuando bajas el scroll
sea de una forma
pero cuando subes
sea de otra
sea un poco rara
la verdad
¿esto es lo que hace
la librería de animaciones
por detrás?
no
la librería de animaciones
a día de hoy
lo que lo hacen
es realmente
con un poquito de javascript
entonces
vamos con más cositas
¿vale?
vamos con más cositas
porque imagínate
claro tienes una galería
de imágenes
y dices
ostras una galería de imágenes
a mí sabe lo que me gustaría
conseguir que conforme hago scroll
vayan apareciendo
las imágenes
con un fade in
y eso sería
no me digáis
que eso no sería increíble
para lamerlo
estaría eso
para lamerlo
imaginad
poder ir haciendo scroll
y que van apareciendo
con una animación
en las imágenes
y todo con css
¿os imagináis que eso fuese capaz?
pues dejad de imaginar
que lo vamos a hacer
venga
vamos a ver
vamos a poner
vamos a hacer unos keyframes
por aquí
keyframes
¿vale?
vamos a hacer unos keyframes
y vamos a poner por ahora
keyframes
vamos a poner reveal
y vamos a hacer que empieza
con una opacidad de 0
porque al principio
no queremos que se vea la imagen
y vamos a poner
una opacidad final
de 1
¿vale?
porque lo que queremos
es que haga un fading
que al principio
no se vea
y que luego aparezca
¿vale?
eso va a ser nuestra animación
sencilla
pero bueno
mágica
igualmente
lo que podemos hacer aquí
es animación
vamos a decir reveal
le vamos a decir
que tiene que ser lineal
y también
que tiene que funcionar
hacia los dos lados
o sea
cuando termina la animación
se tiene que quedar
con su estado final
porque es que si no
no
¿veis que ahora todo tiene sentido
todo lo que hemos visto en la clase?
es que vamos desde cero
pero joder
es que todo tiene sentido
que luego
no es que esto
claro
yo quiero saber
pero claro
que tienes que saber
como
para qué sirve el both
porque si no luego te pierdes
entonces
hemos visto el animation timeline
pero claro
hemos visto el scroll
pero el scroll
lo que está pasando
es que
me aparecerían
todas las imágenes
de golpe
¿no?
me aparecerían
todas las imágenes
de golpe
cuando haces scroll
aparecen
todas las imágenes
de golpe
no tiene sentido
esta no es la forma
en la que queremos
que funcione
porque lo que me gustaría
es que fuese
para cada uno
de los elementos
bueno
pues la maravilla
de CSS
es que tenemos
otro método
que está maravilloso
que se llama
view
que lo que nos permite
¿vale?
view
lo que nos permite
es que solo sea
cuando está visible
ese elemento
ahora tenemos
otro problema
pero al menos
lo que podemos ver
es que ocurre
para cada uno
de los elementos
¿vale?
tenemos dos problemas
uno
que como hemos jugado
con el opacity
el opacity
si viste mi clase
del curso de CSS
crea un stack
stacking context
¿vale?
y por lo tanto
el z index
se vuelve un poco loco
por lo tanto
queremos asegurarnos
que el h1
tenga un z index
mayor
que el otro
¿vale?
le puedes poner uno
y ya funciona
y ahora
ya eso
lo tendríamos
más solucionado
ahora sí que funcionaría
perfectamente
hasta aquí bien
pero tenemos otro problema
y es que fíjate
que esta imagen
tiene más la opacidad
porque lo que le hemos dicho
con el timeline view
es cuando el elemento
esté en la vista
completamente
¿vale?
cuando ya esté en la vista
completamente
cuando haya pasado
el 100%
vamos a ponerle
la opacidad al 100%
claro, fíjate en esta imagen
conforme voy acercándome
es que entonces
cuando se acerca
arriba del todo
es que se ve
la opacidad perfecta
pero claro
cuando está aquí abajo
se ve muy raro
tenemos que arreglar
el rango
para que realmente
lo haga antes
¿no?
para que quede mejor
la imagen que tenemos
ya aquí
se debería ver bien
entonces
tenemos que trabajar
otra vez
con animation range
le tenemos que indicar
en qué rango
tiene que trabajar
y le vamos a decir
oye
cuando haya entrado
un 20% ya
de la imagen
¿vale?
cuando empiece a entrar
ya un 20%
de la imagen
va a ser el inicio
y el final
el final
de nuestra animación
va a ser cuando ya
estemos cubriendo
en el viewport
un 30%
de ese elemento
entonces lo que vamos a
lo que va a pasar aquí
es
fíjate
empieza ya
la animación
cuando está en un 20%
fíjate
cuando empieza
¿ves aquí que no se ve nada?
aquí no se ve nada
pero cuando ya hay un 20%
en el viewport
de ese elemento
¿vale?
ya hay un 20%
empieza la animación
y cuando ya hay
un 30%
de ese elemento
ya estaría al 100%
cuando ya ha cubierto
un 30%
de ese elemento
ya está al 100%
y ahora tiene
bastante más sentido
ahora ya sé que estamos
haciendo un fade in
y además podemos ver
cómo se van mostrando
cada una de las imágenes
vamos viendo
cómo cada una
conforme se va acercando
van apareciendo
y ya está
aquí podemos jugar
para ir viendo
cuál es el que tendría
más sentido
si queréis que sea
un poco más dramático
¿vale?
¿ves?
ahora sería un poquito
más dramático
tendría más tiempo
para hacer la animación
se tendría que acercar
todavía un poquito más
pero lo podemos ir trabajando
y esto incluso
claro
yo estoy haciendo un fade in
pero aquí
el límite
es vuestra imaginación
así que aquí
por ejemplo
podríamos poner
un translate
de 0
a 100 píxeles
que empiece así
que la opacidad
podría empezar
podría terminar antes
podríamos cambiarlo
y aquí un translate
para hacer un fade in
con un slide in
¿vale?
lo que vamos a hacer
en el eje Y
vamos a moverlo
y así lo que hacemos
fíjate
que vamos scrolleando
y se va moviendo
de abajo
para arriba
y se van colocando
y esto
lo podéis llevar
a lo que os dé
la gana
lo podéis llevar
donde os dé la gana
por ejemplo
vamos a hacer que aquí
al principio
tenga un scale
que sea muy pequeño
pero que cuando llegamos
aquí al final
pues se escale
a su tamaño
correcto
y aquí veo
que me ha ignorado
perfectamente
¿por qué me ha ignorado
el scale?
a ver
si lo hacemos grande
porque veo que no me ha
no me ha pillado el scale
¿no?
a ver
.1
.2
ay coño
porque lo he puesto
donde no es
porque lo he puesto
donde no es
aquí este
este no es
este no es
es que es aquí
claro
lo he puesto en el otro
en el header
scale .5
¿vale?
entonces fijaos
que ahora además
pues también vais
haciendo un zooming
o sea
el futuro está aquí
¿ok?
el futuro está aquí
fijaos
claro
hay que tener cuidado
con esto
porque fijaos
que aquí
como no
esto no llega
a cumplir
con que se cubra
totalmente
el elemento
el problema
es que no termina
de hacer el scroll
y por eso
no lo vemos del todo
¿vale?
entonces
pero normalmente
ahí tendríamos un footer
podríamos ponerle un padding final
a todo el body
y lo veríamos correctamente
pero fijaos
en un momento
la de cosas
que hemos hecho aquí
para animar
una galería
en la que
y además
vais arriba y abajo
o sea
podéis hacer que
funcione hacia los dos sitios
¿vale?
podéis hacer que vaya
funcionando a los dos sitios
y fíjate
vas poniendo
vas poniendo
y una
mirad
mirad este rendimiento
maravilloso
60 frames
para chuparlo
esto está
para lamerlo
está
¿es como hacer un scroll reveal
solo con CSS?
hombre
sí
sí
totalmente
total
fijaos
que pocas líneas
de código
hemos hecho esto
o sea
que pocas líneas
de código
hemos hecho aquí
que no hemos necesitado
hacer absolutamente
nada
o sea
en un momento
hemos hecho que esto
funcione
sin necesidad de
javascript
ni nada
o sea
solo con CSS
en unas pocas líneas
de código
lo tenéis aquí
y ya lo tenéis
para que nos fijemos
son tres líneas
y los estilos
estos son
yo que sé
pues 10 líneas más
15 líneas
de forma totalmente
declarativa
con una animación
y un
con un rendimiento
buenísimo
buenísimo
y sin tener que instalar
ningún tipo de biblioteca
entendiendo a cada paso
lo que estamos haciendo
así que
ahí lo tenéis
si os ha gustado
lo que hacemos
compartid este contenido
suscríbete
ayúdame a seguir
creando contenido
como este
que esto
no hay curso
en todo internet
que haya visto esto
yo esto
me he chupado
solo para que sepáis
oye pero donde aprendes
todas estas cosas
bueno para que sepáis
esto por si os interesa
a ver si lo encuentro
scroll
build
timeline
esto yo me he estado leyendo
la información esta
de
ah no
encontraré
scroll
demos
timeline
a ver si lo encuentro
ah no
encontraré
la página
pero bueno
alguien seguro
que me la pasa por ahí
el tema
que esto es porque
me he estado chupando
toda la documentación
que hay
en las páginas
y blogs
y los vídeos
y todo esto
de la gente
de google
que obviamente
esto lo tienen
bastante
bastante bien
bastante bien
documentado
por suerte
y si lo encuentro
porque aquí
hay una página
para que os
recomiendo
de hecho
la página de angular
veis esto que hay por aquí
esto se podría hacer
perfectamente
con todo lo que os he enseñado
todo esto que veis aquí
lo podríamos llegar a hacer
o sea que
para que os hagáis una idea
entonces
en la página esta de google
que sepáis que tenéis
un montón de demos
muy chulas
en las que tenéis ejemplos
tremendos
vale
tenéis el ejemplo típico
del progress indicator
ellos lo hacen de una forma
diferente
porque alguien me dirá
te lo has copiado
pues no me lo he copiado
listo
no me lo he copiado
porque ellos lo hacen
de una forma diferente
ellos utilizan
scroll timeline
y lo guardan
una custom property
que es una forma
diferente
el scroll timeline
no lo he explicado
a mi me parece una forma
un poco más complicada
y que se entiende
un poco peor
y yo lo he intentado
lo he preferido
explicarlo de una forma
diferente
luego también
por ejemplo
pues para hacer
scroll de columnas
y que unas vayan
a rever que otras
esto lo podéis hacer
con todo lo que
hemos aprendido
el hecho de dejar
fija una car
con toda la altura
y que cuando bajéis
veis esto es algo
parecido a lo que hemos hecho
aunque ellos también
lo hacen de una forma
un poco diferente
hay un montón
y hay cosas increíbles
este ejemplo
de stacking cars
esto también está hecho
con lo que hemos visto
y es brutal
al final
lo que os recomiendo
es que miréis
la documentación
también la tenéis en MDN
y que ahí podéis aprender
practicar
probar
y todo esto
pues lo haré