milknet/pages
1
0
Fork 0
mirror of https://github.com/milk-net/milk-net.github.io.git synced 2025-04-19 05:33:40 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

Update mousetest.html

Browse source
This commit is contained in:
Voxel 2025-04-01 16:23:56 -04:00 • committed by GitHub
parent af2ed32e2b
commit a6b420f1fa
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 45 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

54
mousetest.html
View file

@ -3,16 +3,52 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>test</title>
<script type="module">
import { fairyDustCursor } from "https://unpkg.com/cursor-effects@latest/dist/esm.js";
<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>
new fairyDustCursor();
</script>
<script>
window.addEventListener("load", (event) => {
new cursoreffects.ghostCursor();
</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>