johnk10

Yes, thanks ClaraB!

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.

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.

Hi tuanphan, can you do this one too? https://vincentgarreau.com/particles.js/#default

Hi tuanphan, that works! Can you do this one too? https://vincentgarreau.com/particles.js/#default

Hi tuanphan, you are a genius - this works!

I tried it with the section id but it still did not work. The reference 7.0 was from a comment someone made on https://www.minimist.ca/articles/particlesjs-on-squarespace saying that it does not work on 7.1. Is it possible? I tried with the change you suggested but it still didn't work.

Site URL: https://vincentgarreau.com/particles.js/#snow Hello, the following code works for a cool snow effect in 7.0 but not 7.1. Does anyone know how to make it work for 7.1? I'm trying to have this on the first section of my home page. For reference, the code can be found here (click on "download current config (json)" to access the code file): https://vincentgarreau.com/particles.js/#snow And the walkthrough instructions can be found here: https://www.minimist.ca/articles/particlesjs-on-squarespace It works on 7.0 but not on 7.1. What is needed to make it work on 7.1? <script src="https://cdn.jsdelivr.net/npm/particles.js@2.0.0/particles.min.js"></script> <script> document.addEventListener('DOMContentLoaded', function() { particlesJS("home", particlesJSConfig); setTimeout(function() { window.dispatchEvent(new Event('resize')); }, 100); }); </script> <style> .particles-js-canvas-el { position: absolute; top:0; left: 0; width: 100%; height: 100%; z-index: 1; } </style> <script> var particlesJSConfig = { "particles": { "number": { "value": 400, "density": { "enable": true, "value_area": 800 } }, "color": { "value": "#fff" }, "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": 10, "random": true, "anim": { "enable": false, "speed": 40, "size_min": 0.1, "sync": false } }, "line_linked": { "enable": false, "distance": 500, "color": "#ffffff", "opacity": 0.4, "width": 2 }, "move": { "enable": true, "speed": 6, "direction": "bottom", "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": "bubble" }, "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> Kind regards, John

So is it possible? How would I get started? Sorry, just not sure what to do here.

Site URL: https://codepen.io/Suburbanno/pen/OXZrvw Hello, I'm having trouble customizing the background of a section on my website. I am trying to use the css code from here: https://codepen.io/Suburbanno/pen/OXZrvw and here: https://codepen.io/arickle/pen/XKjMZY but whenever I add it to a code block, it just displays the actual code. I don't understand why it's not working when it's all css code. Also, if I could reverse the direction of the particles to fall down instead of up (like it's raining stars), that would be great too. Please help. Thanks.

Site URL: https://codepen.io/arickle/pen/XKjMZY Hello, so I thought I would be able to build a custom website with a few point and clicks but it turns out what I'm trying to do requires a bit more custom css which I'm very new to. I'm trying to add something like this custom background found here https://codepen.io/arickle/pen/XKjMZY to the first section of my home/landing page of my website. I've tried adding the following code into a code block on the section I want it on but nothing happens. What am I missing? Or is it not possible? Any help is much appreciated. Thanks in advance! <div class="rain-section-background"> <div class="back-row-toggle"> <div class="rain front-row"></div> <div class="rain back-row"></div> </div> </div> <style> [data-section-id="the-squarespace-section-id"] { position: relative; } .rain-section-background { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 0; overflow: hidden; background: linear-gradient(to bottom, #202020, #111119); } .rain { position: absolute; left: 0; width: 100%; height: 100%; z-index: 2; } .rain.back-row { z-index: 1; bottom: 60px; opacity: 0.5; } .drop { position: absolute; bottom: 100%; width: 15px; height: 120px; pointer-events: none; animation: drop 0.5s linear infinite; } @keyframes drop { 0% { transform: translateY(0vh); } 75% { transform: translateY(90vh); } 100% { transform: translateY(90vh); } } .stem { width: 1px; height: 60%; margin-left: 7px; background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.25)); animation: stem 0.5s linear infinite; } @keyframes stem { 0% { opacity: 1; } 65% { opacity: 1; } 75% { opacity: 0; } 100% { opacity: 0; } } .splat { width: 15px; height: 10px; border-top: 2px dotted rgba(255, 255, 255, 0.5); border-radius: 50%; opacity: 1; transform: scale(0); animation: splat 0.5s linear infinite; display: none; } .splat-toggle .splat { display: block; } @keyframes splat { 0% { opacity: 1; transform: scale(0); } 80% { opacity: 1; transform: scale(0); } 90% { opacity: 0.5; transform: scale(1); } 100% { opacity: 0; transform: scale(1.5); } } </style> <script> var makeItRain = function() { //clear out everything $('.rain').empty(); var increment = 0; var drops = ""; var backDrops = ""; while (increment < 100) { //couple random numbers to use for various randomizations //random number between 98 and 1 var randoHundo = (Math.floor(Math.random() * (98 - 1 + 1) + 1)); //random number between 5 and 2 var randoFiver = (Math.floor(Math.random() * (5 - 2 + 1) + 2)); //increment increment += randoFiver; //add in a new raindrop with various randomizations to certain CSS properties drops += '<div class="drop" style="left: ' + increment + '%; bottom: ' + (randoFiver + randoFiver - 1 + 100) + '%; animation-delay: 0.' + randoHundo + 's; animation-duration: 0.5' + randoHundo + 's;"><div class="stem" style="animation-delay: 0.' + randoHundo + 's; animation-duration: 0.5' + randoHundo + 's;"></div><div class="splat" style="animation-delay: 0.' + randoHundo + 's; animation-duration: 0.5' + randoHundo + 's;"></div></div>'; backDrops += '<div class="drop" style="right: ' + increment + '%; bottom: ' + (randoFiver + randoFiver - 1 + 100) + '%; animation-delay: 0.' + randoHundo + 's; animation-duration: 0.5' + randoHundo + 's;"><div class="stem" style="animation-delay: 0.' + randoHundo + 's; animation-duration: 0.5' + randoHundo + 's;"></div><div class="splat" style="animation-delay: 0.' + randoHundo + 's; animation-duration: 0.5' + randoHundo + 's;"></div></div>'; } $('.rain.front-row').append(drops); $('.rain.back-row').append(backDrops); } makeItRain(); </script>

Site URL: https://codepen.io/saransh/pen/BKJun Hello, I want to add this background to the first section of any page: https://codepen.io/saransh/pen/BKJun I also would like to reverse the particle direction to go down instead of up. Is there a way to do this? I've tried to create a code block on the home page with the HTML code and then in the Custom CSS part, I would wrap the CSS code in <style> </style> but I get nothing. I'm very new to web development. I thought I could just build a custom website with a few point and clicks 😔 Any help is much appreciated. Thanks!

Okay no problem. Here it is! https://walrus-hawk-wdaz.squarespace.com/config/pages

Thanks, but when input your code into a code block, it just shows a thick black line in the code block. I tried making 3 code blocks - 1 for HTML, 1 for CSS, and 1 for JS but it still didn't work. Am I missing something?

Site URL: https://codepen.io/arickle/pen/XKjMZY Hello, so I thought I would be able to build a custom website with a few point and clicks but it turns out what I'm trying to do requires a bit more custom css which I'm very new to. I'm trying to add something like this custom background found here https://codepen.io/arickle/pen/XKjMZY to the first section of my home/landing page of my website. Is it possible? If so, how do I do it? I've tried copy and pasting the code inside <style> </style> in the custom css but nothing happens. I've also tried inserting it into a code block on the specific section but again nothing. Any help is much appreciated. Thanks in advance!