Question 172165 in Html Question posted in
Some basic documentation can be found here.

Can HTML blur an entire website when focus is lost?

Trying to blur website when webpage loses focus. I tried using OnBlur and Focusin/out

I tried using OnBlur with the body tag, the html tag. I tried even listeners, a bunch of different JS, and other stuff.

I’m trying to make it so my website fades into a gaussian-like blur with some text that says something like “come baaaackkk :(“ or something stupid like that

Tags:

2

Answers


  1. 0

    you will need to use the visibilitychange event for this. Try the code below:

    const pageTitle = document.title;

document.addEventListener("visibilitychange", () => {
  if (document.hidden) {
    const blurredDiv = document.createElement("div");
    blurredDiv.id = "blur";
    blurredDiv.innerHTML = "<h1>Come Back :(</h1>";
    document.body.appendChild(blurredDiv);
    document.title = "Come Back :(";
  } else {
    setTimeout(() => {
      const blurredDiv = document.getElementById("blur");
      blurredDiv.parentNode.removeChild(blurredDiv);
      document.title = pageTitle;
    }, 1000);
  }
});

    The document.hidden checks if the tab is open, but not visible.
    You don’t need the setTimemout function, but I added it there so you can see it in action, and the overlay doesn’t get removed instantly.

    and the corresponding css:

    #blur {
  z-index: 9999;
  background: rgb(255, 255, 255, 0.2);
  backdrop-filter: blur(3px);
  
  position: fixed;
  top: 0;
  left: 0;
  
  height: 100vh;
  width: 100vw;
  /* For the h1 inside this div */
  display: grid;
  place-items: center;
}

    If you want to see this in working take a better look at this codepen

    Login or Signup to reply.
  2. 0

    This is a simple solution that uses CSS only.
    Feel free to modify it to your needs

    blurred {
  filter: blur(2px);
}

html:hover blurred {
  filter: blur(0)
}

html:hover unblurred {
  opacity: 0;
}

unblurred {
  opacity: 1;
}
    <body>
  <blurred>
    This will get blurred
  </blurred>
  <unblurred>
    This will appear not blurred
  </unblurred>
</body>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search