我正在尝试使用Particle js在本网站的主要英雄部分显示粒子，但是它不起作用

Question

I have a main hero section where I want to create an effect using particle js. I have the particle.js file and the app.js file linked as well as my own main js file but for some reason the particles don't show up. Could it be because of the image that the particles aren't showing? Thanks.

 particlesJS('snowfall', { "particles": { "number": { "value": 80, "density": { "enable": true, "value_area": 800 } }, "color": { "value": "#ffffff" }, "shape": { "type": "circle", "stroke": { "width": 0, "color": "#000000" }, "polygon": { "nb_sides": 5 }, "image": { "src": "img/github.svg", "width": 100, "height": 100 } }, "opacity": { "value": 0.5, "random": false, "anim": { "enable": false, "speed": 1, "opacity_min": 0.1, "sync": false } }, "size": { "value": 5, "random": true, "anim": { "enable": false, "speed": 40, "size_min": 0.1, "sync": false } }, "line_linked": { "enable": true, "distance": 150, "color": "#ffffff", "opacity": 0.4, "width": 1 }, "move": { "enable": true, "speed": 6, "direction": "none", "random": false, "straight": false, "out_mode": "out", "attract": { "enable": false, "rotateX": 600, "rotateY": 1200 } } }, "interactivity": { "detect_on": "canvas", "events": { "onhover": { "enable": true, "mode": "repulse" }, "onclick": { "enable": true, "mode": "push" }, "resize": true }, "modes": { "grab": { "distance": 400, "line_linked": { "opacity": 1 } }, "bubble": { "distance": 400, "size": 40, "duration": 2, "opacity": 8, "speed": 3 }, "repulse": { "distance": 200 }, "push": { "particles_nb": 4 }, "remove": { "particles_nb": 2 } } }, "retina_detect": true, "config_demo": { "hide_card": false, "background_color": "#b61924", "background_image": "", "background_position": "50% 50%", "background_repeat": "no-repeat", "background_size": "cover" } } ); 

 html { font-size: 62.5%; width: 100%; height: 100%; } body { margin: 0; padding: 0; height: 100%; font-size: 1.4rem; } h1 { font-size: 2.4rem; } .container-item { margin: 0 auto 0; } .landing-page-container { width: 100%; min-height: 100%; height: 100vh; background-image: linear-gradient(to right, rgba(230, 230, 230, 0.4), rgba(230, 230, 230, 1)), url(ME.jpg); /* background-position: bottom;*/ background-repeat: no-repeat; background-size: cover; overflow: hidden; display: block; font-family: "Montserrat", sans-serif; color: #09383E; height: 100vh; } .content-wrapper { max-width: 12000px; width: 100%; height: 100%; margin: 0 auto; position: relative; } /*.header {*/ /* width: 100%; height: 2rem; padding: 3rem 0; display: block; */ } .menu-icon { width: 2.5rem; height: 1.5rem; display: inline-block; cursor: pointer; } .header-item { display: inline-block; float: left; } .menu-icon-line { width: 1.5rem; height: .2rem; background: #0C383E; display: block; } .menu-icon-line:before, .menu-icon-line:after { content: ''; width: 1.5rem; height: .2rem; background: #0C383E; display: inline-block; position: relative; } .menu-icon-line:before { left: .5rem; top: -0.6rem; } .menu-icon-line:after { top: -1.8rem; } .heading { width: 90%; font-size: 2rem; font-weight: bold; line-height: 1.7rem; margin: 0 30px; text-align: center; } .social-container { width: 7.25rem; list-style: none; overflow: hidden; padding: 0; margin: 0; float: right; } .social-container .social-icon { width: 1.5rem; float: left; cursor: pointer; } .social-container .social-icon.social-icon-fb { margin-left: 1.5rem; } .social-container .social-icon.social-icon-tw { margin-left: 0; } .social-container .social-icon.social-icon-in .fab { margin: 0 0 .25rem; } .coords { font-size: 1rem; display: inline-block; float: left; position: relative; top: 40%; letter-spacing: .2rem; left: -11.5rem; margin: 0; transform: rotate(-90deg) translateY(50%); } .arrow { width: 50px; position: absolute; margin: 0 auto; left: 50%; top: 65%; transform: translate(-50%, -50%); } .box { position: absolute; top: 65%; left: 50%; transform: translate(-50%, -50%); } .box span { display: block; width: 20px; height: 20px; border-bottom: 3px solid #fff; border-right: 3px solid #fff; transform: rotate(45deg); margin: -10px; /* animation: animate 2s infinite;*/ animation: animate 2s infinite; } .box span:nth-child(2) { animation-delay: -0.2s; /* transform: rotate(45deg) translate(-20px, -20px);*/ } .box span:nth-child(3) { animation-delay: -0.4s; } @keyframes animate { 0% { opacity: 0; transform: rotate(45deg) translate(-20px, -20px); } 50% { opacity: 1; } 100% { opacity: 0; transform: rotate(45deg) translate(20px, 20px); } 0% { opacity: 0; } } .ellipse-container { width; 50rem; height: 50rem; border-radius: 50%; margin: 0 auto; position: relative; top: 7rem; } h2.greeting { text-align: center; font-size: 6.5rem; position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%); } /*NAVBAR*/ .logo { line-height: 60px; position: fixed; float: left; margin: 16px 46px; color: #fff; font-weight: bold; font-size: 20px; letter-spacing: 2px; } nav { position: fixed; width: 100%; line-height: 60px; } nav ul { line-height: 60px; list-style: none; background: rgba(0, 0, 0, 0); overflow: hidden; color: #fff; padding: 0; text-align: right; margin: 0; padding-right: 40px; transition: .5s; } nav.black ul { background: #000; } nav ul li { display: inline-block; padding: 16px 40px; } nav ul li a { text-decoration: none; color: #fff; font-size: 16px; } .menu-icon { line-height: 60px; width: 100%; background: #000; text-align: right; box-sizing: border-box; padding: 15px 24px; cursor: pointer; color: #fff; display: none; } @media(max-width: 786px) { .logo { position: fixed; top: 0; margin-top: 16px; } nav ul { max-height: 0px; background: #000; } nav.black ul { background: #000; } .showing { max-height: 34em; } nav ul li { box-sizing: border-box; width: 100%; padding: 24px; text-align: center; } .menu-icon { display: block; } } 

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Everest landing page</title> <link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous"> <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet"> <script src="https://code.jquery.com/jquery-3.3.1.js"></script> <script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script> </head> <body> <div class="container"> <div class="container-item landing-page-container" id="snowfall"> <div class="content-wrapper"> <header id="header" class="header"> <nav> <div class="menu-icon"> <i class="fa fa-bars fa-2x"></i> </div> <div class="logo">LOGO</div> <div class="menu"> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Blog</a></li> <li><a href="#">Contact</a></li> </ul> </div> </nav> </header> <p class="coords">27.9881° N /86.9250° E</p> <!-- <div class="ellipse-container">--> <h2 class="greeting">Visit Everest</h2> <!-- <div class="ellipse ellipse-outer-thin"> <div class="ellipse ellipse-orbit"></div> </div> --> <div class="ellipse ellipse-outer-thick"></div> </div> <!-- <img class="arrow" src="arrow.svg" alt="Down arrow">--> <div class="box"> <span></span> <span></span> <span></span> </div> </div> <!--<script src="js/particles.js"></script> <script src="js/app.js"></script> <script src="js/script.js" defer="defer"></script>--> </body> </html> 

The hero section has the id 'snowfall'.

Answer 1

Try to load your particles.js file before everything in your main.js
Refer to: https://stackoverflow.com/a/38271176/11932228