Problème Particles.js
Résolu/Fermé
Chaton333
Messages postés
187
Date d'inscription
mercredi 8 mars 2017
Statut
Membre
Dernière intervention
21 janvier 2018
-
2 mai 2017 à 18:03
Chaton333 Messages postés 187 Date d'inscription mercredi 8 mars 2017 Statut Membre Dernière intervention 21 janvier 2018 - 3 mai 2017 à 12:14
Chaton333 Messages postés 187 Date d'inscription mercredi 8 mars 2017 Statut Membre Dernière intervention 21 janvier 2018 - 3 mai 2017 à 12:14
1 réponse
jordane45
Messages postés
37253
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
17 mars 2023
4 551
2 mai 2017 à 19:05
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 ?
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
.
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
.
2 mai 2017 à 19:48
2 mai 2017 à 19:50
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; }3 mai 2017 à 12:05
<!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>3 mai 2017 à 12:14