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.
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; }
0 comentarios