Js 009-1
Js 009-1
Js 009-1
Aprendices en esta ocasión aprenderán a realizar una animación sobre el cursor utilizando las
propiedades de mousemove, vamos al código, nuestro HTML sin novedades:
Vamos al CSS:
@hdtoledo
Hablemos un poco de nuestro CSS detalladamente:
1. @import
url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;8
00;900&display=swap"); Esta línea importa la fuente de Google Fonts llamada "Poppins" con
diferentes pesos (100 a 900) y la hace disponible para su uso en el resto del código.
2. * { ... } Este bloque de código establece que se apliquen las siguientes propiedades a todos los
elementos de la página:
3. body { ... } Este bloque de código define las propiedades para el elemento body, que es el
cuerpo principal de la página:
@hdtoledo
• justify-content: center; alinea los elementos secundarios horizontalmente en el centro.
• min-height: 100vh; establece la altura mínima del cuerpo en el 100% de la altura visible
del viewport.
4. h1 { ... } Este bloque de código define las propiedades para los elementos h1 (encabezados de
nivel 1) en la página:
5. .cursor { ... } Este bloque de código define las propiedades para una clase llamada "cursor", que
se utiliza para crear un efecto de cursor personalizado en la página:
• border-radius: 50%; establece el radio de borde para crear una forma circular.
• box-shadow: 0 0 20px skyblue, 0 0 60px skyblue, 0 0 100px skyblue; crea una sombra
alrededor del cursor con diferentes niveles de desenfoque.
• z-index: 999; establece el orden de apilamiento del cursor para que esté en la parte
superior de otros elementos.
• position: fixed; establece la posición del cursor como fija en relación con la ventana del
navegador.
• animation: colors 3s infinite; aplica una animación llamada "colors" durante 3 segundos
en bucle infinito.
@hdtoledo
6. @keyframes colors { ... } Este bloque de código define una animación llamada "colors" que se
utiliza en el cursor:
• 100% { ... } establece los estilos al final de la animación (100% del progreso).
7. .cursor::before { ... } Este bloque de código define las propiedades para un pseudo-elemento
::before del cursor:
• border-radius: 50%; establece el radio de borde para crear una forma circular.
@hdtoledo
Este código JavaScript controla el comportamiento del cursor animado definido en el código CSS
anterior. A continuación, te explico cada parte del código:
2. var timeout; Esta línea declara una variable timeout sin asignarle ningún valor inicial.
• let x = e.pageX; obtiene la posición horizontal del puntero del ratón en relación con la
página.
• let y = e.pageY; obtiene la posición vertical del puntero del ratón en relación con la
página.
@hdtoledo