Table of Contents
In today’s web design landscape, engaging animations can significantly enhance user experience. One captivating effect is the “Circle Text on Mousemove,” where text orbits around the mouse cursor, creating a visually striking interaction with users. This blog post will walk you through a simple effective implementation using HTML, CSS, and JavaScript.
What You’ll Learn
- HTML Structure: Setting up the basic elements.
- Styling with CSS: Making it visually appealing.
- JavaScript Logic: Creating the mouse move effect.
HTML Structure Of Circle Text on Mousemove
We’ll start with a simple HTML setup. Here’s how our structure looks:
<html>
<head>
<title>Circle Text Mousemove Animation Effects | TechyTechs</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h2 class="text">Circle-Text-Effects -</h2>
<script>
const text = document.querySelector('.text');
text.innerHTML = text.textContent.replace(/\S/g, "<span>$&</span>");
let element = document.querySelectorAll('span');
for(let i=0; i<element.length;i++){
element[i].style.transform = "rotate("+i*18+"deg)";
}
document.addEventListener("mousemove", function(e){
text.style.left = e.pageX + 'px';
text.style.top = e.pageY + 'px';
text.style.transform = `rotate(${e.pageX / 2}deg) rotate(${e.pageY / -2}deg)`;
})
</script>
</body>
</html>
Explanation
In the above code, we have a heading element that will display our animated text. The CSS is linked in the <head>, while the JavaScript logic is contained within the <script> tags.
CSS Styling Of Circle Text on Mousemove
Next, we need to style our text and the surrounding elements. Below is the CSS that gives our text a circular effect and handles the hover animation:
@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900&display=swap');
*
{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Roboto', sans-serif;
}
body
{
min-height: 100vh;
background: #94fe08;
overflow: hidden;
}
.text
{
position: absolute;
font-size: 1.5em;
color: #94fe08;
text-align: center;
pointer-events: none;
user-select: none;
transition: opacity 0.25s;
opacity: 0;
}
.text span
{
position: absolute;
top: -100px;
text-transform: uppercase;
display: inline-block;
font-weight: 500;
transform-origin: 0 100px;
}
body:hover .text
{
opacity: 1;
}
.text::before
{
content: '';
position: absolute;
transform: translate(-50%,-50%);
width: 220px;
height: 220px;
background: #191919;
border-radius: 50%;
}
.text::after
{
content: '';
position: absolute;
transform: translate(-50%,-50%);
width: 120px;
height: 120px;
/* background: #94fe08; */
border: 4px solid #94fe08;
border-radius: 50%;
}
Key CSS Features
- Transform Origin: Setting the
transform-originallows each character to rotate around a circle. - Hover Effects: The text fades in when you hover over the body, creating an inviting effect.
- Circular Background: Two pseudo-elements create a layered circular background that enhances the overall look.
JavaScript Logic
Now, let’s bring our text to life with some JavaScript:
const text = document.querySelector('.text');
text.innerHTML = text.textContent.replace(/\S/g, "<span>$&</span>");
let element = document.querySelectorAll('span');
for (let i = 0; i < element.length; i++) {
element[i].style.transform = "rotate(" + i * 18 + "deg)";
}
document.addEventListener("mousemove", function(e) {
text.style.left = e.pageX + 'px';
text.style.top = e.pageY + 'px';
text.style.transform = `rotate(${e.pageX / 2}deg) rotate(${e.pageY / -2}deg)`;
});
Breakdown of the JavaScript
- Wrap Each Character: The text content is split into spans, allowing individual control over each character’s transformation.
- Rotation Calculation: Each character is rotated based on its index, distributing them evenly in a circular manner.
- Mouse Move Event: The position of the text follows the mouse cursor, with additional rotation effects based on the cursor’s coordinates.
Conclusion
With just a few lines of code, you can create an engaging “Circle Text on Mousemove” effect that not only looks impressive but also adds a layer of interactivity to your website. This technique is perfect for headers, logos, or any text you want to highlight dynamically. Experiment with different colors and speeds to personalize the effect further!
Now, go ahead and implement this in your projects to captivate your audience with stunning visual effects!
Download the Complete Code for Circle Text on Mousemove
Ready to add an eye-catching interactive feature to your website? Download the full code for the “Circle Text on Mousemove” effect below. This simple implementation using HTML, CSS, and JavaScript will elevate your design and engage your visitors.
Enjoy the code of Circle Text on Mousemove | CSS & Javascript and don’t forget to leave a comment on it.
For the latest updates subscribe to TechyTechs.
