If you're looking to create a three-page single scrolling webpage with particlesJS as the background, consider using the following resources: particlesJS Website and particlesJS Github Page.
An issue arises when trying to set particlesJS as the background for the first page, as it causes alignment problems for paragraphs on medium and large screens. There is a JSFiddle available here that can help troubleshoot this problem. Below is a snippet of the relevant JavaScript and CSS code:
$('a.page-scroll').on('click', function(event) {
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top - 30
}, 1000);
event.preventDefault();
});
particlesJS("particles-js", {
"particles": {
// particle settings here...
},
"interactivity": {
// interactivity settings here...
},
// more settings here...
});
* {
// CSS rules here...
}
#page1 {
// CSS rules for page 1...
}
// More CSS rules...
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<!-- Navbar markup here -->
</div>
</nav>
<div>
// HTML markup for the three pages...
</div>