ok so this stuff isn’t specific to snipcart but hopefully you have an idea.
The element <div class="cursor"></div> is a custom cursor styled in css, it follows the mouse movements with js.
.link-shrink is a css class with a scale transform 0.5. When adding this class to my cursor div it applies the transform and creates a transition style animation which shrinks the cursor.
The way this happens is any element with the class .cursor-shrink triggers the adding and removing of link-shrink on my cursor div.
So here is the js:
//my cursor
let mouseCursor = document.querySelector(".cursor");
//elements with class cursor-shrink trigger adding the class link-shrink
let navLinks = document.querySelectorAll(".cursor-shrink");
//tracking the mouse movements
window.addEventListener('mousemove',cursor);
function cursor(e) {
mouseCursor.style.top = e.pageY + 'px';
mouseCursor.style.left = e.pageX + 'px';
}
//toggling link-shrink class on elements with .cursor-shrink
navLinks.forEach(link => {
link.addEventListener("mouseleave", () => {
mouseCursor.classList.remove("link-shrink");
});
link.addEventListener("mouseover", () => {
mouseCursor.classList.add("link-shrink");
});
});
So this works perfectly well anywhere else on my site where I have elements like <div class="cursor-shrink"> if I mouse over link-shrink is added. I tried simply copying this bit of js inside the snipcart-templates.html but that didn’t work. Not sure exactly what to do.
