AnnaNeedsHelp Posted July 20, 2022 Share Posted July 20, 2022 Site URL: https://reindeer-gecko-2nnz.squarespace.com/config/ Hey there! I'm brand new to coding and really having fun with it but getting over my head trying to make a custom cursor. I can't stop thinking about this cursor: https://codepen.io/jeangontijo/pen/pxojrg The link includes its CSS code, but when I plug it into "Custom CSS" or "Header Code Injection", it doesn't seem to change anything. Can someone help me? Please and thank you, Anna Link to comment
tuanphan Posted July 21, 2022 Share Posted July 21, 2022 It is SCSS, you need to click arrow > View Compiled CSS > Then copy & Add to Custom CSS * { padding: 0; margin: 0; border: 0; outline: 0; } body { cursor: none; width: 100vw; height: 100vh; } .box { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; } .box p { background: red; padding: 10vmin; font-size: 10vmin; font-family: "Helvetica Neue", Helvetica, sans-serif; font-weight: bold; line-height: 1; } #gooey { display: none; } .cursor { position: absolute; filter: url("#goo"); mix-blend-mode: difference; } .cursor div { box-sizing: border-box; position: absolute; pointer-events: none; } .cursor div svg { position: absolute; width: 100%; height: 100%; } .cursor div svg circle { fill: red; } .lerpme { box-sizing: border-box; position: absolute; pointer-events: none; } .lerpme svg { position: absolute; width: 100%; height: 100%; } .lerpme svg circle { fill: red; } #el1 { width: 3px; height: 3px; } #el2 { width: 6px; height: 6px; } #el3 { width: 9px; height: 9px; } #el4 { width: 12px; height: 12px; } #el5 { width: 15px; height: 15px; } #el6 { width: 18px; height: 18px; } #el7 { width: 21px; height: 21px; } #el8 { width: 24px; height: 24px; } #el9 { width: 27px; height: 27px; } With JS box, add to Code Injection > Footer <script> // Variables var mouseX = 0; var mouseY = 0; var mouseMoved = false; // LERP || Linear Interpolation function lerp(A, B, t) { // A = Starting position // B = Final position // t = time or percentage A and B i.e. 0.0 to 1.0 return A + t * (B - A); } // Mouse Events function handleMouseMove() { mouseMoved = true; mouseX = event.clientX; mouseY = event.clientY; } document.onmousemove = handleMouseMove; // Construct Transform function setTransform(element, dx, dy) { var transform = "translateX(" + (dx) + "px) translateY(" + (dy) + "px)"; element.style.transform = transform; } // Tracking function followMouse(element, t) { // Determine Start Position var startX = element.getBoundingClientRect().left; var startY = element.getBoundingClientRect().top; // Determine End Position var targetX = mouseX - element.offsetWidth / 2; var targetY = mouseY - element.offsetHeight / 2; // Determine LERP position var newX = lerp(startX, targetX, t); var newY = lerp(startY, targetY, t); // Set Position using Transforms setTransform(element, newX, newY); } // Set Position function setPosition(element, target) { // Determine Position var targetX = target.offsetWidth / 2 - element.offsetWidth / 2; var targetY = target.offsetHeight / 2 - element.offsetHeight / 2; // Set Position using Transforms setTransform(element, targetX, targetY); } window.requestAnimationFrame(draw); // Initial 'draw' call function draw() { if (mouseMoved) { followMouse(el1, 0.1); followMouse(el2, 0.2); followMouse(el3, 0.3); followMouse(el4, 0.4); followMouse(el5, 0.5); followMouse(el6, 0.6); followMouse(el7, 0.7); followMouse(el8, 0.8); followMouse(el9, 1); } window.requestAnimationFrame(draw); // 'draw' calls itself so it can keep drawing without firing again. } // Handle Load window.onload = function() { var el1 = document.getElementById("el1"); var el2 = document.getElementById("el2"); var el3 = document.getElementById("el3"); var el4 = document.getElementById("el4"); var el5 = document.getElementById("el5"); var el6 = document.getElementById("el6"); var el7 = document.getElementById("el7"); var el8 = document.getElementById("el8"); var el9 = document.getElementById("el9"); var viewport = document.body; // Set Initial Positions setPosition(el1, viewport); setPosition(el2, viewport); }; </script> <svg id="gooey" xmlns="http://www.w3.org/2000/svg" version="1.1" width="800"> <defs> <filter id="goo"> <feGaussianBlur in="SourceGraphic" stdDeviation="6" result="blur" /> <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 35 -15" result="goo" /> <feComposite in="SourceGraphic" in2="goo" operator="atop"/> </filter> </defs> </svg> <div class="cursor"> <div id="el1"><svg viewBox="0 0 10 10"><circle cx="5" cy="5" r="4"/></svg></div> <div id="el2"><svg viewBox="0 0 10 10"><circle cx="5" cy="5" r="4"/></svg></div> <div id="el3"><svg viewBox="0 0 10 10"><circle cx="5" cy="5" r="4"/></svg></div> <div id="el4"><svg viewBox="0 0 10 10"><circle cx="5" cy="5" r="4"/></svg></div> <div id="el5"><svg viewBox="0 0 10 10"><circle cx="5" cy="5" r="4"/></svg></div> <div id="el6"><svg viewBox="0 0 10 10"><circle cx="5" cy="5" r="4"/></svg></div> <div id="el7"><svg viewBox="0 0 10 10"><circle cx="5" cy="5" r="4"/></svg></div> <div id="el8"><svg viewBox="0 0 10 10"><circle cx="5" cy="5" r="4"/></svg></div> <div id="el9"><svg viewBox="0 0 10 10"><circle cx="5" cy="5" r="4"/></svg></div> </div> Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
AnnaNeedsHelp Posted July 21, 2022 Author Share Posted July 21, 2022 Thank you for your response. I'm still a bit lost. You're saying I add the first (CSS) code custom CSS and then add the 2nd posted code to a JS box (??) or the Footer Injection section? Is JS box something I add to the Footer Injection box or do I add a code block somewhere? Link to comment
tuanphan Posted July 22, 2022 Share Posted July 22, 2022 First to Design > Custom CSS Second to Code Injection Footer Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
AnnaNeedsHelp Posted July 24, 2022 Author Share Posted July 24, 2022 @taunphan Still not working 😞 The mouse disappears when it's not hovering over an element but is still the finger pointer. Any suggestions? Link to comment
tuanphan Posted July 26, 2022 Share Posted July 26, 2022 On 7/20/2022 at 1:04 PM, AnnaNeedsHelp said: Site URL: https://reindeer-gecko-2nnz.squarespace.com/config/ Hey there! I'm brand new to coding and really having fun with it but getting over my head trying to make a custom cursor. I can't stop thinking about this cursor: https://codepen.io/jeangontijo/pen/pxojrg The link includes its CSS code, but when I plug it into "Custom CSS" or "Header Code Injection", it doesn't seem to change anything. Can someone help me? Please and thank you, Anna Your site is private. Can you setup an access password? We can see easier AnnaNeedsHelp 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
AnnaNeedsHelp Posted July 28, 2022 Author Share Posted July 28, 2022 I've made it public for now. Link to comment
tuanphan Posted July 30, 2022 Share Posted July 30, 2022 On 7/28/2022 at 8:23 AM, AnnaNeedsHelp said: I've made it public for now. Hi. It looks like you removed the code. Can you add it? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care 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