Changing text color under circle following cursor

Question

I need to change color of text under circle that follows mouse cursor.

I coded circle to follow cursor but I don't know how I can change color of text under the circle. I would like color to be changed to background color of header.

My code:

$(document).ready(function() {

  var mouseX = 0, 
      mouseY = 0,
      xp = 0, 
      yp = 0;
      
  $("header").mousemove(function(e) {
    mouseX = e.pageX - 30;
    mouseY = e.pageY - 30;
    
    xp += ((mouseX - xp)/6);
    yp += ((mouseY - yp)/6);
      
    $(".circle").css({
      left: xp +'px', 
      top: yp +'px'
    });
  });

});

header {
  background: #800000;
  padding: 100px 20px;
  position: relative;
  overflow: hidden;
}

h1, p { color: #ffffff; }

.circle {
  width: 100px;
    height: 100px;
  background: #ffffff;
  border-radius: 50%;
    position: absolute;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<header>
  <h1>Lorem ipsum</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet illo, iure ipsa excepturi tempora nemo deleniti consequatur dolore dolorem qui.</p>
  <span class="circle"></span>
</header>

score 0 · Answer 1 · answered Jan 13 '21 at 12:01

Use mix-blend-mode: difference; in your .circle class For better inversion effect. use mix-blend-mode: exclusion; in your h1, p

$(document).ready(function() {

  var mouseX = 0, 
      mouseY = 0,
      xp = 0, 
      yp = 0;
      
  $("header").mousemove(function(e) {
    mouseX = e.pageX - 30;
    mouseY = e.pageY - 30;
    
    xp += ((mouseX - xp)/6);
    yp += ((mouseY - yp)/6);
      
    $(".circle").css({
      left: xp +'px', 
      top: yp +'px'
    });
  });

});

header {
  background: #800000;
  padding: 100px 20px;
  position: relative;
  overflow: hidden;
}

h1, p { color: #ffffff; mix-blend-mode: exclusion; }

.circle {
  width: 100px;
    height: 100px;
  background: #ffffff;
  border-radius: 50%;
    position: absolute;
    mix-blend-mode: difference;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<header>
  <h1>Lorem ipsum</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet illo, iure ipsa excepturi tempora nemo deleniti consequatur dolore dolorem qui.</p>
  <span class="circle"></span>
</header>

If you want to control the colors, make sure the colors you choose are completely opposite colors. eg. black background & white text. we cannot of completely custom colors — vineeth pappu, Jan 13 '21 at 12:20

score -1 · Answer 2 · answered Jan 13 '21 at 11:53

Use mix-blend-mode: difference; in your .circle class

$(document).ready(function() {

  var mouseX = 0, 
      mouseY = 0,
      xp = 0, 
      yp = 0;
      
  $("header").mousemove(function(e) {
    mouseX = e.pageX - 30;
    mouseY = e.pageY - 30;
    
    xp += ((mouseX - xp)/6);
    yp += ((mouseY - yp)/6);
      
    $(".circle").css({
      left: xp +'px', 
      top: yp +'px'
    });
  });

});

header {
  background: #800000;
  padding: 100px 20px;
  position: relative;
  overflow: hidden;
}

h1, p { color: #ffffff; }

.circle {
  width: 100px;
    height: 100px;
  background: #ffffff;
  border-radius: 50%;
    position: absolute;
    mix-blend-mode: difference;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<header>
  <h1>Lorem ipsum</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet illo, iure ipsa excepturi tempora nemo deleniti consequatur dolore dolorem qui.</p>
  <span class="circle"></span>
</header>

While this is a nice feature, it doesn't answer the question: Circle should be white and thext should be #800000 — yunzen, Jan 13 '21 at 11:59

Changing text color under circle following cursor

2 Answers2