I'm trying to get particles showing up on the main hero section of this site using Particle js but it doesn't work

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'.

score 0 · Answer 1 · answered Aug 16 '19 at 10:46

0

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

answered Aug 16 '19 at 10:46

Jacob

31
3

Just to try this out since this might be a CSS , omit the background-image line in .landing-page-container and also remove the CSS for the tag you don't need it if your using HTML5 – Jacob Aug 18 '19 at 08:19
Tried that too, no luck :/ – Nezih Dogruer Aug 18 '19 at 13:27

I'm trying to get particles showing up on the main hero section of this site using Particle js but it doesn't work

1 Answers1