Streaming live at 10am (PST)

Custom Cursor code


#1

Hello,

I’d like to implement the following custom cursor to one of my sites, but I’m not sure where and how to enter the code:

https://creativesfeed.com/code/custom-cursors/index2.html

Thanks in advance.

Best,
Jens


#2

Hi @Jen

to apply a custom cursor to your website, you’ll simply need to copy the custom css code to the header of your website custom code setting. Have a look at the screenshot below.
Hope that helps.


#3

Hey @anthonysalamin,

thanks for your quick respond. So I’ve pasted in the code, but now I’m not seeing a cursor at all:

https://preview.webflow.com/preview/jensvahle-co?utm_source=jensvahle-co&preview=7d788b4fefa736bcee5810ea145cc565

Thanks in advance!

Best,
Jens


#4

What is the code you’ve pasted ?
We can’t see the custom code of your root page setting, even with a shared project.
Show us a screenshot or feel free to share the code you pasted in the head area.


#5

*{
cursor: none;
}
.your-cursor {
position: absolute;
background-color: deeppink;
width: 20px;
height: 20px;
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: 10000;
border-radius: 100%;
}
(document) .mousemove(function(e) { (’.your-cursor4’)
.eq(0)
.css({
left: e.pageX,
top: e.pageY
});
});
$(document).on(“mousemove”, function(e) {
mouseX = e.pageX;
mouseY = e.pageY;
});
`


#6

You seem to be using css and javascript to customize your cursor.

The css goes in the <style> tag in the head section and the javascript should be wrapped in a<script> tag before the end of the </body> tag like so:

head part:

<style>
    * {
      cursor: none;
    }
    .your-cursor {
      position: absolute;
      background-color: deeppink;
      width: 20px;
      height: 20px;
      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: 10000;
      border-radius: 100%;
    }
</style>

Body part:

<script>
    (document) .mousemove(function(e) { (’.your-cursor4’)
    .eq(0)
    .css({
    left: e.pageX,
    top: e.pageY
    });
    });
    $(document).on(“mousemove”, function(e) {
    mouseX = e.pageX;
    mouseY = e.pageY;
    });
</script>

But it seems your javascript isn’t complete. Where did you get the code from ? Also, sometimes some javascript code require you to implement a path to a specific framework like jQuery for example as I see some of your code uses the $ sign.

To implement a framework within webflow, you should it’s path (jQuery for example) in the begining of the body tag like so:

<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>

I have made a codepen for you to see visually the result of the code. As you can see, the javascript part isn’t complete : https://codepen.io/anthonysalamin/pen/bQPLLx


#7

Hey @anthonysalamin, thanks I added the jQuery path, but it’s still not working. I copied the code from the following example: https://creativesfeed.com/custom-cursor-styling/

Not sure why it should be incomplete. There’s also a webflow website using this exact same custom cursor: https://www.niccolomiranda.com/

Maybe that helps? Thanks a lot!


#8

Hi @jensvahle,

I have rebuild in codepen the example you’re looking at in the page you mentionned. If you want to use the more complex animation they are talking about at the end of the article, you’ll have to use another library in addition to the jQuery one which is called tweenmax. You’ll need to include it aswell if you’d like your custom cursor to work properly with custom animation.

Codepen link

If you wish to use the pink cursor from the example you shared with us, follow the setps bellow to implement it on Webflow:

head tag:

* {
  cursor: none;
}

.your-cursor {
  position: absolute;
  background-color: deeppink;
  width: 20px;
  height: 20px;
  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: 10000;
  border-radius: 100%;
}

before the end of the Body tag:

jQuery framework:

 <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>

html markup for your cursor:

<div class='your-cursor'></div>

javascript to initialize your cursor:

$(document).mousemove(function(e) {
  $(".your-cursor")
    .eq(0)
    .css({
      left: e.pageX,
      top: e.pageY
    });
});
$(document).on("mousemove", function(e) {
  mouseX = e.pageX;
  mouseY = e.pageY;
});

(don’t forget to wrap your javascript in a <script> tag)


#9

… or you can use this codepen that uses the tweenmax idea suggested in your article :slight_smile:
You just need to copy the code (HTML, CSS & JS) from my codepen into the previously mentioned custom code area of your Webflow project. Hope that helps :wink: