Doubled Custom Cursor Activation

Design help Custom code
1

Hello everyone. I want to implement the same (or similar) custom cursor as on this website:

I 've read all tutorials and answers for the same type of question but didn’t find something similar. The problem with this type of cursor is that it contains 2 part - small circle (as a cursor) + big circle around the small one. In the previous answers, people advised to implement the piece of code with some sort of image, I got it. But it doesn’t look like on this website

I am 0 at any type of codding, so I’ve tried to add a piece of CSS code that guys gave in the previous answers and it still didn’t work. I placed this code in a “Custom Code” section under “Head Code”:

.block { cursor: url('theurl.png'), default; }

Maybe I didn’t figure out where to place an image and what type of image should I place. I know that it needed to be .png or .ico - I did .png (20px x 20px) and upload it on Google Drive. Then copy URL and put it into code. Here is my sample project:

https://preview.webflow.com/preview/kickstarter-launch?utm_source=kickstarter-launch&preview=526391a36ad5412abc74203042c2c43a

To summarize, I have 2 questions:

  1. Why the custom cursor I’ve tried to add isn’t working
  2. How to add the same custom cursor as on this website

Thank you so much for help

1 Like
2

Hello @Evgeniy_Kadzin

Here’s almost the same cursor > https://custom-cursor-mouse.webflow.io/

In the head part of the website add

<style>

/* Hide on Smaller Screens */

@media screen and (max-width: 991px) {

 .cursor-a, .cursor-b, .cursor-v, .text-cursor, .cursor {

   visibility: 1;

   display: none;

 }

}

/* Blue Outline Stroke */

.outline-title {

color:transparent;

   -webkit-text-stroke: 1px #E82424;

}

/*Custom Mouse Cursor*/

   * {

       cursor: none;

   }

.cursor {

 position: fixed;

 height: 10px;

 width: 10px;

 border-radius: 50%;

 z-index: 1000;

}


.cursor-a  {

       position: fixed;

       background-color: #E82424;

       width: 10px;

       height: 10px;

       border-radius: 100%;

       z-index: 10000;

       transition: 0.3s cubic-bezier(0.75, -1.27, 0.3, 2.33) transform, 0.2s cubic-bezier(0.75, -0.27, 0.3, 1.33) opacity;

       user-select: none;

       pointer-events: none;

       z-index: 100000000;

       transform: scale(1);

   }

.cursor-a.active {

       opacity: 0.5;

       transform: scale(0);

   }

.cursor-a.hovered {

       opacity: 0.08;

   }

   .badge {

    visibility: hidden;

       margin-top: -221px;

       margin-left: -86.5px;

       position: relative;

       width: 414px;

       transform: rotate(-50deg);

   }

.cursor-b {

       position: fixed;

       transition: 0.6s cubic-bezier(0.75, -1.27, 0.3, 2.33) transform, 0.2s cubic-bezier(0.75, -0.27, 0.3, 1.33) opacity;

       user-select: none;

       pointer-events: none;

       z-index: 10000000;

       transform: translate(-14px, -14px);

   }

   .cursor-v {

       width: 38px;

       transition: 0.6s cubic-bezier(0.75, -1.27, 0.3, 2.33) transform, 0.2s cubic-bezier(0.75, -0.27, 0.3, 1.33) opacity;

       height: 38px;

       border-radius: 100%;

       border-style: solid;

       border-width: 1px;

       border-color: white;

   }

   .cursor-v.active {

   background-color: rgba(255, 255, 255, 0.1);

       opacity: 0.7;

       transform: scale(2);

       border:none;

   }

   .cursor-v.hovered {

       opacity: 0.06;

   }

}

 

</style>

<div class="w-embed"><!--Custom Mouse Cursor-->

<div class="cursor cursor-a" style="left: 175px; top: 255px;"></div>

<div class="cursor cursor-b" style="left: 530px; top: 376px;">

     <div class="cursor-v"></div>

     <div class="badge">

     <!--<h1 class="text-cursor">Click</h1>-->

     </div>        

</div></div>

Before closing body tag add

<script>

$(document).ready(function() {

      if ( $(window).width() <= 991 ) {

    $('.cursor-a').remove();

      }

    });

    $(document).on({

        mouseenter:function(){ $('.text-cursor').css('display', 'none');},

        mouseleave:function(){ $('.text-cursor').css('display', 'block');},

    },

    '.navbar'

    );

   $(document).on({

        mouseenter:function(){ $('.text-cursor').css('display', 'none');},

        mouseleave:function(){ $('.text-cursor').css('display', 'block');},

    },

    '.sticky-sidebar'

    );

     

   

   $(function () {

    $(".text-cursor").lettering();

   });

   

  if ( $(window).width() >= 991 ) {

 

$(document)

 .mousemove(function(e) {

   $('.cursor')

     .eq(0)

     .css({

       left: e.clientX,

       top: e.clientY

     });

   setTimeout(function() {

     $('.cursor')

       .eq(1)

       .css({

         left: e.clientX,

         top: e.clientY

       });

   }, 100);

 })

 

   $(document).on("mousemove", function (e) {

     mouseX = e.pageX;

     mouseY = e.pageY;

   });

$('.hero-content').mousedown(() => {

    $('.cursor-v').css('transform', 'scale(0.7)');

    $('.text-cursor').fadeOut(300);

       });

$('.hero-content').mouseup(() => {

      $('.cursor-v').css('transform','');

           $('.text-cursor').fadeIn(300);

  });

   $("a").on("mouseenter", function () {

     $('.cursor-a').addClass("active");

     $('.cursor-v').addClass("active");

   });

   $("a").on("mouseleave", function () {

     $('.cursor-a').removeClass("active");

      $('.cursor-v').removeClass("active");

   });

  }

</script>

I’m not a code master, but this can help you.

Piter :webflow_heart:

1 Like
3

Piter, you’re a star. Thank you.

1 Like
4

Hi Piter.

If I just want to hide the cursor and make a new one using interactions. What would the code be to remove the cursor. I have tried different stuff with no luck. I’m just not nerd enough, wish I was :slight_smile:

What I have tried

<script type="text/javascript">
    document.body.style.cursor = 'none';
</script>

and

<style type="text/css">
    .nocursor { cursor:none; }
</style>
5

I will shamelessly plug my own guide right here. You will find the step-by-step technique described quite thoroughly there.

1 Like
6

haha… I didn’t know we had the -none- option in webflow to remove the cursor :smiley: That solved everything :smiley: Thank you @dram ! Great guide!

1 Like