Agregamos la librería:
- [Nombre de libreria]
CSS:
/* CURSOR */
#cursorElement{
position: fixed;
display: flex;
align-items: center;
justify-content: center;
width: 25px;
height: 25px;
top: 0;
left: 0;
pointer-events: none;
z-index: 99999;
mix-blend-mode: exclusion;
}
#cursorElement::before{
content: "";
position: absolute;
width: 100%;
height: 100%;
mix-blend-mode: exclusion;
pointer-events: none;
z-index: 99999;
background: transparent;
border: 1px solid #fff;
opacity: 1;
border-radius: 100%;
}
#cursorElement #cursor_arrow{
opacity: 0;
transition: .6s;
transform: scale(0.3);
pointer-events: none;
}
#cursorElement.showArrow{
cursor: pointer;
pointer-events: none;
}
#cursorElement.showArrow #cursor_arrow{
opacity: 0;
transform: scale(1);
pointer-events: none;
display: none;
}
JS:
/* window on load */
$(window).on('load', function() {
cursorPointer();
});
/* Cursor */
function cursorPointer() {
if( window.innerWidth >= 1050 ){
let cursorElement = document.createElement('div');
cursorElement.id = 'cursorElement';
document.querySelector('body').append(cursorElement);
let cursor = document.createElement('img');
cursor.id = 'cursor_arrow';
cursor.src = "/wp-content/uploads/2023/04/cursor.svg"
cursorElement.append(cursor);
gsap.set(cursorElement, { xPercent: -50, yPercent: -50 });
var pos = { x: window.innerWidth / 2, y: window.innerHeight / 2 };
var mouse = { x: pos.x, y: pos.y };
var speed = 0.3;
var fpms = 60 / 1000;
var xSet = gsap.quickSetter(cursorElement, "x", "px");
var ySet = gsap.quickSetter(cursorElement, "y", "px");
window.addEventListener("mousemove", e => {
mouse.x = e.x;
mouse.y = e.y;
});
gsap.ticker.add((time, deltaTime) => {
var delta = deltaTime * fpms;
var dt = 1.0 - Math.pow(1.0 - speed, delta);
pos.x += (mouse.x - pos.x) * dt;
pos.y += (mouse.y - pos.y) * dt;
xSet(pos.x);
ySet(pos.y);
});
// Mostrar flecha al entrar en elementos con la clase
document.querySelectorAll('.cursor__show-arrow').forEach((elem) =>{
elem.addEventListener("mouseenter", (el) => {
cursorElement.classList.add('showArrow')
gsap.to('#cursorElement', { width: '80px', height: '80px' })
})
elem.addEventListener("mouseleave", (el) => {
cursorElement.classList.remove('showArrow')
gsap.to('#cursorElement', { width: '25px', height: '25px' })
})
});
}
}
/* Fin Cursor */
