Cerrar video

Cómo agregar un cursor animado personalizado (magic mouse) en tu sitio web creado con divi

por | Jul 6, 2022 | Tutorial gratuito | 7 Comentarios

En este tutorial te mostraré como cambiar el cursor por defecto de tu sitio web a un cursor animado personalizado más conocido como «Magic Mouse». Este cursor personalizado le dará un «toque» especial a la navegación de tu página web.

Esta personalización la vamos a lograr con un librería javascript muy liviana llamada MagicMouse.js. La integración con divi es demasiado fácil y la podemos lograr en menos de dos minutos.

Cómo agregar un cursor animado personalizado (magic mouse) en tu sitio web creado con divi

En este video tutorial nos apoyaremos de la documentación oficial para integrar la página, solo vamos a entrar a este link de git hub y vamos a seguir los pasos. Te invito a seguirme en el video…

Por cierto, una vez realicemos la integración también debemos agregar este fragmento de código CSS para personalizar el cursor:

body #magicMouseCursor {
  z-index:10000000!important;
  position: fixed;
  width: 35px;
  height: 35px;
  border: 1px solid #fff;
  background: rgba(0,0,0,0.2);
  border-radius: 50%;
  left: 0;
  top: 0;
  transition: transform 0.07s, width 0.3s, height 0.3s;
  pointer-events: none; }
  body #magicMouseCursor.cursor-square {
  border-radius: 0; }

body #magicPointer {
  z-index:10000000!important;
  height: 5px;
  width: 5px;
  top: 0;
  left: 0;
  position: fixed;
  background-color: red;
  border-radius: 50%;
  pointer-events: none;
  transition: background 0.2s, width 0.2s, height 0.2s, box-shadow 0.2s; }
  body #magicPointer.is-hover {
  background-color: #fff; }
  body #magicPointer.pointer-blur {
  height: 50px;
  width: 50px;
  background: none;
  border: 1px solid #fff;
  box-shadow: 0px 0px 15px -5px white; }
  body #magicPointer.pointer-overlay {
  height: 50px;
  width: 50px;
  mix-blend-mode: difference;
  box-shadow: 0px 0px 15px -5px white; }

body .magic-hover {
  transition: all 0.2s; }
  body .magic-hover:hover {
  cursor: none!important; }

Tutoriales Relacionados

7 Comentarios

  1. jhon peñata

    Hola ovi como estas, este tutorial lo realice en mi web pero hago los cambias de color y de efecto no se que pasa que no e deja, la web es https://lsv-tech.com/ saludos

    Responder
    • Oscar Viedma

      Hola Jhon, ¿Te sale algún mensaje o algo? ¿Tienes un plugin cache?

      Responder
      • JHON peñata

        No, solo no parece dejarme hacer cambios en el color y cuando está sobre algún botón en sale la manito normal del cursor

        Responder
        • Oscar Viedma

          Qué raro, dirígete a Divi / Opciones del tema / Constructor / Avanzado y deshabilita la opción Generación de Archivo CSS Estático…

          A ver si esto ayuda.

          Responder
          • Kevin D. Salazar

            Hola Oscar. Tengo el mismo inconveniente y después de desactivar la Generación de CSS estático, el inconveniente persiste. Claro, también purgué caché y no es el caché.
            Por fa, si sabes de algo sobre porqué no es posible aplicar los estilos CSS, me avisas. Muchas gracias Oscar.

          • Oscar Viedma

            Hola Kevin, a ver intenta usando esta configuración en divi performance.

            Si el problema persiste me compartes la url de tu ejercicio para darle un vistazo.

          • Kevin D. Salazar

            Nada Oscar. Apliqué los cambios con la configuración de divi performance que recomiendas pero no se aplica el CSS, sino queda como originalmente aparece en GitHub.
            Cabe mencionar que no lo estoy aplicando solo a una página, sino de manera global a todo el sitio.
            Pero no te preocupes, después de pensarlo bien, creo que no es realmente necesario esta integración al sitio, al menos por ahora.
            Muchas gracias por tu paciencia.

Trackbacks/Pingbacks

  1. Cómo personalizar el cursor del mouse en tus sitios web creados con divi sin plugins - OV DIVI - […] ya hemos realizado un ejercicio gratuito dónde te mostré como agregar un cursor animado personalizado en divi, la diferencia…

Enviar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Tutoriales Exclusivos

Tutoriales exclusivos OV Divi

Lleva tus sitios web creados con divi al siguiente nivel.

Accede a tutoriales exclusivos y únicos de divi y saca el máximo provecho del mejor tema y constructor visual para WordPress.

$8 USD / mes

Pin It on Pinterest