Hoy vamos a ver como crear un «custom cursor» o cursor personalizado con JavaScript de manera sencilla y utilizando las curvas que nos ofrece gsap para obtener una animación con una mayor fluidez de manera sencilla.
En este caso crearemos un cursor doble con una pequeña figura circular dentro de otra que la contendrá creando un « efecto de balanceo» dentro de ella.
El resultado será parecido a esto pero con mayor fluidez que en este .gif de ejemplo:
HTML
Creamos los elementos HTML que harán de cursor
<div class="mouse-follower"></div> <div class="mouse-follower-sibling"></div>
CSS
Aplicamos los estilos a los elementos, hay que tener en cuenta el eliminar mediante css los «pointer events» del elemento, de no hacerlo nuestro click siempre se hará diréctamente en el elemento cursor en vez de en el elemento sobre el que nos coloquemos:
html,
body {
cursor: none;
}
.mouse-follower,
.mouse-follower-sibling {
position: fixed;
z-index: 99;
pointer-events: none;
mix-blend-mode: difference;
}
.mouse-follower {
width: 10px;
height: 10px;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, .6);
border-radius: 50%;
border: 1px solid #f09e0a;
}
.mouse-follower-sibling {
width: 70px;
height: 70px;
border: 1px solid rgba(0, 0, 0, .6);
border-radius: 50%;
top: -30px;
left: -30px;
}
JavaScript
Por último añadimos mediante la detección de eventos de JavaScript una función que nos permita mover el elemento mediante una animación cada vez que movemos el cursor a la nueva posición de éste.
En este caso usaremos un timeline de gsap que nos permitira crear una línea de tiempo en la que nuestras animaciones se ejecutarán en un orden preestablecido.
Para poder usar gsap lo primero que debemos hacer es importarlo a nuestro proyecto. Si bien tenemos varias alternativas para hacerlo que podemos consultar en la propia documentación de gsap, para el ejemplo utilizaremos una versión en cdn para simplificar.
Simplemente añadimos los siguientes scripts a nuestro body (gsap y TimelineMax que son los que usaremos en este ejemplo) :
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.4/gsap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TimelineMax.min.js"></script>
Una vez incluidos podemos añadir nuestro código JavaScript, en el ejemplo lo incluimos en su propio closure para mantener el código aislado, no es un requerimiento obligatorio pero sí es buena práctica para mantener nuesto código ordenado y evitar posibles errores posteriores:
(() => {
const mouseFollower = document.querySelector('.mouse-follower');
const mouseFollowerSibling = document.querySelector('.mouse-follower-sibling');
if( mouseFollower && mouseFollowerSibling ) {
window.addEventListener('mousemove', ( e ) => {
const mousePosition = {x: e.x, y: e.y };
const shapeTl = gsap.timeline();
shapeTl.to(mouseFollower, mousePosition, 0);
shapeTl.to(mouseFollowerSibling, 1,{x: e.x, y: e.y, ease: Power2.easeIn}, '-=1');
});
}
})();
Indicamos que nuestro primer elemento se desplace inmediatamente al mover el cursor, mientras que el segundo elemento le sigue con un retardo de 1 segundo en negativo (‘-=1’) antes de terminar la animación del primer elemento.
También hacemos uso de Power2 como curva para nuestra animación, gsap nos provee variedad de ellas y puedes probar la que mejor se adapte a tus necesidades según el caso desde este enlace.
Con esto ya tenemos nuestro cursor personalizado con JavaScript listo para usar y deberías obtener el mismo efecto visto ejemplo.
También puedes comprobar tu código con este codepen en linea:
Si quieres aprender más JavaScript y buenas prácticas te recomiendo visitar el siguiente artículo que detalla diversas buenas prácticas en JavaScript, para que sigas mejorando tu código cada día.
Espero que este artículo te haya sido de ayuda , si es así comparte con tus amigos y conocidos para que sigamos entre todos mejorando cada día en este amplio mundo de la programación
Compartir en: Facebook | Twitter | LinkedIn | Whatsapp
Si tienes alguna duda o aportación no dudes en dejarla en los comentarios.
Comentarios