Search for a command to run...
Hey there!
I'm an electronics engineer who's dabbled in a bit of everything, including full-stack development and web3 technologies. I love building cool stuff and am always looking to connect with other like-minded professionals. When I'm not tinkering with new projects, you can find me scouring the internet for the latest and greatest in tech.
No comments yet. Be the first to comment.
I had a simple question: Why do websites load lots of individual images instead of stitching them into one giant image and cropping out the pieces they need? At first glance, an image atlas sounds g
for (i = 0; i < numberOfElements; i++) { doSomethingWith(element[i]); } This works, but isn't very elegant. The Ruby way is much more elegant. elements.each do |element| do_something_with(ele
I needed to benchmark my laptop for local AI workloads — how fast can it transcribe audio? What LLMs can it run? Rather than spend a weekend hacking at it manually, I paired with Claude Code and treat
I was 30 seconds away from running malware on my machine. The attack vector? A fake coding interview from a "legitimate" blockchain company. Here's how a sophisticated scam operation almost got me, and why every developer needs to read this. The Setu...
"Why do you keep smiling?" My friend's puzzled voice cut through the theater's surround sound as yet another jump scare filled the screen. I hadn't even realized I was doing it. There I was, grinning like an idiot while a demon wreaked havoc on scree...
In the world of web design, it's the small details that make a big difference. Customizing the cursor and adding a follower animation can significantly boost the interactivity and visual appeal of your website. This blog post will guide you through adding a custom cursor along with a follower effect using CSS and JavaScript.
Start by adding two div elements in your HTML, one for the cursor and another for the cursor follower:
​
<div class="cursor default-cursor" id="cursor"></div>
<div class="cursor-follower default-cursor-follower" id="cursor-follower"></div>
These elements will serve as our custom cursor and its follower.
Next, style both the cursor and the follower in CSS:
​
.cursor, .cursor-follower {
border-radius: 50%;
position: fixed;
transform: translate(-50%, -50%);
pointer-events: none;
}
​
.default-cursor {
width: 8px;
height: 8px;
background-color: var(--accent-color);
z-index: 9999;
}
​
.default-cursor-follower {
width: 36px;
height: 36px;
background-color: var(--accent-color);
opacity: 0.2;
z-index: 999;
}
After setting up the HTML and CSS for the custom cursor and its follower, we need to add an animate function in JavaScript. This function will create a smooth following motion for the cursor follower, enhancing the interactive experience.
let cursorFollower = document.getElementById("cursor-follower");
let cursor = { x: 0, y: 0 };
let follower = { x: 0, y: 0, vx: 0, vy: 0 };
​
const stiffness = 0.07; // Spring stiffness
const damping = 0.1; // Damping coefficient
​
function animate() {
// Calculate spring force
let dx = cursor.x - follower.x;
let dy = cursor.y - follower.y;
let springForceX = dx * stiffness;
let springForceY = dy * stiffness;
​
// Damping
follower.vx *= damping;
follower.vy *= damping;
​
// Apply forces to velocity
follower.vx += springForceX;
follower.vy += springForceY;
​
// Update position
follower.x += follower.vx;
follower.y += follower.vy;
​
// Apply position to the DOM element
cursorFollower.style.left = follower.x + "px";
cursorFollower.style.top = follower.y + "px";
​
requestAnimationFrame(animate);
}
​
animate();
Use JavaScript to make the custom cursor track the mouse movement:
document.addEventListener("mousemove", function (e) {
cursor.x = e.clientX;
cursor.y = e.clientY;
​
var cursor_el = document.getElementById("cursor");
cursor_el.style.left = e.clientX + "px";
cursor_el.style.top = e.clientY + "px";
});
This script enables the cursor and follower to follow the mouse movements on the screen.
Enhance your cursor's interactivity with hover animations over links by incorporating Font Awesome icons.
First, ensure you've included Font Awesome in your HTML. Here, we use version 4:
​
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
Modify your HTML links to include data- attributes that reference specific Font Awesome icons. It's important to use the correct icon name as per Font Awesome version 4:
​
<a href="#" data-cursor="link" data-cursoricon="twitter">Twitter</a>
In this example, data-cursoricon="twitter" will correspond to the Twitter icon in Font Awesome v4.
To ensure you are using the correct icon names from Font Awesome version 4, visit their website and search for icons. The icon name should exactly match the value in the data-cursoricon attribute. Font Awesome v4 Icons.
Add CSS for the hover state of the cursor. When hovering over a link, the cursor will change its appearance and include the Font Awesome icon:
​
.link-cursor {
width: 32px;
height: 32px;
background-color: var(--secondary-color);
z-index: 9999;
color: var(--primary-color);
}
.link-cursor-follower {
width: 52px;
height: 52px;
background-color: var(--secondary-color);
opacity: 1;
}
.link-cursor i {
display: block;
font-size: 1.2rem;
}
Use JavaScript to change the cursor's appearance based on the hovered link. The cursor will dynamically display the corresponding Font Awesome icon:
​
document.addEventListener("mousemove", function (e) {
cursor.x = e.clientX;
cursor.y = e.clientY;
​
var cursor_el = document.getElementById("cursor");
cursor_el.style.left = e.clientX + "px";
cursor_el.style.top = e.clientY + "px";
​
if (e.target.dataset.cursor == "link") {
cursor_el.classList.add("link-cursor");
cursor_el.classList.remove("default-cursor");
follower_el.classList.add("link-cursor-follower");
cursorFollower.classList.remove("default-cursor-follower");
cursor_el.innerHTML = `<i class="fa fa-${e.target.dataset.cursoricon}"></i>`;
} else {
cursor_el.classList.add("default-cursor");
cursor_el.classList.remove("link-cursor");
cursorFollower.classList.add("default-cursor-follower");
follower_el.classList.remove("link-cursor-follower");
cursor_el.innerHTML = "";
}
});
With these steps, your website's cursor will not only follow the mouse but also change its appearance based on the hovered link, along with a follower enhancing the visual effect.
Custom cursor animations and follower effects offer a unique and creative way to boost user engagement on your website. By following the steps outlined above, you not only add these dynamic features but also open up a world of customization. Feel free to experiment and tweak the existing CSS and JavaScript to truly make these animations and effects your own. Whether it's adjusting the animation speed, changing colors, or experimenting with different shapes and sizes, the possibilities are endless. Dive in and give your site a personalized touch that reflects your style.