johnk10 Posted August 1, 2021 Share Posted August 1, 2021 Site URL: https://vincentgarreau.com/particles.js/#default Does anyone know how to add this on the first section of a home page? https://vincentgarreau.com/particles.js/#default Also, how can I change the color as needed? Looking to use a light grey color instead of the default red. Beyondspace 1 Link to comment
Beyondspace Posted August 2, 2021 Share Posted August 2, 2021 21 hours ago, johnk10 said: Site URL: https://vincentgarreau.com/particles.js/#default Does anyone know how to add this on the first section of a home page? https://vincentgarreau.com/particles.js/#default Also, how can I change the color as needed? Looking to use a light grey color instead of the default red. Copy this into Page header injection <script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script><script src="https://threejs.org/examples/js/libs/stats.min.js"></script> <style> #particles-js{ --particle-background: #ccc;position:absolute; width: 100%; height: 100%; background-color: var(--particle-background); background-image: url(""); background-repeat: no-repeat; background-size: cover; background-position: 50% 50%; } </style> <script> document.addEventListener('DOMContentLoaded', function() { var firstSection = document.querySelector(".homepage #page section:first-child .section-background"); if (firstSection) { firstSection.id = "particles-js" }; /* Generated code from particle website */ particlesJS("particles-js", {"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":3,"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","bounce":false,"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,"duration":0.4},"push":{"particles_nb":4},"remove":{"particles_nb":2}}},"retina_detect":true}); }); </script> Find and change the value of css variable particle background as you wish --particle-background: #ccc; BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox, video lightbox and much more) 🗓️ Delivery Date Picker (Squarespace Date picker form field) 💫 Gallery block 7.1 workaround 🥳 No-code customisations for Squarespace (+100 Spark plugin customisations) 🥳 Freemium Squarespace Widget Templates (+1000 Elfsight Templates) If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you! Link to comment
johnk10 Posted August 2, 2021 Author Share Posted August 2, 2021 13 minutes ago, bangank36 said: Copy this into Page header injection <script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script><script src="https://threejs.org/examples/js/libs/stats.min.js"></script> <style> #particles-js{ --particle-background: #ccc;position:absolute; width: 100%; height: 100%; background-color: var(--particle-background); background-image: url(""); background-repeat: no-repeat; background-size: cover; background-position: 50% 50%; } </style> <script> document.addEventListener('DOMContentLoaded', function() { var firstSection = document.querySelector(".homepage #page section:first-child .section-background"); if (firstSection) { firstSection.id = "particles-js" }; /* Generated code from particle website */ particlesJS("particles-js", {"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":3,"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","bounce":false,"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,"duration":0.4},"push":{"particles_nb":4},"remove":{"particles_nb":2}}},"retina_detect":true}); }); </script> Find and change the value of css variable particle background as you wish --particle-background: #ccc; Hi bangank36, when I copy and paste this into the page header injection, nothing shows up still. Do I add a code block or do anything else? Thanks for your help. Link to comment
Beyondspace Posted August 3, 2021 Share Posted August 3, 2021 7 hours ago, johnk10 said: Hi bangank36, when I copy and paste this into the page header injection, nothing shows up still. Do I add a code block or do anything else? Thanks for your help. Send your site url BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox, video lightbox and much more) 🗓️ Delivery Date Picker (Squarespace Date picker form field) 💫 Gallery block 7.1 workaround 🥳 No-code customisations for Squarespace (+100 Spark plugin customisations) 🥳 Freemium Squarespace Widget Templates (+1000 Elfsight Templates) If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you! Link to comment
Beyondspace Posted August 4, 2021 Share Posted August 4, 2021 It is running on my home page on 7.1 BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox, video lightbox and much more) 🗓️ Delivery Date Picker (Squarespace Date picker form field) 💫 Gallery block 7.1 workaround 🥳 No-code customisations for Squarespace (+100 Spark plugin customisations) 🥳 Freemium Squarespace Widget Templates (+1000 Elfsight Templates) If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you! Link to comment
EduardDan Posted June 9, 2023 Share Posted June 9, 2023 Hey, i need assistance can someone help me ? Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment