Custom Cursor See

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

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>

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?

First to Design > Custom CSS

Second to Code Injection Footer

@taunphan

Still not working 😞

The mouse disappears when it's not hovering over an element but is still the finger pointer. 

Any suggestions?

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

I've made it public for now. 

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?