div 加/head之前，js在/body之前
<div id="customCursor" style="transform: rotate(45deg); background-color: #5affcd;"></div>
<script>
document.addEventListener(‘DOMContentLoaded’, function() {
const cursor = document.getElementById(‘customCursor’);
let mouseX = 0, mouseY = 0, posX = 0, posY = 0;
function mouseCoords(e) {
mouseX = e.clientX;
mouseY = e.clientY;
}
document.addEventListener(‘mousemove’, mouseCoords);
function delayFollow() {
requestAnimationFrame(delayFollow);
posX += (mouseX – posX) / 2;
posY += (mouseY – posY) / 2;
cursor.style.transform = `translate3d(${posX}px, ${posY}px, 0) rotate(45deg)`;
}
delayFollow();
// Cursor transformations for links
const links = document.querySelectorAll(‘a’);
links.forEach(link => {
link.addEventListener(‘mouseover’, () => {
cursor.style.width = ’35px’;
cursor.style.height = ’35px’;
cursor.style.opacity = ‘0.8’;
cursor.style.borderRadius = ‘50%’; // Makes cursor a circle
});
link.addEventListener(‘mouseleave’, () => {
cursor.style.width = ’15px’;
cursor.style.height = ’15px’;
cursor.style.opacity = ‘1’;
cursor.style.borderRadius = ‘0’; // Reverts cursor to its original shape
});
});
// Fade cursor on iframe and form fields hover
const fadeElements = document.querySelectorAll(‘iframe, form, input, textarea, select, button’);
fadeElements.forEach(el => {
el.addEventListener(‘mouseover’, () => {
cursor.style.opacity = ‘0’;
setTimeout(() => { cursor.style.visibility = ‘hidden’; }, 300);
});
el.addEventListener(‘mouseleave’, () => {
cursor.style.visibility = ‘visible’;
cursor.style.opacity = ‘1’;
});
});
// Change cursor color when over .l-section.color_primary
const colorChangeElements = document.querySelectorAll(‘.l-section.color_primary’);
colorChangeElements.forEach(el => {
el.addEventListener(‘mouseover’, () => cursor.style.background = ‘#0f1e1b’); // Change cursor color
el.addEventListener(‘mouseleave’, () => cursor.style.background = ‘#e3ff6a’); // Revert cursor color
});
});
</script>
<script>
document.addEventListener(“DOMContentLoaded”, function() {
// Create the divs
var smoothWrapper = document.createElement(‘div’);
smoothWrapper.id = ‘smooth-wrapper’;
var smoothContent = document.createElement(‘div’);
smoothContent.id = ‘smooth-content’;
// Append smoothContent inside smoothWrapper
smoothWrapper.appendChild(smoothContent);
// Move all body children inside smoothContent
while (document.body.firstChild) {
smoothContent.appendChild(document.body.firstChild);
}
// Append smoothWrapper to the body
document.body.appendChild(smoothWrapper);
});
</script>