How can I make a circular clip-mask that follows the mouse?

Question

I have a webpage that contains korean text and I would like to make it so that there is a circular clip-mask that follows the cursor so that when the clip-mask is over the korean text, the english translation is revealed underneath. I have some code so far, but I'm not sure how to get the whole thing working. How might I achieve this? An example of this effect is here, but I'm not sure how they got the effect. There is also an error in the code, and I'm not sure what it is.

Code:

jQuery(document).ready(function(){
   $('.hero').mousemove(function(e){
     var rXP = (e.pageX - this.offsetLeft-$(this).width()/2);
     var rYP = (e.pageY - this.offsetTop-$(this).height()/2);
     $('.hero').css('text-shadow', +rYP/10+'px '+rXP/80+'px rgba(227,6,19,.8), '+rYP/8+'px '+rXP/60+'px rgba(255,237,0,1), '+rXP/70+'px '+rYP/12+'px rgba(0,159,227,.7)');
   });
    $('.hiddenhero').mousemove(function(e){
     var rXP = (e.pageX - this.offsetLeft-$(this).width()/2);
     var rYP = (e.pageY - this.offsetTop-$(this).height()/2);
     $('.hiddenhero').css('text-shadow', +rYP/10+'px '+rXP/80+'px rgba(227,6,19,.8), '+rYP/8+'px '+rXP/60+'px rgba(255,237,0,1), '+rXP/70+'px '+rYP/12+'px rgba(0,159,227,.7)');
   });
});

window.onload = function(){
               var bsDiv = document.getElementById("herocircle");
               var x, y;
               window.addEventListener('mousemove', function(event){
                   x = event.clientX;
                   y = event.clientY;                    
                   if ( typeof x !== 'undefined' ){
                       bsDiv.style.left = x + "px";
                       bsDiv.style.top = y + "px";
                   }
               }, false);
           }

@import url('https://fonts.googleapis.com/css?family=Black+Han+Sans');

html {
  align-items: center;
  background: #fcf8f2;
  overflow-y: hidden;
  overflow-x: hidden;
}
.herocontainer {
  height: 1920px;
  width: 1080px;
  clip-path: url(#heroclip);
}
.hero {
  color: black;
  font-family: "Black Han Sans", sans-serif;
  font-size: 100px;
  transform: skew(-7deg, -7deg);
  position: absolute;
  text-align: center;
  left: 40%;
  top: 20%;
}
.herop {
  display: inline-block;
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>History</title>
    <link href="main.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
  <defs>
    <svg>
      <clipPath id="heroclip">
        <circle cx="100" cy="100" r="125" stroke="transparent" stroke-width="3" fill="transparent"/>
      </clipPath>
    </svg>   
  </defs> 
  <div id="herocontainer">
      <div class="hero">
        <p class="herop">대한민국</p>
      </div>
    </div>
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="script.js"></script>
  </body>
</html>

this may give you some ideas : https://stackoverflow.com/questions/49793312/invert-text-color-on-mouse-hover/49793884#49793884 — Temani Afif, Dec 10 '18 at 21:32
@TemaniAfif https://history--jodastt.repl.co/ here is my result: what is wrong? — Jodast, Dec 10 '18 at 21:45
your are almost good, the JS is working fine but the values aren't correct, will try to figure out the issue — Temani Afif, Dec 11 '18 at 01:49
@TemaniAfif I have it partially working, but the circle has been moved up and right relative to the cursor. Any idea why? — Jodast, Dec 11 '18 at 16:59
here is : https://jsfiddle.net/y9wx4oa6/ .. the transform was making the thing not easy — Temani Afif, Dec 11 '18 at 19:45
@TemaniAfif nice, it works, but why is it still offset? I can't figure out why. — Jodast, Dec 12 '18 at 01:33
because of the skew, the calculation is done before the skew and since the skew is a visual effect it will be done after the calculation ... so you may need to ajdust the Y a bit to get the correct value but it will be tricky to do — Temani Afif, Dec 12 '18 at 01:36
Is there any way to do the skew before the calculation? @TemaniAfif — Jodast, Dec 12 '18 at 01:53

How can I make a circular clip-mask that follows the mouse?

0 Answers0