Can i change the style of specific area in body html with javascript?-CodePudding

I was inspired by an intro logo and want to try implementing it in the website UI. However the more i tried, the more i realized i was just a beginner in website.

This is the image

function getCursorPosition(event) {
  let x = event.clientX;
  let y = event.clientY;

  document.body[x:y].style.filter = blur("0px");
}

This is my code. Can I change the style of specific areas of body html with javascript based on mouse movement?

My expectation is that the body of the website page has filter = blur(5px). So that the specific area reached by the cursor will change its style to filter = blur(0px). Is that possible?

CodePudding user response：

What you can do is to cover your content area with some elements, leave one of them (at the position of your mouse cursor) transparent and the rest elements that surround transparent element you may blur.

Also, changing the DOM on every mousemove (which may be like 200 times per second) is not a good idea. Therefore, you need to do it no more than once for every ~16ms (which is 60fps), otherwise you'll get "junk" frames and laggy behavior. Luckily, you can use requestAnimationFrame() for this purpose.

Here is an example of how you can do it (you can also run this snippet with blue button below to see the results live):

window.addEventListener('DOMContentLoaded', () => {
  const blurEl = document.querySelector('.blur');
  let curX, curY, isRenderScheduled = false;
  blurEl.addEventListener('mousemove', ({x,y}) => {
      curX = x;
      curY = y;
      if(!isRenderScheduled) {
        isRenderScheduled = true;
        requestAnimationFrame(() => {
          blurEl.setAttribute('style', `--x:${curX}px;--y:${curY}px`);
          isRenderScheduled = false;
        });
      }
  });
});

.content {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  display: grid;
  place-content: center;
}
.blur {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: stretch;
}
.blur > div {
  display: flex;
  flex-direction: column;
}
.blur:before,
.blur:after,
.blur > div:before,
.blur > div:after {
  content: '';
  backdrop-filter:blur(5px);
  flex-grow: 1;
  flex-shrink: 1;
}
.blur:before {
  min-width: var(--x, auto);
  max-width: var(--x, auto);
}
.blur > div:before {
  min-height: var(--y, auto);
  max-height: var(--y, auto);
}
.transparent {
  flex-grow: 0;
  flex-shrink: 0;
  width: 50px;
  height: 50px;
  border: 1px solid silver;
}

<div > 
  <h1>This is the content</h1>
  <div  style="--x:auto;--y:auto;">
    <div>
      <div ></div>
    </div>
  </div>
</div>

Note: I used CSS variables on .blur element, just because it's not possible to add inline style for pseudo-elements (:before, :after). If you prefer to use normal elements, you don't need CSS variables.

CodePudding user response：

See Document.elementFromPoint()

document.elementFromPoint(x, y);

If you're trying to find multiple elements see Document.elementsFromPoint()

CodePudding user response：

Maybe it's not the best option, because it probably has several usability problems, but adding a blurred div with a frame-shaped clip-path (https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path) and setting its position everytime the mouse moves could do the trick.

The div is blurred, but it's empty on the middle because the clip-path value, so you can interact with the body content throw it.

HTML

<body onm ousemove="getCursorPosition(event)">
  <div id="blur" ></div>
  <div id="kocak">
    <span>My Website</span>
    <div >The X cursor position is: <span id="cursor-position-x"></span>.</div>
    <div >The Y cursor position is: <span id="cursor-position-y"></span>.</div>
  </div>
</body>

Javascript

function getCursorPosition(event) {
  document.getElementById("cursor-position-x").textContent = event.clientX;
  document.getElementById("cursor-position-y").textContent = event.clientY;
  document.getElementById("blur").style.left = event.clientX;
  document.getElementById("blur").style.top  = event.clientY;
}

CSS

.body {
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.blur {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200%;
  height: 200%;
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(3px);
  clip-path: polygon(0% 0%, 0% 100%, 45% 100%, 45% 45%, 55% 45%, 55% 55%, 45% 55%, 45% 100%, 100% 100%, 100% 0%);
  transform: translate(-50%, -50%);
}