fadeOut on entering page

Question

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.

Please see [How to Ask](http://stackoverflow.com/questions/how-to-ask) and [The perfect question](http://codeblog.jonskeet.uk/2010/08/29/writing-the-perfect-question/). — Michael Schwartz, May 17 '16 at 19:03

metarmask · Accepted Answer · 2016-05-18T08:16:14.773

1

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.

edited May 18 '16 at 08:16

answered May 17 '16 at 19:15

metarmask

1,747
1
16
20

Ohoh so sorry metarmask for my earlier remarks. This was my fault and your code is super. I only did not put it after all my content (found this strange...). Now I have done this and without any change to your code, everything runs perfectly just as I needed it. Only needed to change the time. Thank you real much! Do you know whether it is rather good browser-compatible? It works on my recent IE and google chrome and Firefox. – Betibu May 17 '16 at 20:21
Users won't be able to interact with the page on [browsers which don't support the `pointer-events` attribute](http://caniuse.com/#feat=pointer-events). Browsers which don't support `animation` won't show the mist. – metarmask May 17 '16 at 20:28
Ok thank you. I looked it up for both and it is rather well supported, not older IE e.g., as foreseen. It won't harm, as people just won't see it. Thank you! – Betibu May 17 '16 at 20:46
It will be harmful because users won't be able to click/scroll through the mist without the `pointer-events` attribute. You'll have to hide it with `display: none` if you care about those users using something [like this](http://stackoverflow.com/a/27315792/4245061). – metarmask May 17 '16 at 20:58
Strange, for I can scroll through the page while there is mist fading out, and I do have this pointer. I deleted the script 'pointer-events: none' and it made no difference. There was no difference between slow or fast fading either, the pointer remained. Perhaps the page gets a pointer as soon as the fading begins, which means from the very first second? Anyway, my fading does not last very long (six seconds), just enough to see the mist before it has vanished. – Betibu May 17 '16 at 21:14
`pointer-events` doesn't remove the pointer. Even though the mist has 0 opacity it is still clickable which means you won't be able to scroll and click. Try copying the updated snippet to an answer and removing the pointer-events attribute and click the button. You won't be able to. – metarmask May 18 '16 at 08:19

score 0 · Answer 2 · answered May 17 '16 at 19:10

To create the mist, create a div at the top of your HTML document with the styles

background-color:"grey"; width:100%; height:100%; position:fixed

To fade it out using jQuery, you can do

$(document).ready($("ID_OF_MIST").fadeOut(FADE_TIME))

This will start the fade as soon as the page loads.

score 0 · Answer 3 · answered May 17 '16 at 19:16

<style>
   .yourmist {background-color:#bca; width:200px; border:1px solid green;}
  </style>

<div class="yourmist">  </div>
 <script type = "text/javascript" language = "javascript">

         $(document).ready(function() {

               $(".yourmist ").fadeOut( 'slow', function(){ 
                  $(".log").text('Fade Out Transition Complete');
            });

         });

      </script>

fadeOut on entering page

3 Answers3