Hello,
I am using wix studio for my website design…I am looking for a section of code that will allow the cursor to leave a tail when dragged across a page. Something like this https://cursoreffects.com/ but with a simple gray or black pixel tail instead of a colorful/image based one.
The ideal code would allow me to easily change the tail color, length, width, and duration it stays on screen. (If this is possible?)
Cheers.
Yes this is possible by using an NPM-Package… — >GitHub - tholman/cursor-effects: Old-school cursor effects for your browser built with modern JavaScript
Hmm…Do you know if this is this possible to setup without a paid premium account?
Could you show this working on your test site?
Put this into JS-Fiddle…or CODEPEN…
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cursor Effects Example</title>
<!-- Include the Cursor Effects library hosted on unpkg -->
<script src="https://unpkg.com/cursor-effects@latest/dist/browser.js"></script>
<!-- Add any additional CSS styles if needed -->
<style>
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
overflow: hidden; /* to prevent scrollbars for the demo */
}
h1 {
text-align: center;
margin-top: 50px;
}
</style>
</head>
<body>
<h1>Cursor Effects Example</h1>
<!-- Initialize fairyDustCursor -->
<script type="module">
import { fairyDustCursor } from "https://unpkg.com/cursor-effects@latest/dist/esm.js";
// Create a new instance of fairyDustCursor
document.addEventListener('DOMContentLoaded', function() {
new fairyDustCursor();
});
</script>
</body>
</html>
Just a simple example, where you will have your wished effect on the top-area of the window. This would be the HTML-Component-Way → HTML-Components woks only 50% on free sites. That means —> it would work, but communication between iFrame and page would not be possible, as of my knowledge.
How it is about → NPM-Packages → i forgot.
Okay I see this working on my site…but what do I need to do to change the effect/dust color? and how do I make the effect happen across the entire iframe area instead of just on top of the text?
Thanks.
Where in the code page would I put this?
new cursoreffects.rainbowCursor({
length: 3,
colors: [“red”, “blue”],
size: 4,
});
Increasing the ANIMATED-AREA —>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cursor Effects Example</title>
<!-- Include the Cursor Effects library hosted on unpkg -->
<script src="https://unpkg.com/cursor-effects@latest/dist/browser.js"></script>
<!-- Add any additional CSS styles if needed -->
<style>
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
overflow: hidden; /* to prevent scrollbars for the demo */
}
h1 {
text-align: center;
margin-top: 50px;
}
</style>
</head>
<body>
<h1>Cursor Effects Example</h1>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<!-- Initialize fairyDustCursor -->
<script type="module">
import { fairyDustCursor } from "https://unpkg.com/cursor-effects@latest/dist/esm.js";
// Create a new instance of fairyDustCursor
document.addEventListener('DOMContentLoaded', function() {
new fairyDustCursor();
});
</script>
</body>
Here, last one for you…
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Your Webpage Title</title>
<!-- Add any additional CSS styles if needed -->
<style>
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
overflow: hidden; /* to prevent scrollbars for the demo */
cursor: none; /* hide the default cursor */
}
h1 {
text-align: center;
margin-top: 50px;
}
#character {
position: absolute;
font-size: 30px; /* Increase the font size */
pointer-events: none; /* Allow events to pass through the animated characters */
}
.character {
position: absolute;
color: transparent;
transition: transform 0.3s ease-out; /* Smoothly transition the character position */
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
const targetElement = document.querySelector("#character");
const characters = ["user-985"];
const colors = ["#6622CC", "#A755C2", "#B07C9E", "#B59194", "#D2A1B8"];
characters.forEach((char, index) => {
const character = document.createElement('div');
character.classList.add('character');
character.textContent = char;
character.style.color = colors[index % colors.length];
targetElement.appendChild(character);
});
document.addEventListener('mousemove', function(event) {
const mouseX = event.clientX;
const mouseY = event.clientY;
const characters = document.querySelectorAll('.character');
characters.forEach((character, index) => {
const angle = (index / characters.length) * Math.PI * 2;
const radius = 50;
const offsetX = Math.cos(angle) * radius;
const offsetY = Math.sin(angle) * radius;
const transformValue = `translate(${mouseX + offsetX}px, ${mouseY + offsetY}px)`;
character.style.transform = transformValue;
});
});
});
</script>
</head>
<body>
<h1>Your Webpage Content</h1>
<!-- Add an element to serve as the target for characterCursor -->
<div id="character"></div>
</body>
</html>
The rest try to find out how to do.
Sounds good, thanks again for the help with this.