mirror of
https://github.com/milk-net/milk-net.github.io.git
synced 2025-04-19 05:33:40 -05:00
54 lines
1.4 KiB
HTML
54 lines
1.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Trailing</title>
|
|
<script src="https://unpkg.com/cursor-effects@latest/dist/browser.js"></script>
|
|
<style>
|
|
/* Trailing effect customization */
|
|
.cursor-trailing {
|
|
position: absolute;
|
|
pointer-events: none;
|
|
background-color: rgba(0, 0, 0, 0.2); /* Customize the background color */
|
|
width: 20px; /* Adjust size */
|
|
height: 20px; /* Adjust size */
|
|
border-radius: 50%;
|
|
transform: translate(-50%, -50%);
|
|
animation: cursor-trailing-animation 0.3s ease-out;
|
|
}
|
|
|
|
@keyframes cursor-trailing-animation {
|
|
from {
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<h1>site</h1>
|
|
<p>trailing effect</p>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
new CursorEffect({
|
|
type: 'trailing', // Set the effect type to "trailing"
|
|
cursor: {
|
|
size: 12, // Set the size of the main cursor
|
|
color: 'rgba(255, 0, 0, 0.5)', // Customize the cursor color
|
|
},
|
|
trailing: {
|
|
size: 15, // Set the size of the trailing effect
|
|
distance: 50, // Set the distance the trail lags behind the main cursor
|
|
color: 'rgba(0, 255, 0, 0.5)', // Customize the trailing color
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|