Creating a Dynamic Follower Effect with HTML, CSS, and JavaScript

Published Dec 20, 2023

Written by: Abdulmumin Yaqeen

Last Edited: Feb 5, 2024

Have you ever wanted to create an interactive element that follows your mouse cursor? In this tutorial, we’ll build a simple yet engaging effect using HTML, CSS, and JavaScript. We’ll create a red circle that dynamically follows the mouse cursor and shrinks briefly when the window is clicked.

Step 1: Setting up the HTML Structure

Let’s start by setting up our HTML structure. Create a div element with a unique ID that will represent our follower:

<div id="follower"></div>

This empty div with the ID “follower” will be our element to manipulate with CSS and JavaScript.

Step 2: Styling the Follower with CSS

Next, let’s style our follower using CSS to give it the appearance and behavior we desire:

#follower {
	width: 50px;
	height: 50px;
	background-color: red;
	position: absolute;
	border-radius: 50%;
	transition:
		top 0.1s ease,
		left 0.1s ease,
		transform 0.3s ease-out;
}

This CSS code specifies the width, height, background-color, position, border-radius, and transition properties for the “follower” div. It creates a red circle that smoothly transitions when its position or size changes.

Step 3: Adding Interactivity with JavaScript

Now, let’s make our follower element dynamically follow the mouse cursor and perform an action when the window is clicked:

const follower = document.getElementById('follower');

document.addEventListener('mousemove', (e) => {
	const x = e.clientX;
	const y = e.clientY;

	follower.style.left = x + 'px';
	follower.style.top = y + 'px';
});

window.addEventListener('click', () => {
	follower.style.transform = 'scale(.1)';

	setTimeout(() => {
		follower.style.transform = 'scale(1)';
	}, 300);
});

This JavaScript code does the following:

  • Retrieves the follower element using getElementById.
  • Listens for the mousemove event on the document and updates the left and top CSS properties of the follower element to match the current mouse position.
  • Listens for a click event on the window. Upon click, it shrinks the follower to 10% of its size using transform: scale() and then restores its original size after a short delay using setTimeout.

Final Thoughts

And there you have it! By combining HTML, CSS, and JavaScript, we’ve created an engaging follower effect that responds to mouse movements and clicks. Feel free to customize the styles, transitions, or additional interactions to suit your project needs.

Experiment with different properties, timings, and effects to create unique and interactive elements on your webpage!

You can view the full code and demo here.

Happy coding! 🚀✨

Tagged with: CSS micro interactions js
Love it? Share it!

0 Comments

Be the first to comment!

DevCanvas DevCanvas Logo

Online Editor with a collection of awesome frontend code and code snippets for developers of all levels.

Legal & Support

Stand with Palestine 🇵🇸! DO NOT BE SILENCED

© 2024 DevCanvas. All rights reserved.