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>