Betibu Betibu - 1 year ago 96
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.


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

document.querySelector("button").addEventListener("click", function(){
  document.querySelector("div").textContent = "Click! (" + + ")";
@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>
<div id="mist"></div>

Make sure the mist has the highest z-index.