How to add custom animated background to specific section in Squarespace?

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!

Hi! I'd recommend using a video background (which is natively supported in squarespace) rather than a CSS-and-Javascript solution. You should be able to find a stock video of raindrops similar to this one.

However! If you're certain this is what you want to embed, read on ---

1. Create a code block and put it in your desired section. The code needs to contain the html markup, the custom CSS, and the custom javascript. Something like this should do it, I think --

<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>

(This is the same code from the codepen, but I removed the parts about the toggle buttons because I assume you don't want your end users deciding if they want to see splashes or not)

Then, you'll need to find the section ID. Right click your section, go to Inspect, and scroll around until you see something called a <section>. There's going to be a lot of stuff in there. Basically you're looking for something that says 

<section class="..." ... data-section-id="609579ac16e9-for-example-0858af6cd450" ... >

The number in those quotes is the one you're looking for. Go back to your code block and find the part where I entered "the-squarespace-section-id" and replace that with the number (with quotes). Don't change the brackets or anything else!

This will probably work but without seeing your site I can't be certain. Good luck! And again: a video background will be much easier.

9 minutes ago, ClaraB said:

Hi! I'd recommend using a video background (which is natively supported in squarespace) rather than a CSS-and-Javascript solution. You should be able to find a stock video of raindrops similar to this one.

 

However! If you're certain this is what you want to embed, read on ---

1. Create a code block and put it in your desired section. The code needs to contain the html markup, the custom CSS, and the custom javascript. Something like this should do it, I think --

<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>

(This is the same code from the codepen, but I removed the parts about the toggle buttons because I assume you don't want your end users deciding if they want to see splashes or not)

Then, you'll need to find the section ID. Right click your section, go to Inspect, and scroll around until you see something called a <section>. There's going to be a lot of stuff in there. Basically you're looking for something that says 

<section class="..." ... data-section-id="609579ac16e9-for-example-0858af6cd450" ... >

The number in those quotes is the one you're looking for. Go back to your code block and find the part where I entered "the-squarespace-section-id" and replace that with the number (with quotes). Don't change the brackets or anything else!

This will probably work but without seeing your site I can't be certain. Good luck! And again: a video background will be much easier.

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?  

Ah, the absolute positioning probably isn't getting applied in the right place. If you post a link to your site I may be able to help more

5 minutes ago, ClaraB said:

Ah, the absolute positioning probably isn't getting applied in the right place. If you post a link to your site I may be able to help more

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

Just came back to this and it looks like you've got an animation working! an interactive one, no less! Very cool

On 8/2/2021 at 5:00 PM, ClaraB said:

Just came back to this and it looks like you've got an animation working! an interactive one, no less! Very cool

Yes, thanks ClaraB!