In today’s rapidly evolving web technology, many websites and blogs are pursuing unique and creative content to attract users. In this article, we introduce a unique technique using JavaScript’s document.onmousemove event as part of this creativity. Specifically, when a user moves their mouse across a web page, text follows the cursor. From programming beginners to advanced users, this simple yet captivating technique can leave a lasting impression on visitors.
CSS Settings for the Following Text
To define the text to follow the cursor, we first set the basic styling with CSS. Here, we use an element with the ID `#idTrac` and apply `position: absolute;` to it, allowing the element to be positioned anywhere on the page. This setup ensures that the text will follow smoothly even when its position is dynamically changed with JavaScript.
<style type="text/css">
<!--
body{
margin:0;
padding:0;
}
h1{
font-size:16px;
font-weight:normal;
line-height:1.8em;
text-align:center;
padding:15px 0;
}
#idWrap{
width:600px;
margin:0 auto;
text-align:center;
}
#idTrac{
position:absolute;
}
-->
</style>
Implementing JavaScript to Make Text Follow the Mouse Cursor
Next, we’ll write the JavaScript to make the text follow the movement of the mouse cursor. In this script, every time the mouse moves, the cursor’s position is captured, and the position and content of the `idTrac` element are updated. As a result, when the user moves the mouse across the page, the text “Following the mouse cursor…” will move along with it.
<script type="text/javascript">
<!--
function mousetrac() {
X = event.x + document.body.scrollLeft;
Y = event.y + document.body.scrollTop;
document.all["idTrac"].innerText = "Following the mouse cursor...";
document.all["idTrac"].style.left= X + 5;
document.all["idTrac"].style.top = Y + 10;
}
document.onmousemove = mousetrac;
-->
</script>
HTML Structure
Finally, we’ll use HTML to set up the following text and the context where the text will be displayed. Here, the `div` element with the ID `idTrac` is the target that will follow the cursor, and by wrapping it within `idWrap`, the centered title is displayed.
The DOCTYPE tag caused issues in Chrome browser, so it was omitted. Prepare the text that follows the cursor (id=”idTrac”) as needed.
<div id="idTrac"></div>
<div id="idWrap">
<h1>Text follows the mouse cursor.</h1>
</div><!--/idWrap-->
Demo Page of Text Following the Mouse Cursor
A demo page has been prepared where you can experience this technique in action. If you’re interested in implementing it or simply want to explore it, please check it out. You can see the text following the mouse cursor in real-time and feel its appeal firsthand.
Demo page of text following the mouse cursor
Moreover, this technique is not limited to text but can also be applied to images and other elements. For example, you could use an icon promoting a specific event or campaign that follows the mouse cursor to capture users’ attention. In this way, using the document.onmousemove event offers a wide range of applications, enhancing the appeal of your website or blog.
In Conclusion
The technique introduced here can be relatively easy to implement for those who understand the basics of JavaScript. Of course, even for beginners, implementing this kind of interactive feature is a great opportunity to learn the fundamentals of programming and web development while experiencing the joy of creating something interactive. Take this chance to challenge yourself to create unique web effects using JavaScript.
Please use this at your own discretion. Do not copy the Google Analytics tag within the head tag of the demo page.
