Image of craft your custom cursor in 3 steps using CSS & JavaScript

Craft your custom cursor in 3 Steps using CSS & JavaScript

by

Introduction

Hey buddies? How are you 👋?

Are you tired of the same old mouse pointer on your website? Want to add a personal touch 🥳 that sets your site apart? Look no further! Today, we’ll walk you through the process of coding your custom cursor in just three easy steps using👩‍💻 CSS and JavaScript.

But before that, are you tired of a slow WordPress website?🤯🤯 Then check out our 7 tips to speed up your website in simple steps.

Moving on, whether you want to add a playful animation, a stylish icon, or something unique. We’ve got you covered 🫡. Let’s dive in and unleash your creativity for a custom mouse cursor!

Step 1: Code away your HTML

The first step in crafting your custom cursor is to design it in HTML.

We are targeting our h1 tag to showcase our stylish custom mouse pointer this time 🧐. Remember, you can apply this mouse arrow on a whole webpage or a particular section. It all depends on your choice 🤔.

index.html

<!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Custom Cursor Simplified in 3 Steps</title>
 <link rel="stylesheet" href="style.css">
</head>

<body>
 <div class="cursor"></div>
 <div class="hand">Go To Next Page</div>
 <h1>Let's Chat</h1>

 <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/gsap.min.js"></script>
 <script src="script.js"></script>
</body>

</html>

Now that our HTML part is done. We can move on to the CSS section 👌👌. Also, we have another such post on how to integrate Scroll to Top feature in your website.

Step 2: Custom Cursor design with CSS

With our HTML structure ready to go, it’s time to bling our custom mouse cursor 🥰🥰 by using CSS.

By adding our custom CSS properties, we will change the shape, size, and color, and can even add animations to our cursor. Again, for this tutorial, we are keeping at a minimum. By adding a proper gif you can easily make this cursor fancy🤭🤭.

Onto our CSS file:

style.css

// Body Css is purely for design purpose. You don't need it in custom cursor code
body {
 margin: 0;
 height: 100vh;
 display: grid;
 place-content: center;
}


// Actual Custom Cursor Code start here
h1 {
 font-size: 13em;
 cursor: pointer;
 line-height: 0;
}

.cursor,
.hand {
 position: fixed;
 left: 0;
 border-radius: 50%;
 pointer-events: none;
 transition: transform 0.1s;
}

.cursor {
 background: black;
 top: 0;
 width: 20px;
 height: 20px;
 z-index: 999;
}

.hand {
 background: #9b00ff;
 top: 50%;
 width: 150px;
 height: 150px;
 z-index: 9999;
 display: grid;
 place-content: center;
 transform: rotate(45deg);
 opacity: 0;
}

.hand svg {
 width: 80px;
}

We are almost there to the finishing line 🤩🤩. For the last part, we must make our custom cursor work with the help of some JS library and pinch of Javascript code.

If you feel tired, watch some relaxing anime for fun on our recommended website for free.

Step 3: Add interactivity with JavaScript

Now that you’ve HTML and CSS, let’s add interactivity using JavaScript 🔥🔥.

With JS, you can add functionality to your custom cursors, such as changing their appearance on hover or click, and creating trails or effects. And even triggering actions on your website👨‍💻 is possible.

Remember to add the GSAP library link for sure. Otherwise, our code won’t work. This library lets us track 🎯 our mouse event on the webpage.

script.js

gsap.set('.cursor', { xPercent: -50, yPercent: -50 })

let cursor = document.querySelector('.cursor')
let hand = document.querySelector('.hand')
let title = document.querySelector('h1')

let mouseX;
let mouseY;

window.addEventListener('mousemove', e => {
 mouseX = e.clientX;
 mouseY = e.clientY;

 gsap.to(cursor, 0.5, { x: mouseX, y: mouseY })
})

title.addEventListener('mouseenter', () => {
 gsap.to(hand, 1, {
  scale: 1,
  opacity: 1,
  top: '-75px',
  left: '-75px',
  rotate: 0,
  ease: Elastic.easeOut.config(1, 0.3)
 })
})

title.addEventListener('mousemove', () => {
 gsap.to(hand, 1, {
  x: mouseX,
  y: mouseY
 })
})

title.addEventListener('mouseleave', () => {
 gsap.to(hand, 0.2, {
  scale: 0,
  opacity: 0,
  top: '10',
  left: '40',
  rotate: 45,
 })
})

We are ready to deploy our fantastic custom cursor into our website for everyone to see. Yay!! 🥁🥁 Drum roll!

Conclusion

Congratulations! 😱🤩🥳

You’ve successfully crafted your custom cursor in just 3 easy steps using CSS and JavaScript 😎. By designing your custom cursors, using it with CSS, and adding interactivity with JavaScript, you’ve taken your website to the next level. And your personal touch will delight😊😊 your website visitors.

So go ahead, unleash your creativity, and make your cursor truly your own! And if you are looking into VS Code extensions for your next project check our extension list for every coder.

Ta-da! Happy Coding 🙏!

2 thoughts on “Craft your custom cursor in 3 Steps using CSS & JavaScript”

  1. Wow that was unusual. I just wrote an incredibly long comment but after I clicked submit my comment didn’t
    appear. Grrrr… well I’m not writing all that over again. Anyhow, just wanted to say wonderful blog!

    Reply

  2. Great post. I was checking constantly this blog and I’m impressed!
    Extremely helpful info specifically the last part 🙂 I care for
    such information much. I was looking for this certain information for a long time.
    Thank you and best of luck.

    Reply

Leave a Comment