How can call a selected class on window.onload

Question

I have made a simple javascript which during window.onload fades in the body when finished.

I want to create an overlay with a specific class instead which shall do the reverse. I want the overlay to simply fade out and after the animation the object would be destroyed or set as display:none.

<style>
 body {
  opacity: 0;
  transition: opacity 500ms ease-in-out;
  }
</style>
<script>window.onload = function() {setTimeout(function(){document.body.style.opacity="100";},500);};</script>

How to accomplish this in the best way possible?

score 0 · Answer 1 · answered Jul 07 '15 at 11:56

You asked with a jQuery tag so i anwser you with a jQuery code.

$(function() {
    var $overlay = $('#overlay');
  
    $overlay.css('opacity', 0);
  
    setTimeout(function() {
       $overlay.remove();
    }, 500);
});

#overlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: white;
    transition: opacity 500ms;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text   
</div>

<div id="overlay"></div>

score 0 · Answer 2 · edited May 23 '17 at 10:26

You can achieve this by adding a class to <body> on load and defining any styles and transitions in CSS.

While this technique ensures inheritance throughout your document, enabling any number of solutions, the most straightforward is to utilise an :after pseudo element on your <body>:

window.onload = function () {
  
  // add a 'ready' class once the window has loaded
  document.body.classList.add("ready");
};

body {
  background: red;
  color: white;
  text-align: center;
}

/* this creates your overlay without unnecessary HTML markup */
body::after {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: white;
}

/* transition the overlay out when body has a 'ready' class */
body.ready::after {
  opacity: 0;
  visibility: hidden;
  
  /* transitioning visibility to "hidden" allows a seamless opacity transition */
  transition-property: opacity, visibility;
  
  /* Set your animation duration here */
  transition-duration: 0.4s;
}

<h1>Awesome content</h1>

Sidenote: To allow for users without javascript enabled (who would otherwise see a blank screen), you might also consider allowing a 'no-js' class on <html> (replaced with 'js' in your <head>). Your css pseudo declaration would then be: html.js body::after{...}. More info: What is the purpose of the HTML "no-js" class?

How can call a selected class on window.onload

2 Answers2