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?