mistrmtl

I'm trying to integrate the particles JS code onto my whole site but it does not work. I do see the animation when i'm saving changes on my site for a split second but it disappears. and it seems to only appear on the home page but would like the particles.js animation throughout my site. I only put it as a code injection (see attached) Here is the code but below it I've generated a new code I would like to implement: <script> document.addEventListener('DOMContentLoaded', function() { var section = document.querySelector('.section-background'); var div = document.createElement('div'); div.id = 'particles-js'; div.style.width = '100%'; div.style.height = '100%'; div.style.position = 'absolute'; section.prepend(div); particlesJS('particles-js', particlesJSConfig); setTimeout(function() { window.dispatchEvent(new Event('resize')); }, 100); }); </script> <script> var particlesJSConfig = { "particles": { "number": { "value": 400, "density": { "enable": true, "value_area": 800 } }, "color": { "value": "#242f4f" }, "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": true, "anim": { "enable": false, "speed": 1, "opacity_min": 0.1, "sync": false } }, "size": { "value": 1, "random": false, "anim": { "enable": true, "speed": 0, "size_min": 0, "sync": false } }, "line_linked": { "enable": false, "distance": 500, "color": "#ffffff", "opacity": 0.4, "width": 2 }, "move": { "enable": true, "speed": 6, "direction": "none", "random": true, "straight": false, "out_mode": "bounce", "bounce": false, "attract": { "enable": false, "rotateX": 600, "rotateY": 1200 } } }, "interactivity": { "detect_on": "canvas", "events": { "onhover": { "enable": true, "mode": "repulse" }, "onclick": { "enable": true, "mode": "repulse" }, "resize": true }, "modes": { "grab": { "distance": 400, "line_linked": { "opacity": 0.5 } }, "bubble": { "distance": 400, "size": 4, "duration": 0.3, "opacity": 1, "speed": 3 }, "repulse": { "distance": 200, "duration": 0.4 }, "push": { "particles_nb": 4 }, "remove": { "particles_nb": 2 } } }, "retina_detect": true } </script> NEW CODE: { "particles": { "number": { "value": 80, "density": { "enable": true, "value_area": 552.4033491425909 } }, "color": { "value": "#252e4d" }, "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": true, "anim": { "enable": false, "speed": 1, "opacity_min": 0.1, "sync": false } }, "size": { "value": 2, "random": true, "anim": { "enable": false, "speed": 40, "size_min": 0.1, "sync": false } }, "line_linked": { "enable": false, "distance": 500, "color": "#252e4d", "opacity": 0.4, "width": 2 }, "move": { "enable": true, "speed": 4, "direction": "none", "random": true, "straight": false, "out_mode": "out", "bounce": false, "attract": { "enable": false, "rotateX": 600, "rotateY": 631.3181133058181 } } }, "interactivity": { "detect_on": "window", "events": { "onhover": { "enable": true, "mode": "repulse" }, "onclick": { "enable": true, "mode": "repulse" }, "resize": true }, "modes": { "grab": { "distance": 400, "line_linked": { "opacity": 0.5 } }, "bubble": { "distance": 400, "size": 4, "duration": 0.3, "opacity": 1, "speed": 3 }, "repulse": { "distance": 129.92496833078906, "duration": 0.4 }, "push": { "particles_nb": 4 }, "remove": { "particles_nb": 2 } } }, "retina_detect": true }

https://sm-parable-0086.squarespace.com/ Pw: MISTRSTUDIOS!24 @tuanphan

https://sm-parable-0086.squarespace.com/config/ This is a template whihc Id like to recreate the button animation. As you can see on the home page I've aded the button on the header banner but its not dynamic as the rest of the buttons on the page with a rollover effect.

I have done a typeform and would like to embed it as a button action slider on my site. Type form provides you with the code but the design of the button what I copy the code is not even close to the buttons I have on my site that i'm working on. Can some one guide please? I have all of the codes from type form

I'm trying to add this function to a design, whihc that the header does not appear on landing on the home page giving it a more seamless design but will only appear after your scroll down to 3 section of the home page. see example below url. Thank you so much in advance https://www.deskstudio.co.uk/

@creedon any possible way to have the button act as an email form entry directly on the website without the asking the user to use their own email client? Thank you for the help