Problème Particles.js [Résolu/Fermé]

Signaler
Messages postés
187
Date d'inscription
mercredi 8 mars 2017
Statut
Membre
Dernière intervention
21 janvier 2018
-
Messages postés
187
Date d'inscription
mercredi 8 mars 2017
Statut
Membre
Dernière intervention
21 janvier 2018
-
Bonjour,
J'aimerais essayer d'intégrer un effet de particules sur mon site à l'aide de Particles.js (obligatoirement, pas d'alternative).
J'ai donc suivi plusieurs tutos, mais à chaque fois le même message d'erreur :
Uncaught TypeError: Cannot read property 'getElementsByClassName' of null
at window.particlesJS (particles.min.js:9)
at index.html:18

Merci de bien vouloir m'aider.

1 réponse

Messages postés
33009
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
21 juin 2021
3 571
Bonjour,

et quel est ton code html ?
As tu bien créé un élément dont l'id serait : particles-js ?
<!-- particles.js container -->
<div id="particles-js"></div>


et que contient ton fichier particles.js ?


NB : Pour poster du code sur le forum.. merci d'utiliser la coloration syntaxique (les balises de code).
Explications disponibles ici : https://codes-sources.commentcamarche.net/faq/10686-le-nouveau-codes-sources-comment-ca-marche#balises-code

.
Messages postés
187
Date d'inscription
mercredi 8 mars 2017
Statut
Membre
Dernière intervention
21 janvier 2018
238
Oui j'ai bien mis des "div" et tout ça mais sa ne marche pas...
Messages postés
33009
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
21 juin 2021
3 571 >
Messages postés
187
Date d'inscription
mercredi 8 mars 2017
Statut
Membre
Dernière intervention
21 janvier 2018

Pour pouvoir t'aider d'avantage ... il faudrait que tu nous montres ton code
Messages postés
187
Date d'inscription
mercredi 8 mars 2017
Statut
Membre
Dernière intervention
21 janvier 2018
238
<!doctype HTML>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="js/particles.min.js"></script>
<script>
particlesJS("particles-js", {"particles":{"number":{"value":38,"density":{"enable":true,"value_area":2525.2724532232724}},"color":{"value":"#0aa097"},"shape":{"type":"polygon","stroke":{"width":0,"color":"#3aaab9"},"polygon":{"nb_sides":5},"image":{"src":"img/github.svg","width":100,"height":100}},"opacity":{"value":0.5,"random":true,"anim":{"enable":true,"speed":1,"opacity_min":0.1,"sync":false}},"size":{"value":3.945738208161363,"random":true,"anim":{"enable":true,"speed":2.3976023976023977,"size_min":0.1,"sync":false}},"line_linked":{"enable":false,"distance":150,"color":"#ffffff","opacity":0.4,"width":1},"move":{"enable":true,"speed":2,"direction":"top","random":false,"straight":false,"out_mode":"out","bounce":false,"attract":{"enable":false,"rotateX":600,"rotateY":1200}}},"interactivity":{"detect_on":"canvas","events":{"onhover":{"enable":false,"mode":"bubble"},"onclick":{"enable":false,"mode":"push"},"resize":true},"modes":{"grab":{"distance":400,"line_linked":{"opacity":1}},"bubble":{"distance":400,"size":5,"duration":2,"opacity":8,"speed":3},"repulse":{"distance":200,"duration":0.4},"push":{"particles_nb":4},"remove":{"particles_nb":2}}},"retina_detect":true});
</script>
</head>

<body>
<div id="particles-js">
<p id="includedContent"></p>
</div>
</body>


et le CSS

#particles-js {
  position: absolute;
  height: 540px;
  width: 100%;
  pointer-events: none;
}
Messages postés
33009
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
21 juin 2021
3 571 >
Messages postés
187
Date d'inscription
mercredi 8 mars 2017
Statut
Membre
Dernière intervention
21 janvier 2018

Essaye de placer l'appel à ton script A LA FIN de ton code et non dans le head

<!doctype HTML>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body>
<div id="particles-js"></div>
<p id="includedContent"></p>

<script src="js/particles.min.js" type='text/javascript'></script>
<script type='text/javascript'>
particlesJS("particles-js", {"particles":{"number":{"value":38,"density":{"enable":true,"value_area":2525.2724532232724}},"color":{"value":"#0aa097"},"shape":{"type":"polygon","stroke":{"width":0,"color":"#3aaab9"},"polygon":{"nb_sides":5},"image":{"src":"img/github.svg","width":100,"height":100}},"opacity":{"value":0.5,"random":true,"anim":{"enable":true,"speed":1,"opacity_min":0.1,"sync":false}},"size":{"value":3.945738208161363,"random":true,"anim":{"enable":true,"speed":2.3976023976023977,"size_min":0.1,"sync":false}},"line_linked":{"enable":false,"distance":150,"color":"#ffffff","opacity":0.4,"width":1},"move":{"enable":true,"speed":2,"direction":"top","random":false,"straight":false,"out_mode":"out","bounce":false,"attract":{"enable":false,"rotateX":600,"rotateY":1200}}},"interactivity":{"detect_on":"canvas","events":{"onhover":{"enable":false,"mode":"bubble"},"onclick":{"enable":false,"mode":"push"},"resize":true},"modes":{"grab":{"distance":400,"line_linked":{"opacity":1}},"bubble":{"distance":400,"size":5,"duration":2,"opacity":8,"speed":3},"repulse":{"distance":200,"duration":0.4},"push":{"particles_nb":4},"remove":{"particles_nb":2}}},"retina_detect":true});
</script>

</body>
Messages postés
187
Date d'inscription
mercredi 8 mars 2017
Statut
Membre
Dernière intervention
21 janvier 2018
238 >
Messages postés
33009
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
21 juin 2021

Merci beaucoup ! sa marche maintenant !