Copy & Paste in Page Loaded Javascript
// Select the body element to append the custom cursor
const parentElement = document.body;
// Create the wrapper for the cursor
const divElement = document.createElement('div');
divElement.className = 'custom-cursor-wrapper';
// Create the custom cursor dot
const spanElement = document.createElement('span');
spanElement.className = 'dot-cursor custom-cursor';
// Append the dot cursor to the wrapper
divElement.appendChild(spanElement);
// Append the wrapper to the body
parentElement.appendChild(divElement);
// Move the cursor based on mouse position
document.addEventListener("mousemove", (event) => {
const customCursor = document.querySelector(".custom-cursor-wrapper");
customCursor.style.transform = `translate(${event.pageX - window.scrollX}px, ${event.pageY - window.scrollY}px)`;
});
// Add hover effect for links
const links = document.querySelectorAll('a');
links.forEach(link => {
link.addEventListener('mouseover', () => {
spanElement.classList.add('link-hover'); // Add class when hovering over a link
});
link.addEventListener('mouseout', () => {
spanElement.classList.remove('link-hover'); // Remove class when not hovering over a link
});
});
Copy & Paste in Custom CSS
/* Remove Standard Cursor */
body {
cursor: none; /* Hide the default cursor */
}
a {
cursor: none !important; /* Prevent default pointer on links */
}
/* Custom Cursor Wrapper */
.custom-cursor-wrapper {
position: fixed;
top: -2.5rem;
left: -2.5rem;
width: 2rem; /* Adjusted width */
height: 2rem; /* Adjusted height */
pointer-events: none !important;
z-index: 9999;
user-select: none;
transition: transform 0.1s linear;
}
/* Custom Cursor Image */
.custom-cursor {
position: absolute;
top: 50%;
left: 50%;
width: 100%; /* Full width of wrapper */
height: 100%; /* Full height of wrapper */
background-image: url('https://static.showit.co/file/8wQAGewLwlbGy8Skig-TrA/59514/cursor-01.svg'); /* Default custom cursor image */
background-size: contain; /* Ensure image fits inside without being cropped */
background-position: center;
background-repeat: no-repeat;
transition: transform 0.3s ease, background-image 0.2s ease;
}
.custom-cursor.link-hover {
background-image: url('https://static.showit.co/file/qTHeJvqRG2uCeA5k8eJ1Zg/59514/cursor-02.svg') !important; /* Change image when hovering over a link */
}
