I'm attempting to integrate code from a website into my project, but encountered an error when the particles failed to run after adding it. I downloaded and installed particle.js from "https://github.com/marcbruederlin/particles.js/issues" for this purpose. I am not sharing my CSS as I believe it is irrelevant for you, and also, Stackoverflow restricts me from sharing excessive amounts of code.
/* Acknowledgements:
Matrix - Particles.js;
SliderJS - Ettrics;
Design - Sara Mazal Web;
Fonts - Google Fonts
*/
window.onload = function () {
Particles.init({
selector: ".background"
});
};
const particles = Particles.init({
selector: ".background",
color: ["#03dac6", "#ff0266", "#000000"],
connectParticles: true,
responsive: [
{
breakpoint: 768,
options: {
color: ["#faebd7", "#03dac6", "#ff0266"],
maxParticles: 43,
connectParticles: false
}
}
]
});
class NavigationPage {
constructor() {
this.currentId = null;
this.currentTab = null;
this.tabContainerHeight = 70;
this.lastScroll = 0;
let self = this;
$(".nav-tab").click(function () {
self.onTabClick(event, $(this));
});
$(window).scroll(() => {
this.onScroll();
});
$(window).resize(() => {
this.onResize();
});
}
onTabClick(event, element) {
event.preventDefault();
let scrollTop =
$(element.attr("href")).offset().top - this.tabContainerHeight + 1;
$("html, body").animate({ scrollTop: scrollTop }, 600);
}
// rest of the JavaScript code...
new NavigationPage();
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="style.js"></script>
</head>
<body>
<sectio class="nav">
<!-- HTML content for navigation tabs -->
</sectio>
<main class="main">
<!-- HTML content for main sections -->
</main>
<canvas class="background"></canvas>
<script src="node_modules\particlesjs\dist/particles.min.js"></script>
</body>
</html>