javascript – How to make translucent through text a glow coming from the cursor?

Question:

You need a black background and white text. It also requires a colored glow similar to a radial gradient. It should show through the text, but the black background should be on top of the glow. That is, this color glow should be visible only through the text when the cursor moves to it for a certain distance, and this gradient should be ignored by the background. Unfortunately, I can't provide an example because there isn't one. I don’t know how clear I explained it, so I apologize in advance for the misunderstanding and stupidity of my wording. I will be very glad to any answers. Thanks!

Answer:

Based on the description, you should get the following:

document.querySelector('.wrapper').addEventListener('mousemove', function(ev) {
  this.style.setProperty('--y', `${ev.pageY - this.clientHeight / 2}px`);
  this.style.setProperty('--x', `${ev.pageX - this.clientWidth / 2}px`);
});
body { margin: 0; height: 100vh; background-color: #000f; }

.wrapper {
  height: 100%; width: 100%;
  font: bold 72px/100vh Arial;
  text-align: center;
  color: #fff0; background-color: #ffff;
  background-image: radial-gradient(circle, #ff0f, #ff00 2em);
  background-position: var(--x, 0px) var(--y, 0px);
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
}
<div class="wrapper">BACKLIGHT</div>

For multiple nested text elements:

document.querySelector('.wrapper').addEventListener('mousemove', function(ev) {
  this.style.setProperty('--y', `${ev.pageY - this.clientHeight / 2}px`);
  this.style.setProperty('--x', `${ev.pageX - this.clientWidth / 2}px`);
});
body { margin: 0; height: 100vh; background-color: #000f; overflow: hidden; }

.wrapper {
  height: 100%; width: 100%;
  color: #fff0; background-color: #ffff;
  background-image: radial-gradient(circle, #ff0f, #ff00 30vh);
  background-position: var(--x, 0px) var(--y, 0px);
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  text-align: center;
}

.title { font: bold 72px Arial; margin: .1em; }
.descr { font: bold 22px Arial; margin: .1em; }
.block { font: bold 48px Arial; }
<div class="wrapper">
<h3 class="title">BACKLIGHT</h3>
<p class="descr">Можно добавлять <i>разные</i> текстовые элементы,<br> в рамках элемента <span class="block">wrapper</span> </p>
</div>
Post Views: 21
Scroll to Top