How can I prevent my javascript code from freezing when I click a link on my website?
I’m developing a website and there is a nice JS animation on the background of the home page header. The problem is that whenever I click a link on the navbar or anywhere else that JS code freezes (freezing the animation) for about a second and then the site takes you to where you clicked.
How can I prevent this from happening?
You can find the website here:
(It might take a little time to load since heroku allocated limited resources for sites not visited often.)
HTML:
<html lang="en"> <head> <!--Bootstrap Css--> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> </head> <body style="background-color: #000"> <!-- START NAVBAR --> <nav class="navbar navbar-expand-lg fixed-top custom-nav sticky"> <div class="container"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation"> <i class="mdi mdi-menu"></i> </button> <div class="collapse navbar-collapse" id="navbarCollapse"> <ul class="navbar-nav ml-auto"> <li class="nav-item active"> <a href="#" class="nav-link">Home</a> </li> <li class="nav-item"> <a href="/faq" class="nav-link">FAQ</a> </li> </ul> </div> </div> </nav> <!-- END NAVBAR --> <!--START HOME--> <section class="h-100vh" id="home"> <div class="bg-overlay"></div> <div class="home-table"> <div class="home-table-center"> </div> </div> <!-- Cool Background Particle Effect --> <canvas class="particles-js-canvas-el" style="width: 100%; height: 100%; position: absolute;"></canvas> </div> </section> <!-- END HOME --> <!--PARTICLES ANIMATE JS--> <script src="js/particles.js"></script> <script src="js/particles.app.js"></script> </body> </html> JAVASCRIPT: The code exceeds the post limit. You can find it at https://github.com/VincentGarreau/particles.js/.
particles.js contains the actual code for particle motion and particles.app.js just contains a function call with a bunch of parameters.
