<section class="mousetracker">
<h2>Showcasing JS functionality for mouse tracking</h2>
</section>
<section class="mousetracker">
<h2>Showcasing JS functionality for mouse tracking</h2>
</section>
/* No context defined. */
/** Mouse Tracker **/
.mousetracker {
padding: var(--ds-space-xxl);
}
// ONLY THIS CSS IS NEEDED FOR THE MOUSETRACKER
.line {
position: absolute;
background-color: var(--ds-color-background-secondary);
transform-origin: 0 50%;
pointer-events: none;
opacity: 1;
// transition: opacity 350ms ease-out;
}
.custom-cursor {
position: absolute;
width: 12px;
height: 12px;
background-color: var(--ds-color-background-secondary);
border-radius: 50%;
pointer-events: none;
transform: translate(-50%, -50%);
}
/**
** The class names above can be changed to anything you like.
** If you adjust the class name, remember to update the associated
** class name inside the "mousetracker.js" file on lines 2 and 20.
**/
let prevPos = null;
const customCursor = document.querySelector('.custom-cursor');
const lineContainer = document.createElement('div');
lineContainer.className = 'line-container';
document.body.appendChild(lineContainer);
document.addEventListener('mousemove', (e) => {
const currentPos = { x: e.pageX, y: e.pageY };
// Move the custom cursor
customCursor.style.left = `${currentPos.x}px`;
customCursor.style.top = `${currentPos.y}px`;
if (prevPos) {
lineContainer.appendChild(drawLine(prevPos, currentPos));
}
prevPos = currentPos;
});
function drawLine(start, end) {
const line = document.createElement('div');
line.className = 'line';
const dx = end.x - start.x;
const dy = end.y - start.y;
const length = Math.sqrt(dx * dx + dy * dy);
const angle = Math.atan2(dy, dx) * (180 / Math.PI);
line.style.width = `${length}px`;
line.style.height = '2px';
line.style.left = `${start.x}px`;
line.style.top = `${start.y}px`;
line.style.transform = `rotate(${angle}deg)`;
line.style.transformOrigin = '0 50%';
return line;
}
// Clear lines every 2 seconds
setInterval(() => {
const children = Array.from(lineContainer.children);
children.forEach((child, index) => {
setTimeout(() => {
lineContainer.removeChild(child);
}, index * 10); // Stagger the removal every 100ms
});
}, 450);
JS functionality to track the cursor position and draw a line that fades after 1s.
This functionality also includes a .custom-cursor element. All you need to do is add a div into your code base with the class of custom-cursor. Inside the fractal environment, this can be found in the preview.twig file.
The class name for the trailing line is currently set to .line. This can be changed to anything you like. If you adjust the class name, remember to update the associated class name inside the mousetracker.js file on line 20. The same goes for the .custom-cursor class, found on line 2.