Cerrar video

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

por | Jul 6, 2022 | Tutorial gratuito | 0 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

0 comentarios

Enviar un comentario

Tu dirección de correo electrónico no será publicada.

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