Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Question

Posted (edited)

Site URL: https://www.kelseyeaton.com/

Hi!

I'm trying to customize my cursor to be a circle that inverts the content inside it.  Just like this website: https://www.satupelkonen.com/ (except the whole images doesn't need to be inverted on hover, just what's inside the circle).

I found this JSFiddle project that does something similar: https://jsfiddle.net/p1ja0n8r/

But I'm not a developer, and am hoping that someone can explain how to do this like I'm five years old. If it's even possible in SquareSpace?

THANK YOUUUU!

 

ScreenRecording.mov

Edited by k3ats

Share this post


Link to post

7 answers to this question

Recommended Posts

  • 0

That's kind of cool.

Anyway, do you have a business account on squarespace? If you do, we can use that jsfiddle code to get you going.


Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Share this post


Link to post
  • 0
47 minutes ago, rwp said:

That's kind of cool.

Anyway, do you have a business account on squarespace? If you do, we can use that jsfiddle code to get you going.

Hey thanks for your reply, I just upgraded!

I'm totally not a developer so any extra explanation you think is helpful is much appreciated!

Share this post


Link to post
  • 0

Try using copy and pasting all of this code into the footer code injection area (directions in my signature on how to do that).

https://jsfiddle.net/pelletr1/x6sqo4nc/20/


Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Share this post


Link to post
  • 0

THIS IS AMAZINGGGG! It totally works! 

For anyone looking to add this you have to add it here on your site (as outlined in rwp's notes):  Settings -> Advanced -> Code Injection

The only thing I changed was the font (see attached screen shot). The new injected code changed my body copy font to "Neutron" and so I changed it back to "Aktiv Grotesk" and tweaked the font weight, line height, etc. in the injected code. 

Screen Shot 2020-07-09 at 12.18.19 PM.png

Share this post


Link to post
  • 0

@k3ats Glad it worked for you. I don't know who originally wrote that code, but with a few small tweaks it looks pretty sharp.

Have a great one.


Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Share this post


Link to post
  • 0

@rwp This is looking great. I've been trying to figure out this exact cursor, but I only have a personal account, not a business. Do you know of any possible way to achieve/approximate this with just CSS?

I made by own 32x32px black dot cursor, and applied it using:

Quote

body { cursor: url(%mycursor%), default; 
}

And that's as far as I got. Thank you in advance!

Share this post


Link to post
  • 0

I don't think it could be done with just CSS


Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...