Problème Particles.js

Résolu/Fermé

Chaton333 Messages postés 189 Date d'inscription mercredi 8 mars 2017 Statut Membre Dernière intervention 21 janvier 2018 - 2 mai 2017 à 18:03
Chaton333 Messages postés 189 Date d'inscription mercredi 8 mars 2017 Statut Membre Dernière intervention 21 janvier 2018 - 3 mai 2017 à 12:14

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

Réponse 1 / 1

jordane45 Messages postés 38469 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 22 avril 2025 4 741
2 mai 2017 à 19:05

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

.

Chaton333 Messages postés 189 Date d'inscription mercredi 8 mars 2017 Statut Membre Dernière intervention 21 janvier 2018 272
2 mai 2017 à 19:48

Oui j'ai bien mis des "div" et tout ça mais sa ne marche pas...

jordane45 Messages postés 38469 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 22 avril 2025 4 741 > Chaton333 Messages postés 189 Date d'inscription mercredi 8 mars 2017 Statut Membre Dernière intervention 21 janvier 2018
2 mai 2017 à 19:50

Pour pouvoir t'aider d'avantage ... il faudrait que tu nous montres ton code

Chaton333 Messages postés 189 Date d'inscription mercredi 8 mars 2017 Statut Membre Dernière intervention 21 janvier 2018 272
Modifié le 3 mai 2017 à 11:34

<!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;
}

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>

Chaton333 Messages postés 189 Date d'inscription mercredi 8 mars 2017 Statut Membre Dernière intervention 21 janvier 2018 272 > jordane45 Messages postés 38469 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 22 avril 2025
3 mai 2017 à 12:14

Merci beaucoup ! sa marche maintenant !