Scribd Logo
Cargar

¡Te damos la bienvenida a Scribd!

  • 11 vistas

    Js 009-1

    Cargado por

    jhon alexander vargasi
    Este documento explica cómo crear una animación de cursor utilizando JavaScript y CSS. Define una clase de cursor con una animación de color y posiciona el cursor siguiendo el movimiento del mouse. Cuando el mouse se mueve, el cursor se muestra y sigue su posición, ocultándose después de 2 segundos sin movimiento o al salir del área de la página.

    Copyright:

    © All Rights Reserved
    Descargue como PDF, TXT o lea en línea desde Scribd

    Js 009-1

    Cargado por

    jhon alexander vargasi
    11 vistas5 páginas
    Este documento explica cómo crear una animación de cursor utilizando JavaScript y CSS. Define una clase de cursor con una animación de color y posiciona el cursor siguiendo el movimiento del mouse. Cuando el mouse se mueve, el cursor se muestra y sigue su posición, ocultándose después de 2 segundos sin movimiento o al salir del área de la página.

    Descripción original:

    Título original

    js_009-1

    Derechos de autor

    © © All Rights Reserved

    Formatos disponibles

    PDF, TXT o lea en línea desde Scribd

    ¿Le pareció útil este documento?

    ¿Este contenido es inapropiado?

    Este documento explica cómo crear una animación de cursor utilizando JavaScript y CSS. Define una clase de cursor con una animación de color y posiciona el cursor siguiendo el movimiento del mouse. Cuando el mouse se mueve, el cursor se muestra y sigue su posición, ocultándose después de 2 segundos sin movimiento o al salir del área de la página.

    Copyright:

    © All Rights Reserved
    Descargue como PDF, TXT o lea en línea desde Scribd
    Descargar como pdf o txt
    11 vistas5 páginas

    Js 009-1

    Cargado por

    jhon alexander vargasi
    Este documento explica cómo crear una animación de cursor utilizando JavaScript y CSS. Define una clase de cursor con una animación de color y posiciona el cursor siguiendo el movimiento del mouse. Cuando el mouse se mueve, el cursor se muestra y sigue su posición, ocultándose después de 2 segundos sin movimiento o al salir del área de la página.

    Copyright:

    © All Rights Reserved
    Descargue como PDF, TXT o lea en línea desde Scribd
    Descargar como pdf o txt
    de 5

    Animación de cursor

    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:

    • margin: 0; establece los márgenes en 0.

    • padding: 0; establece el relleno en 0.

    • box-sizing: border-box; establece el modelo de caja como "border-box", lo que significa


    que el tamaño total de un elemento incluye el contenido, el relleno y el borde, pero no
    el margen exterior.

    3. body { ... } Este bloque de código define las propiedades para el elemento body, que es el
    cuerpo principal de la página:

    • display: flex; hace que el cuerpo sea un contenedor flexible.

    @hdtoledo
    • justify-content: center; alinea los elementos secundarios horizontalmente en el centro.

    • align-items: center; alinea los elementos secundarios verticalmente en el centro.

    • min-height: 100vh; establece la altura mínima del cuerpo en el 100% de la altura visible
    del viewport.

    • font-family: "Poppins", sans-serif; establece la fuente de la familia "Poppins" como la


    fuente utilizada para el texto en el cuerpo.

    • cursor: none; oculta el cursor del ratón.

    • background-color: black; establece el color de fondo del cuerpo en negro.

    4. h1 { ... } Este bloque de código define las propiedades para los elementos h1 (encabezados de
    nivel 1) en la página:

    • color: white; establece el color del texto en blanco.

    • font-size: 100px; establece el tamaño de fuente en 100 píxeles.

    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:

    • width: 20px; establece el ancho del cursor en 20 píxeles.

    • height: 20px; establece la altura del cursor en 20 píxeles.

    • border-radius: 50%; establece el radio de borde para crear una forma circular.

    • background: skyblue; establece el color de fondo del cursor en celeste.

    • pointer-events: none; hace que el cursor no reaccione a eventos de puntero, lo que


    permite que los elementos debajo del cursor sean interactivos.

    • 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.

    • display: none; inicialmente oculta el cursor.

    • position: fixed; establece la posición del cursor como fija en relación con la ventana del
    navegador.

    • transform: translate(-50%, 50%); mueve el cursor hacia arriba y hacia la izquierda en un


    50% de su tamaño.

    • animation: colors 3s infinite; aplica una animación llamada "colors" durante 3 segundos
    en bucle infinito.

    • -webkit-animation: colors 3s infinite; la misma animación pero para navegadores


    basados en WebKit (como Safari y Chrome).

    @hdtoledo
    6. @keyframes colors { ... } Este bloque de código define una animación llamada "colors" que se
    utiliza en el cursor:

    • 0% { ... } establece los estilos en el inicio de la animación (0% del progreso).

    • 100% { ... } establece los estilos al final de la animación (100% del progreso).

    • filter: hue-rotate(0deg); aplica una rotación de tono de 0 grados al cursor.

    • -webkit-filter: hue-rotate(0deg); la misma rotación de tono para navegadores basados


    en WebKit.

    7. .cursor::before { ... } Este bloque de código define las propiedades para un pseudo-elemento
    ::before del cursor:

    • content: ""; define el contenido del pseudo-elemento como vacío.

    • position: absolute; establece la posición del pseudo-elemento como absoluta en


    relación con el cursor.

    • transform: translate(-30%, -30%); mueve el pseudo-elemento hacia arriba y hacia la


    izquierda en un 30% de su tamaño.

    • width: 50px; establece el ancho del pseudo-elemento en 50 píxeles.

    • height: 50px; establece la altura del pseudo-elemento en 50 píxeles.

    • background: skyblue; establece el color de fondo del pseudo-elemento en celeste.

    • border-radius: 50%; establece el radio de borde para crear una forma circular.

    • opacity: 0.2; establece la opacidad del pseudo-elemento en 0.2.

    Ahora nuestro JS:

    @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:

    1. const cursorAni = document.querySelector(".cursor"); Esta línea selecciona el elemento del


    DOM con la clase "cursor" y lo almacena en la variable cursorAni.

    2. var timeout; Esta línea declara una variable timeout sin asignarle ningún valor inicial.

    3. document.addEventListener("mousemove", movement); Este código agrega un evento de


    escucha al documento que espera el evento de movimiento del ratón. Cuando se produce dicho
    evento, se llama a la función movement.

    4. function movement(e) { ... } Esta función se ejecuta cuando se produce un evento de


    movimiento del ratón en el documento. Toma el objeto de evento e como parámetro.

    • console.log("moving"); muestra el mensaje "moving" en la consola. Puede ser útil para


    verificar si el evento de movimiento del ratón se está activando correctamente.

    • 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.

    • cursorAni.style.left = x + "px"; establece la propiedad CSS left del elemento cursorAni


    para que coincida con la posición horizontal del puntero del ratón.

    • cursorAni.style.top = y + "px"; establece la propiedad CSS top del elemento cursorAni


    para que coincida con la posición vertical del puntero del ratón.

    • cursorAni.style.display = "block"; muestra el elemento cursorAni estableciendo su


    propiedad CSS display en "block".

    • clearTimeout(timeout); cancela cualquier temporizador previo que se haya iniciado.

    • timeout = setTimeout(() => { ... }, 2000); establece un temporizador que ocultará el


    elemento cursorAni después de 2000 milisegundos (2 segundos). La función de
    devolución de llamada proporcionada se ejecutará después de que expire el tiempo
    especificado.

    5. document.addEventListener("mouseout", () => { ... }); Este código agrega un evento de escucha


    al documento que espera el evento de salida del ratón. Cuando se produce dicho evento, se
    ejecuta una función de devolución de llamada.

    • cursorAni.style.display = "none"; oculta el elemento cursorAni estableciendo su


    propiedad CSS display en "none". Esto se activa cuando el ratón sale del área de la
    página.

    En resumen, este código controla el posicionamiento y la visibilidad de un cursor animado en la página


    web en respuesta a los eventos de movimiento del ratón. El cursor se muestra cuando el ratón se mueve
    y se oculta después de un tiempo de inactividad o cuando el ratón sale del área de la página.

    @hdtoledo

    También podría gustarte