k3ats Posted July 8, 2020 Share Posted July 8, 2020 (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 July 8, 2020 by k3ats Link to comment
rwp Posted July 9, 2020 Share Posted July 9, 2020 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. Link to comment
k3ats Posted July 9, 2020 Author Share Posted July 9, 2020 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! Link to comment
rwp Posted July 9, 2020 Share Posted July 9, 2020 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/ k3ats 1 Link to comment
k3ats Posted July 9, 2020 Author Share Posted July 9, 2020 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. rwp 1 Link to comment
rwp Posted July 9, 2020 Share Posted July 9, 2020 @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. k3ats 1 Link to comment
CPampillonio Posted July 18, 2020 Share Posted July 18, 2020 @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! Link to comment
rwp Posted July 18, 2020 Share Posted July 18, 2020 I don't think it could be done with just CSS Link to comment
LukasEriksen Posted October 27, 2020 Share Posted October 27, 2020 @rwpI would like to get the same cursor for my website, but unfortunately the jsfiddle you posted is no longer available. I have found an alternate code on another squarespace website, but I can't seem to integrate into my website https://www.lukaseriksen.com/. The code I found is as follows: <style> @media (hover: none) { .cursor {display:none !important; } } * { cursor: none; } .cursor { --size: 10px; height: var(--size); width: var(--size); border-radius: 50%; position: absolute; z-index: 99999999999; transform: translate(-50%, -50%); pointer-events: none; } .cursor.cursor-dot { background: #ffffff; /* This defines the color of the cursor */ mix-blend-mode: difference; /* Delete this line if you dont want the circle to invert */ transition: width .6s, height .6s, background-color .6s; transition-timing-function: ease-out; } .cursor-dot.active { --size: 50px; background-color: #ffffff; } </style> <script> $(window).mousemove(function(e) { $(".cursor").css({ left: e.pageX, top: e.pageY }) }); $(window).mousemove(function(e) { $("a") .on("mouseenter", function() { $('.cursor').addClass("active") }) }); $(window).mousemove(function(e) { $("a") .on("mouseleave", function() { $('.cursor').removeClass("active") }) }); </script> Would appreciate any help you could provide! Link to comment
Jprood Posted October 29, 2020 Share Posted October 29, 2020 On 10/26/2020 at 11:02 PM, LukasEriksen said: @rwpI would like to get the same cursor for my website, but unfortunately the jsfiddle you posted is no longer available. I have found an alternate code on another squarespace website, but I can't seem to integrate into my website https://www.lukaseriksen.com/. The code I found is as follows: <style> @media (hover: none) { .cursor {display:none !important; } } * { cursor: none; } .cursor { --size: 10px; height: var(--size); width: var(--size); border-radius: 50%; position: absolute; z-index: 99999999999; transform: translate(-50%, -50%); pointer-events: none; } .cursor.cursor-dot { background: #ffffff; /* This defines the color of the cursor */ mix-blend-mode: difference; /* Delete this line if you dont want the circle to invert */ transition: width .6s, height .6s, background-color .6s; transition-timing-function: ease-out; } .cursor-dot.active { --size: 50px; background-color: #ffffff; } </style> <script> $(window).mousemove(function(e) { $(".cursor").css({ left: e.pageX, top: e.pageY }) }); $(window).mousemove(function(e) { $("a") .on("mouseenter", function() { $('.cursor').addClass("active") }) }); $(window).mousemove(function(e) { $("a") .on("mouseleave", function() { $('.cursor').removeClass("active") }) }); </script> Would appreciate any help you could provide! did u figure this out? where did you paste the codes to get it to work Link to comment
inunzi Posted October 29, 2020 Share Posted October 29, 2020 (edited) On 10/26/2020 at 10:02 PM, LukasEriksen said: @rwpI would like to get the same cursor for my website, but unfortunately the jsfiddle you posted is no longer available. I have found an alternate code on another squarespace website, but I can't seem to integrate into my website https://www.lukaseriksen.com/. The code I found is as follows: <style> @media (hover: none) { .cursor {display:none !important; } } * { cursor: none; } .cursor { --size: 10px; height: var(--size); width: var(--size); border-radius: 50%; position: absolute; z-index: 99999999999; transform: translate(-50%, -50%); pointer-events: none; } .cursor.cursor-dot { background: #ffffff; /* This defines the color of the cursor */ mix-blend-mode: difference; /* Delete this line if you dont want the circle to invert */ transition: width .6s, height .6s, background-color .6s; transition-timing-function: ease-out; } .cursor-dot.active { --size: 50px; background-color: #ffffff; } </style> <script> $(window).mousemove(function(e) { $(".cursor").css({ left: e.pageX, top: e.pageY }) }); $(window).mousemove(function(e) { $("a") .on("mouseenter", function() { $('.cursor').addClass("active") }) }); $(window).mousemove(function(e) { $("a") .on("mouseleave", function() { $('.cursor').removeClass("active") }) }); </script> Would appreciate any help you could provide! The tag “<script>“ means JavaScript, so maybe paste that code into the header or footer code injection. You can find this by clicking Settings-Advanced-Code injection. Let me know how it goes 😁 Edited October 29, 2020 by inunzi Link to comment
inunzi Posted October 29, 2020 Share Posted October 29, 2020 2 minutes ago, inunzi said: The tag “<script>“ means JavaScript, so maybe paste that code into the header or footer code injection. You can find this by clicking Settings-Advanced-Code injection. Let me know how it goes 😁 Also where there more codes to it other than JavaScript? Like HTMlL or Css? Thanks! Link to comment
Jprood Posted October 31, 2020 Share Posted October 31, 2020 On 10/29/2020 at 3:00 PM, inunzi said: Also where there more codes to it other than JavaScript? Like HTMlL or Css? Thanks! thats seems to be the code. ive tried injecting all into my footer and also tried just injecting the script and putting the style into my css custome. but all ive done is make the cursor disapear completely Link to comment
inunzi Posted October 31, 2020 Share Posted October 31, 2020 1 hour ago, Jprood said: thats seems to be the code. ive tried injecting all into my footer and also tried just injecting the script and putting the style into my css custome. but all ive done is make the cursor disapear completely Hmm, may I see all of the codes, or the full code that you are trying to use. Also so there wasn't any html or css code snippets to go with the java script code? Link to comment
inunzi Posted October 31, 2020 Share Posted October 31, 2020 1 minute ago, inunzi said: Hmm, may I see all of the codes, or the full code that you are trying to use. Also so there wasn't any html or css code snippets to go with the java script code? Nevermind the code seemed to work perfectly! I just went on your site, and the cursor was an inverted circle 🙂 Link to comment
Jprood Posted October 31, 2020 Share Posted October 31, 2020 58 minutes ago, inunzi said: Nevermind the code seemed to work perfectly! I just went on your site, and the cursor was an inverted circle 🙂 My site is www.fitaf.co I’m trying to figure out how to implement that above code also. But i can’t seem to get it Link to comment
inunzi Posted October 31, 2020 Share Posted October 31, 2020 5 hours ago, Jprood said: My site is www.fitaf.co I’m trying to figure out how to implement that above code also. But i can’t seem to get it Hmm what issues are you having with the code or inserting it into your site? Like do you not know where to insert the code, or is there another issue? Thanks! Link to comment
Jprood Posted October 31, 2020 Share Posted October 31, 2020 4 hours ago, inunzi said: Hmm what issues are you having with the code or inserting it into your site? Like do you not know where to insert the code, or is there another issue? Thanks! I’ve tried it completely ion code injection in both header and then footer. And I’ve tried it splitting up the style half in css and the script in code injection. Just seems to make my cursor disappear. I thought since my site is white that changing the color of the cursor to black would work but still no dot cursor. That’s kinda where I’m stuck at Link to comment
inunzi Posted October 31, 2020 Share Posted October 31, 2020 8 hours ago, Jprood said: I’ve tried it completely ion code injection in both header and then footer. And I’ve tried it splitting up the style half in css and the script in code injection. Just seems to make my cursor disappear. I thought since my site is white that changing the color of the cursor to black would work but still no dot cursor. That’s kinda where I’m stuck at Hmm, let me try the code on my site to see if there’s any problem there! Link to comment
Jprood Posted November 1, 2020 Share Posted November 1, 2020 13 hours ago, inunzi said: Hmm, let me try the code on my site to see if there’s any problem there! u are amazing. ive even tried changing color to #000 since the example site is black and mine is white. Link to comment
inunzi Posted November 1, 2020 Share Posted November 1, 2020 7 hours ago, Jprood said: u are amazing. ive even tried changing color to #000 since the example site is black and mine is white. I tested the code on my site but nothing changed sadly. May I ask on where you found this code? Link to comment
Jprood Posted November 1, 2020 Share Posted November 1, 2020 1 hour ago, inunzi said: I tested the code on my site but nothing changed sadly. May I ask on where you found this code? https://www.lukaseriksen.com And http://www.minimist.ca Link to comment
inunzi Posted November 1, 2020 Share Posted November 1, 2020 (edited) 1 hour ago, Jprood said: https://www.lukaseriksen.com And http://www.minimist.ca I was asking on where you found the code. Is it the same code above? Edited November 1, 2020 by inunzi Link to comment
Jprood Posted November 2, 2020 Share Posted November 2, 2020 2 hours ago, inunzi said: I was asking on where you found the code. Is it the same code above? Yup it was first thing in this thread and then i saw that the first site took it from minimist.ca and got it to work 🤷🏻♂️ Link to comment
Jprood Posted November 2, 2020 Share Posted November 2, 2020 On 10/26/2020 at 11:02 PM, LukasEriksen said: @rwpI would like to get the same cursor for my website, but unfortunately the jsfiddle you posted is no longer available. I have found an alternate code on another squarespace website, but I can't seem to integrate into my website https://www.lukaseriksen.com/. The code I found is as follows: <style> @media (hover: none) { .cursor {display:none !important; } } * { cursor: none; } .cursor { --size: 10px; height: var(--size); width: var(--size); border-radius: 50%; position: absolute; z-index: 99999999999; transform: translate(-50%, -50%); pointer-events: none; } .cursor.cursor-dot { background: #ffffff; /* This defines the color of the cursor */ mix-blend-mode: difference; /* Delete this line if you dont want the circle to invert */ transition: width .6s, height .6s, background-color .6s; transition-timing-function: ease-out; } .cursor-dot.active { --size: 50px; background-color: #ffffff; } </style> <script> $(window).mousemove(function(e) { $(".cursor").css({ left: e.pageX, top: e.pageY }) }); $(window).mousemove(function(e) { $("a") .on("mouseenter", function() { $('.cursor').addClass("active") }) }); $(window).mousemove(function(e) { $("a") .on("mouseleave", function() { $('.cursor').removeClass("active") }) }); </script> Would appreciate any help you could provide! Hi Lukas. You got this to work!! How and where did u put it. Looks so good i wanna do same please Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment