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


Dram's guide to custom cursors in Webflow
#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!


#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:


#10

Hey @anthonysalamin,

just tested this. I got it to work, but the following dots won’t size down. Do you have any idea why this is the case?

Here’s my share link:

https://preview.webflow.com/preview/jensvahle?utm_source=jensvahle&preview=843491fb899e52c39303f84d2bacbb7d

Thanks a lot!


#11

Hi @jensvahle,

The javascript code from my codepen is not suposed to get the trail smaller.
The code was taken from the example you suggested me. If you d’like to have the following dots sizing down, you’ll need to write some more javascript.

Between, from the link you shared we can not access the custom code you implemented in the project settings custom code section unfortunately :wink:


#12

Hey @anthonysalamin,

you can access it via page settings I think. However here’s the code I’ve been using:

head part:

*{
cursor: none;
}
.your-cursor {
position: absolute;
height: 15px;
width: 15px;
transform: translateX(-50%) translateY(-50%);
border-radius: 50%;
user-select: none;
pointer-events: none;
}
.your-cursor {
background-color: gold;
z-index: 5;
}
.your-cursor:nth-child(2) {
background-color: gold;
z-index: 10;
width: 20px;
height: 20px;
}
.your-cursor:nth-child(3) {
background-color: gold;
z-index: 7;
width: 6px;
height: 6px;
}

body part:
src=“https://code.jquery.com/jquery-3.3.1.min.js” integrity=“sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=” crossorigin=“anonymous”>

(document) .mousemove(function(e) { (’.your-cursor’)
.eq(0)
.css({
left: e.pageX,
top: e.pageY
});
setTimeout(function() {
('.your-cursor') .eq(1) .css({ left: e.pageX, top: e.pageY }); }, 400); setTimeout(function() { (’.your-cursor’)
.eq(2)
.css({
left: e.pageX,
top: e.pageY
});
}, 200);
});
$(document).on(“mousemove”, function(e) {
mouseX = e.pageX;
mouseY = e.pageY;
});

I used the code from example 4: https://creativesfeed.com/code/custom-cursors/index4.html

Best,
Jens


#13

Ho I see, you wrote on the page’s custom code section :slight_smile:
If you wish to have this custom cursor effect, it would be better to later on copy your custom code onto the project’s main custom code section so that every pages of your website inherit that very custom cursor… otherwise you’ll have to duplicate the custom code for every page you create.

Your cursor looks pretty fine on my end. I have copied exactely your code on a codepen to have a better look; the trail is indeed made of smaller dots.

PS: If I am not mistaken, you do not need to embed the jQuery script as it is integrated by default by Webflow when you publish your site. I would remove it and see if that helps.

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