Betibu Betibu - 6 months ago 31
Javascript Question

fadeOut on entering page

I would like to have a 'mist' that covers the whole page when one opens the page, and then the mist disappears and slowly the page becomes visible and remains visible.
I thought to realise this with an id wrapper and give this a grey background and a z-index 3 so you do not see what is behind - this does not work, one does see the container & content. So I already do not know how to create the mist.
Then, I thought to work with fadeOut in jQuery to make the mist disappear, but how?
Thanks beforehand for your help.

Answer

You can do it with just CSS using the animation attribute:

document.querySelector("button").addEventListener("click", function(){
  document.querySelector("div").textContent = "Click! (" + Date.now() + ")";
});
@keyframes fade {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

#mist {
  animation: fade 3s;
  background: lightgray;
  opacity: 0;
  /* Makes click and scroll events ignore the mist */
  pointer-events: none;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  z-index: 9001;
}
<div>Content, content, content</div>
<button>Click</button>
<div id="mist"></div>

Make sure the mist has the highest z-index.