0

Particle.js works perfectly when the preloader isn't applied. But after I apply the preloader, the particles aren't visible anymore.

preloader.js has:

function showPage(){
  // Hide the preloader
  document.querySelector(".preloader-wrap").style.display = "none";
  // Show the main contents
  document.querySelector("#mainPage").removeAttribute("hidden");;
}

style.css has:

#particles-js{
  width: 100%;
  height: 100%;
  position:absolute;
  background: linear-gradient(45deg, #3d3d3d, #000000);
  z-index: -1;
}
.headwrap{
  margin: auto;
  height: 50vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
 }
.preloader-wrap{
    height: 100vh;
    width: 100vw;
    position: absolute;
    top: 0;
    left: 0;
    display:flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
  }

And index.html contains:

<html>
<head><link rel="stylesheet" type ="text/css" href="style.css"></head>
<body onload="showPage()">
    <!-- Preloader -->
    <div class="preloader-wrap">
      <span class="loader">
        <span class="loader-inner"></span>
      </span>
    </div>
    <!-- Main Page -->
  <span id="mainPage" hidden>
     <div id="particles-js"></div>
      <div class="headwrap">
        <h1>Hello, World</h1>
      </div>
   </span>
<script src="preloader.js"></script>
<script src="particles.js"></script>
</body>
</html>

There's also a preloader animation made using CSS (in style.css itself), but that doesn't seem to be a problem. As long as the hidden attribute isn't used in #mainPage, everything works perfectly.

But, when the when hidden attribute is applied and removed, the particles stop showing up. Otherwise, they work perfectly. Any ideas on what's going on?

Shrid Pant
  • 3
  • 3
  • Are you using `display: none` for `#mainPage`? – Shuvo Feb 03 '21 at 09:47
  • No. I'm using the hidden attribute instead. Tho using `display: none` would probably give the same output. – Shrid Pant Feb 03 '21 at 10:00
  • Remove `hidden` attribute and use `visibility: hidden` instead. – Shuvo Feb 03 '21 at 10:06
  • It does work perfectly! Just that you're able to scroll down and find empty white spaces (while the preloader is running), if you have that much contents on your page. – Shrid Pant Feb 03 '21 at 10:26
  • @Shuvo nevermind. I created a `div` for all the contents except the `particle-js` id, and I set the `display: none` for that *div*. Then, when I change the `visibility` of `#mainPage`, I also perform `display: block` to show the rest of the contents. – Shrid Pant Feb 03 '21 at 10:36

0 Answers0