How To Customize Your Cursor!

Hello there! Today we will see a simple way to create a fully custom cursor with Javascript, Scss and Html. Of course, there are a lot of ways to do that but I’ll show you my approach. Are you ready?

Photo by Christopher Gower on Unsplash

Someone said, If you come away from somewhere empty-handed, you have failed to get what you wanted. So, for your ‘happiness’ you can get access to my code from Codepen below, just click “Run Pen” and you will see the results.

Step 1) Create an element for your custom cursor appearance. For example: <div class="custom-cursor"></div>

Step 2) Create some style for your cursor element, add transitions in order to make it smoother, also add animations (if you want it). In my case I’ve put an animation in the middle dot of the cursor.

.custom-cursor {
    width: 40px;
    height: 40px;
    border: 2px solid white;
    opacity: 0.8;
    position: absolute;
    border-radius: 50%;
    top: 0;
    left: 0;
    
    @include transform(scale(0));
    @include transition(all 0.2s ease);
    
    &:after{
      content: '';
      width: 6px;
      height: 6px;
      background-color: yellow;
      display: block;
      z-index: 1;
      opacity: 1;
      border-radius: 50%;
      position: relative;
      top: calc(50% - 3px);
      left: calc(50% - 3px);
      animation: bounce 0.4s infinite alternate;
      
      @include keyframes(bounce){
        from{
          @include transform(scale(1));
        }
        to{
          @include transform(scale(1.6));
        }
      }
    }
    
  }

Step 3) Make the new/fake cursor element that ‘follows’ the real cursor (with javascript).

const cursor = document.querySelector('.custom-cursor');
document.addEventListener('mousemove', e => {
    cursor.setAttribute("style", "transform: scale(1); top: "+(e.pageY - 20)+"px; left: "+(e.pageX - 20)+"px;");
});

Remember that if you want to hide the default cursor, you will need to put some css code --> cursor:none!important! at your html’s tag in css file.

Also, you can change the appearance of your cursor when an event happens, for example on mouseover in a specific element. To do that you will need to create a new class and add this class to your new cursor (through javascript again).

//SCSS
.custom-cursor {
    width: 40px;
    height: 40px;
    border: 2px solid white;
    opacity: 0.8;
    position: absolute;
    border-radius: 50%;
    top: 0;
    left: 0;
    
    @include transform(scale(0));
    @include transition(all 0.2s ease);
    //NEW CLASS    
    &.yellow-attitude{
      border: 2px solid yellow;
      background-color: rgba(yellow, 0.4);
      
      @include transform(scale(1.4)!important);
      @include transition(all 0.2s ease);
    }
    
    &:after{
      content: '';
      width: 6px;
      height: 6px;
      background-color: yellow;
      display: block;
      z-index: 1;
      opacity: 1;
      border-radius: 50%;
      position: relative;
      top: calc(50% - 3px);
      left: calc(50% - 3px);
      animation: bounce 0.4s infinite alternate;
      
      @include keyframes(bounce){
        from{
          @include transform(scale(1));
        }
        to{
          @include transform(scale(1.6));
        }
      }
    }
    
  }

//JAVASCRIPT
var element = document.getElementById('myitem');
element.addEventListener("mouseover", e => {
   cursor.classList.add("yellow-attitude");
});
element.addEventListener("mouseleave", e => {
   cursor.classList.remove("yellow-attitude");
  // alert('jo');
});

//HTML
<h1 id="myitem">HOVER ME</h1>

Tadah! hope you liked it!