Supongo que alguna vez has visto este pedazo de efecto que tiene la página de
Vercel con sus letras, los degradados y la animación. ¿Te gustaría aprender a
hacerlo? Pues vamos a hacerlo en este vídeo paso a paso. Vamos a ir a la página
de Codilink y lo primero que vamos a hacer es crear el html necesario. Necesitamos
un h1 para el título y tres spams. Ahora, en cada uno de los spams lo que vamos a
hacer es tener la palabra esa que aparece justamente en Vercel. Tenemos la
primera que es develop, la segunda que es preview y la tercera que es ship. Ahí
tenemos las palabras. Vamos a acelerar un poquito para que vaya quedando esto un
poco mejor. Vamos a poner un fondo negro como en Vercel. En font family vamos a
utilizar el system UI, la fuente que tengamos en nuestro sistema operativo y
vamos a poner un display grid para que se centre todo el contenido en el centro.
Todavía no vemos nada porque la letra por defecto es negra, así que la vamos a
poner blanca. Vamos a hacer que la altura como mínimo del body sea de 100 del
viewport, de la altura del viewport. Ahora ya tenemos ahí las letras, pero lo que
necesitamos es que cada uno de los spams tenga un display block. De esta forma ya
va pillando un poquito más de sentido. Vamos a centrar esto. Vamos a
hacerlo esto un poquito más grande. Vamos a darle un font size de 5 rem. Lo
vamos a poner más en negrita y vamos a hacer que las letras queden un poquito
más juntas, que el espacio entre las letras sea más pequeño porque esto es
justamente lo que hacen en Vercel con las letras. Así quedan un poquito de esta
forma. Ahora sí que se empieza a aparecer bastante. Vamos a darle un poquito de
margen. Esto 0 arriba, a derecha y para abajo de 16 píxeles. Pero bueno, solo para
que yo no quede encima y pueda ver perfectamente esto. Vale, los spams. Los
spams por ahora vamos a poner... Puedo volver a poner el color este, así que lo puedo
quitar de aquí. Lo vamos a dejar más a nivel de span. Y el display block ya lo
tenemos. Vamos a poner un font size también aquí que sea de 100 píxeles, un
poquito más grande. Así podemos quitar también este que teníamos por aquí.
Bueno, vamos a dejarlo porque para el letter spacing, igual todo esto del letter
spacing, todo esto lo podemos... Podríamos dejar aquí. No pasa nada. Vamos a dejarlo
aquí. Vamos a dejarlo aquí. Vamos a mover esto. Y así dejamos la fuente y todo esto lo
dejamos en un solo sitio. Vamos a cambiar el line height por uno así que queden un poquito
más apretujadas. Y vamos a utilizar un position relative. Y ahora verás por qué.
Hasta ahora tenemos ya las letras, más o menos como serían las formas. Pero lo que
nos falta es el tema del degradado. Vamos a hacer el tema del degradado y lo vamos a
hacer con un pseudoelemento. El pseudoelemento va a ser el before. Así que tenemos que
poner aquí el before. Y lo que tenemos que hacer aquí es utilizar como el background y
decirle qué degradado vamos a querer. Así que vamos a hacer un liner gradient. Esto es un
gradiente que es lineal y podemos decir que vaya de izquierda a derecha, arriba a
abajo, según los grados. Como queremos que sea horizontal, vamos a hacer que sea de
90 grados. De hecho aquí lo puedes ver, ¿no? Como se nota que es más horizontal, como
que va de izquierda a derecha. O derecha a izquierda, según como lo quieras ver.
Vale, pues ponemos que es de 90 grados y ahora lo importante va a ser los colores. Así
que podemos decirle cuál es el color del que empieza el degradado. Vamos a poner ahora
rojo y azul. Solo para que lo veamos. Como puedes ver, todavía no ven nada. Y es que
es normal porque este before no funciona a no ser que tengas un content. Ahora vamos
a ver en el content qué le vamos a poner. Por ahora le voy a poner solo la palabra
content. Exactamente lo mismo. Aquí que no se me olvide este punto y coma. Y puedes ver
que ya queda un poco raro, pero esto lo vamos a arreglar realmente con el tema del position
absolute y todo esto. Y vas a ver un truquito que vamos a tener que hacer y que también
hacer en Vercel para que la palabra develop también la podamos utilizar justamente en
el before. Así que utilizamos aquí un position absolute, ponemos un inset 0 y de esta forma
ahora este elemento before está quedando encima del otro texto. Pero claro, el contenido
que puedes ver aquí es el contenido que ponemos acá. Entonces no está bien. Deberíamos
poner en cada una de ellas justamente la misma palabra. Por ejemplo, develop y esto que
quedase bien. ¿Cómo podemos hacer esto? Para que quede exactamente la que necesitamos.
Lo podemos hacer utilizando custom properties. Así que aquí podemos utilizar por ejemplo
content y vamos a poner que esto es develop. Y esto mismo lo vamos a hacer con cada una
de las palabras, con una custom property. Solo que va a tener la palabra correcta. Preview
preview. Y aquí vamos a tener ship. Perfecto. Ahora aquí en lugar de utilizar ese content
develop vamos a utilizar esta custom property y para ello utilizamos var y ponemos guión
guión content. Y ahora sí que tenemos develop, preview, ship. Pero bueno, puedes ver que el
degradado no tiene mucho sentido porque el degradado como que ha quedado encima. O sea, no
tiene... Esto no funciona así. Lo queremos en el texto. Esto lo vamos a arreglar fácilmente
con tres líneas de código. Lo que tenemos que hacer... Voy a hacer esto que quede un
poco más arriba para que lo veas bastante mejor. No tengas que estar fijándote justamente
ahí abajo. Vamos a utilizar el webkit background clip. Y aquí lo que vamos a decir es que
queremos clipear el fondo en el texto. ¿Vale? Entonces ahora parece que ha desaparecido,
¿no? Por arte de magia. Bueno, es porque le tenemos que decir que el color que queremos
que tenga el texto, rellenar el texto, sea transparente. De forma que deje pasar el fondo.
Así que vamos a poner aquí que sea transparente. Y ves, ahora ya sí que tenemos lo que necesitamos,
¿no? Necesitamos el que tuviese el degradado justamente que quede por encima del texto.
Esto es lo que estábamos esperando. ¿Por qué pasa esto? O sea, estamos diciéndole que el fondo
se quede con la forma del texto en esta línea. Y por la segunda línea, lo que estamos diciendo
que el texto queremos que se quede con... Que se quede la forma del texto, pero que quede transparente.
Y así el fondo, que tenga la forma del texto, es lo que va a tomar el espacio justamente.
Obviamente estos no son los colores, como te puedes imaginar. Pero claro, ¿cómo hacemos para tener aquí
exactamente los colores de cada uno de ellos, no? Bueno, pues lo que tenemos que hacer en este caso
es utilizar custom properties. Así que vamos a hacerlo también aquí. Vamos a poner el
startColor y el endColor de cada uno de ellos. Por ejemplo, el primero, el startColor, sería
007CF0. Y aquí el endColor, voy a hacer esto, voy a poner un momento por aquí para que lo veas bien.
El endColor, en este caso, es 00DFD8. Los tengo aquí apuntados porque es que si no, imposible
saberse de memoria. Ahora, aquí vamos a hacer exactamente lo mismo.
bar startColor y aquí bar endColor. Y de esta forma, fíjate que este color, este color
ya sí que es este. Bueno, ahora justamente está haciendo otro. Pero cuando aparezca el
primero, ahora, fíjate los colores. Muy bien, pues es exactamente el mismo color. Así que esto
mismo lo vamos a repetir en cada uno de ellos. StartColor, ¿vale? Y startColor en este caso
es 7928CA, el endColor. Sí, te estás preguntando, y bueno, ¿cómo te sabes los colores? Bueno,
muy fácil. He ido a la página de Vercel y los he sacado de ahí, ¿vale? No he hecho
ningún tipo de magia rara. Simplemente, con las herramientas de desarrollo, le das aquí
al botón derecho, inspeccionar, y aquí, por aquí lo tienen. ¿Ves? Aquí, startColor,
endColor. Le he dado un clic y así los he sacado. O sea, no he hecho ninguna cosa extraña.
Vale, y aquí el StartColor del último, vamos a verlo. Esto sería F9CB28 y el endColor,
en este caso, ay, me he equivocado y los he copiado mal, pero bueno, no pasa nada, pues
lo puedo reutilizar. FF4D4D y este sería este de aquí. Vale, bueno, esto va tomando bastante
forma, tiene bastante buena pinta. Ya tenemos lo que serían los colores, pero nos falta
la pedazo de animación. Y esto, esto es bastante tricky y bastante interesante, bastante chulo.
La verdad, me parece muy, muy, muy chulo. Fíjate que hay aquí como un trocito que queda
en blanco. Esto lo vamos a arreglar fácilmente. A cada uno de los spans vamos a añadirle un
padding. Yo creo que con, pongamos, 12 píxeles total no se ve. Pues así nos aseguramos que
lo rellena todo y así no hay ningún problema. Vale, ahora nos falta una cosa que creo que
es bastante chula porque es el tema de la animación. ¿Cómo hacemos que haga la animación
que teníamos justamente en Vercel? Mirando en Vercel, pues aquí puedes ver que se va animando
cada una de las letras, ¿no? Va pasando el texto en color entre uno y otro. Y como
hace un fade in, fade out, pues esto con la opacidad lo podríamos hacer. Pero lo que
es interesante de esto en realidad es cómo vamos a orquestar, ¿no? De que vaya ocurriendo
entre uno y otro. Y vas a ver que también con un truco muy sencillo lo vas a hacer muy
fácil. Mira, con keyframes lo que vamos a hacer es tener como tres pasos en los que
queremos que el texto esté con opacidad completa o incompleta. Y ahora te voy a explicar
los tres. Voy a escribir los tres pasos y te voy a explicar por qué es así, ¿vale?
6, 6, 7 y 100%, ¿vale? Esto sea opacidad 1 y aquí 33, 3, 3, 3 y 83, 3, 3, 3. Esto
será opacidad 0. ¿Por qué es esto, no? Lo que esto quiere decir es que desde que empieza
la animación del punto 0 hasta la duración que está en el 16%, como 6, 6, 6, 7, la opacidad
va a ser 1. Luego del 16 al 33 va a pasar del 1 al 0. Y entonces se va a quedar en 0 del
33 hasta el punto 83% de la duración. Se va a quedar en 0. Y del 0 va a pasar al 1 cuando
esté del 83, que tenemos, uy, perdón, aquí, del 83 hasta el 100%. Entonces así es como
va a hacer esa animación. ¿Y por qué tiene estos puntos? ¿Por qué? Porque básicamente
necesita estar un tercio del tiempo iluminado. Como son tres elementos, tienen que ir pasando
cada uno de ellos a estar iluminados. Fíjate qué es lo que hace aquí, ¿vale? Un tercio
del tiempo tiene que estar con la opacidad al 100%, pero dos tercios no debería estar
porque tiene que estar como en blanco. Y para esto vamos a hacer que vayan, vamos a retrasar
la animación. Ahora lo verás mucho más claro. Esta sería la animación. Vamos a utilizar
la animación y entonces para utilizar la animación nos vamos aquí al before y utilizamos
el animation animated. Bueno, le puedes poner lo que quieras. Le voy a poner 9 segundos
y voy a decir que la animación es infinita para que no pare de repetirse. Claro, ahora
lo que vamos a ver es que los tres están haciéndolo a la vez en el mismo sitio. Están
haciendo de repente brum, brum, brum, pero queremos que sea escalonado, ¿no? Pues aquí
es donde vamos a hacer la magia. La magia la vamos a hacer utilizando también una custom
property. Así que nos vamos aquí al HTML y vamos a añadir que el primero tenga un delay
del cero segundos, ¿vale? De hecho, este lo podríamos quitar porque va a ser el que sería
por defecto. Este va a tener un delay de 3.33 segundos. Justamente eso, ¿no? Porque es
un tercio del tiempo. O sea, va a esperar a iniciar la animación. Eso, para que entonces
estén como desincronizados, pero aposta, obviamente. Y aquí vamos a hacer un 666.
666. No quiero saber este número, pero 666. ¿Vale? Entonces, ahora que tenemos esto,
vamos a volver aquí. Voy a dejar esto aquí bien bonito para que lo puedas ver bien
grande. Y aquí hacemos el animation delay que utilice la variable de delay. Y fíjate
que ahora lo que va a pasar es que sí que de forma escalonada van a ir apareciendo uno
después del otro. Y esto es básicamente la animación que tiene en Vercell. La hemos hecho
en un momentito. Espero que hayas aprendido algo nuevo de HTML, de CSS y que puedas hacer
animaciones así de chulas. Si te ha gustado, ya sabes, suscríbete, déjame un like y sobre
todo, ¡comparte el vídeo!