Add CSS animated background from codepen to squarespace site

nickleb · September 27, 2020

Site URL: https://mango-harmonica-5r95.squarespace.com/home-1

Hi. I have been attempting to add codepen background animations to my squarespace site and I am really struggling. I have read documentation on adding the CSS & JS as a code block with the <script></script> and <style></style> tags. I have also attempted to convert SCSS to CSS. And making sure I link any external style sheets. I have read through so many answers and can't figure out what I'm doing wrong! I've tried adding multiple animations and I keep failing. Can someone please provide some insight on what I'm doing wrong?

Here is an example of an animation with only HTML & CSS. I'm trying to add it to the background of my site: https://codepen.io/tutsplus/pen/MrjYJK

I tried using the code block and the Advanced > Page Header Code Injection but it just adds a ton of white space. There is no animation. Here is my code.

.particle {
position: absolute;
border-radius: 50%;
}

@for $i from 1 through 30 {
   @keyframes particle-animation-#{$i} {
       100% {
           transform: translate3d((random(90) * 1vw), (random(90) * 1vh), (random(100) * 1px));
       }
   }

   .particle:nth-child(#{$i}){
       animation: particle-animation-#{$i} 60s infinite;
       $size: random(5) + 5 + px;
       opacity: random(100)/100;
       height: $size;
       width: $size;
       animation-delay: -$i * .2s;
       transform: translate3d((random(90) * 1vw), (random(90) * 1vh), (random(100) * 1px));
       background: hsl(random(360), 70%, 50%);
   }
}

</style>

creedon · September 27, 2020

Let me confirm. You want this effect site wide? Not just the one page for which you gave us the URL?

On the up side I did some quick hacking and was able to get the effect going here locally on one page. Not perfect but it pushes us in the direction that it is possible.

nickleb · September 27, 2020

3 minutes ago, creedon said:

Let me confirm. You want this effect site wide? Not just the one page for which you gave us the URL?

On the up side I did some quick hacking and was able to get the effect going here locally on one page. Not perfect but it pushes us in the direction that it is possible.

Correct, I would like the code on just one page. Can you teach me how you were able to get it on that page? Thank you so much for your help!

creedon · September 28, 2020

I'll do the critical steps in case anyone else is following along. You may have already done some of these steps.

Put the following in a code block at the top of the page. You can put it anywhere within the page but I like to put things like this at the top.

<!-- Inspired by: https://codepen.io/natewiley/pen/Ciwyn -->

<div id="particle-container">
  <div class="particle"></div>
  <div class="particle"></div>
  <div class="particle"></div>
  <div class="particle"></div>
  <div class="particle"></div>
  <div class="particle"></div>
  <div class="particle"></div>
  <div class="particle"></div>
  <div class="particle"></div>
  <div class="particle"></div>
  <div class="particle"></div>
  <div class="particle"></div>
  <div class="particle"></div>
  <div class="particle"></div>
  <div class="particle"></div>
  <div class="particle"></div>
  <div class="particle"></div>
  <div class="particle"></div>
  <div class="particle"></div>
  <div class="particle"></div>
  <div class="particle"></div>
  <div class="particle"></div>
  <div class="particle"></div>
  <div class="particle"></div>
  <div class="particle"></div>
  <div class="particle"></div>
  <div class="particle"></div>
  <div class="particle"></div>
  <div class="particle"></div>
  <div class="particle"></div>
  </div>

Add the following in Page Settings > Advanced > Page Header Code Injection.

<style>

  .particle {
  
    border-radius: 50%;
    left: 0;
    position: fixed; /* relative to browser window */
    top: 0;
    
    }
    
  /*
  
  The following was compiled from dynamic SCSS. This means it is now static in that the
  page loads, the animation starts, goes for a bit, and then repeats. It is always the
  same each time the page loads.
  
  */
  
  @keyframes particle-animation-1 {
    100% {
      transform: translate3d(73vw, 90vh, 72px);
    }
  }
  .particle:nth-child(1) {
    animation: particle-animation-1 60s infinite;
    opacity: 0.72;
    height: 6px;
    width: 6px;
    animation-delay: -0.2s;
    transform: translate3d(64vw, 77vh, 93px);
    background: #6826d9;
  }
  @keyframes particle-animation-2 {
    100% {
      transform: translate3d(15vw, 67vh, 8px);
    }
  }
  .particle:nth-child(2) {
    animation: particle-animation-2 60s infinite;
    opacity: 0.03;
    height: 8px;
    width: 8px;
    animation-delay: -0.4s;
    transform: translate3d(32vw, 14vh, 71px);
    background: #80d926;
  }
  @keyframes particle-animation-3 {
    100% {
      transform: translate3d(26vw, 74vh, 71px);
    }
  }
  .particle:nth-child(3) {
    animation: particle-animation-3 60s infinite;
    opacity: 0.65;
    height: 6px;
    width: 6px;
    animation-delay: -0.6s;
    transform: translate3d(3vw, 40vh, 1px);
    background: #c726d9;
  }
  @keyframes particle-animation-4 {
    100% {
      transform: translate3d(65vw, 15vh, 22px);
    }
  }
  .particle:nth-child(4) {
    animation: particle-animation-4 60s infinite;
    opacity: 0.75;
    height: 10px;
    width: 10px;
    animation-delay: -0.8s;
    transform: translate3d(47vw, 67vh, 3px);
    background: #d9265c;
  }
  @keyframes particle-animation-5 {
    100% {
      transform: translate3d(11vw, 54vh, 35px);
    }
  }
  .particle:nth-child(5) {
    animation: particle-animation-5 60s infinite;
    opacity: 0.13;
    height: 9px;
    width: 9px;
    animation-delay: -1s;
    transform: translate3d(25vw, 2vh, 96px);
    background: #d9a026;
  }
  @keyframes particle-animation-6 {
    100% {
      transform: translate3d(65vw, 18vh, 51px);
    }
  }
  .particle:nth-child(6) {
    animation: particle-animation-6 60s infinite;
    opacity: 0.91;
    height: 8px;
    width: 8px;
    animation-delay: -1.2s;
    transform: translate3d(72vw, 88vh, 44px);
    background: #d92688;
  }
  @keyframes particle-animation-7 {
    100% {
      transform: translate3d(86vw, 50vh, 98px);
    }
  }
  .particle:nth-child(7) {
    animation: particle-animation-7 60s infinite;
    opacity: 0.08;
    height: 8px;
    width: 8px;
    animation-delay: -1.4s;
    transform: translate3d(13vw, 39vh, 84px);
    background: #2680d9;
  }
  @keyframes particle-animation-8 {
    100% {
      transform: translate3d(75vw, 67vh, 5px);
    }
  }
  .particle:nth-child(8) {
    animation: particle-animation-8 60s infinite;
    opacity: 0.28;
    height: 8px;
    width: 8px;
    animation-delay: -1.6s;
    transform: translate3d(70vw, 46vh, 16px);
    background: #d926ca;
  }
  @keyframes particle-animation-9 {
    100% {
      transform: translate3d(81vw, 18vh, 36px);
    }
  }
  .particle:nth-child(9) {
    animation: particle-animation-9 60s infinite;
    opacity: 0.58;
    height: 8px;
    width: 8px;
    animation-delay: -1.8s;
    transform: translate3d(82vw, 33vh, 24px);
    background: #d92688;
  }
  @keyframes particle-animation-10 {
    100% {
      transform: translate3d(87vw, 61vh, 91px);
    }
  }
  .particle:nth-child(10) {
    animation: particle-animation-10 60s infinite;
    opacity: 0.85;
    height: 9px;
    width: 9px;
    animation-delay: -2s;
    transform: translate3d(42vw, 61vh, 1px);
    background: #d9a926;
  }
  @keyframes particle-animation-11 {
    100% {
      transform: translate3d(17vw, 73vh, 66px);
    }
  }
  .particle:nth-child(11) {
    animation: particle-animation-11 60s infinite;
    opacity: 0.31;
    height: 8px;
    width: 8px;
    animation-delay: -2.2s;
    transform: translate3d(48vw, 66vh, 8px);
    background: #8ed926;
  }
  @keyframes particle-animation-12 {
    100% {
      transform: translate3d(75vw, 74vh, 94px);
    }
  }
  .particle:nth-child(12) {
    animation: particle-animation-12 60s infinite;
    opacity: 0.42;
    height: 7px;
    width: 7px;
    animation-delay: -2.4s;
    transform: translate3d(5vw, 24vh, 15px);
    background: #d92662;
  }
  @keyframes particle-animation-13 {
    100% {
      transform: translate3d(58vw, 10vh, 90px);
    }
  }
  .particle:nth-child(13) {
    animation: particle-animation-13 60s infinite;
    opacity: 0.7;
    height: 7px;
    width: 7px;
    animation-delay: -2.6s;
    transform: translate3d(4vw, 37vh, 95px);
    background: #d92659;
  }
  @keyframes particle-animation-14 {
    100% {
      transform: translate3d(9vw, 58vh, 27px);
    }
  }
  .particle:nth-child(14) {
    animation: particle-animation-14 60s infinite;
    opacity: 0.2;
    height: 7px;
    width: 7px;
    animation-delay: -2.8s;
    transform: translate3d(88vw, 7vh, 99px);
    background: #8b26d9;
  }
  @keyframes particle-animation-15 {
    100% {
      transform: translate3d(48vw, 43vh, 85px);
    }
  }
  .particle:nth-child(15) {
    animation: particle-animation-15 60s infinite;
    opacity: 0.31;
    height: 10px;
    width: 10px;
    animation-delay: -3s;
    transform: translate3d(38vw, 88vh, 48px);
    background: #266bd9;
  }
  @keyframes particle-animation-16 {
    100% {
      transform: translate3d(44vw, 38vh, 77px);
    }
  }
  .particle:nth-child(16) {
    animation: particle-animation-16 60s infinite;
    opacity: 0.25;
    height: 9px;
    width: 9px;
    animation-delay: -3.2s;
    transform: translate3d(54vw, 21vh, 16px);
    background: #b826d9;
  }
  @keyframes particle-animation-17 {
    100% {
      transform: translate3d(50vw, 21vh, 42px);
    }
  }
  .particle:nth-child(17) {
    animation: particle-animation-17 60s infinite;
    opacity: 0.13;
    height: 7px;
    width: 7px;
    animation-delay: -3.4s;
    transform: translate3d(49vw, 71vh, 68px);
    background: #2677d9;
  }
  @keyframes particle-animation-18 {
    100% {
      transform: translate3d(39vw, 38vh, 46px);
    }
  }
  .particle:nth-child(18) {
    animation: particle-animation-18 60s infinite;
    opacity: 0.54;
    height: 8px;
    width: 8px;
    animation-delay: -3.6s;
    transform: translate3d(1vw, 78vh, 67px);
    background: #268bd9;
  }
  @keyframes particle-animation-19 {
    100% {
      transform: translate3d(47vw, 3vh, 83px);
    }
  }
  .particle:nth-child(19) {
    animation: particle-animation-19 60s infinite;
    opacity: 0.24;
    height: 10px;
    width: 10px;
    animation-delay: -3.8s;
    transform: translate3d(29vw, 27vh, 58px);
    background: #2685d9;
  }
  @keyframes particle-animation-20 {
    100% {
      transform: translate3d(71vw, 58vh, 50px);
    }
  }
  .particle:nth-child(20) {
    animation: particle-animation-20 60s infinite;
    opacity: 0.49;
    height: 8px;
    width: 8px;
    animation-delay: -4s;
    transform: translate3d(89vw, 62vh, 58px);
    background: #d9266b;
  }
  @keyframes particle-animation-21 {
    100% {
      transform: translate3d(1vw, 13vh, 34px);
    }
  }
  .particle:nth-child(21) {
    animation: particle-animation-21 60s infinite;
    opacity: 0.16;
    height: 6px;
    width: 6px;
    animation-delay: -4.2s;
    transform: translate3d(16vw, 63vh, 92px);
    background: #c7d926;
  }
  @keyframes particle-animation-22 {
    100% {
      transform: translate3d(62vw, 83vh, 8px);
    }
  }
  .particle:nth-child(22) {
    animation: particle-animation-22 60s infinite;
    opacity: 0.46;
    height: 7px;
    width: 7px;
    animation-delay: -4.4s;
    transform: translate3d(43vw, 3vh, 36px);
    background: #26d96e;
  }
  @keyframes particle-animation-23 {
    100% {
      transform: translate3d(8vw, 11vh, 17px);
    }
  }
  .particle:nth-child(23) {
    animation: particle-animation-23 60s infinite;
    opacity: 0.1;
    height: 6px;
    width: 6px;
    animation-delay: -4.6s;
    transform: translate3d(12vw, 11vh, 54px);
    background: #2cd926;
  }
  @keyframes particle-animation-24 {
    100% {
      transform: translate3d(42vw, 44vh, 70px);
    }
  }
  .particle:nth-child(24) {
    animation: particle-animation-24 60s infinite;
    opacity: 0.47;
    height: 8px;
    width: 8px;
    animation-delay: -4.8s;
    transform: translate3d(46vw, 33vh, 57px);
    background: #d97126;
  }
  @keyframes particle-animation-25 {
    100% {
      transform: translate3d(66vw, 52vh, 19px);
    }
  }
  .particle:nth-child(25) {
    animation: particle-animation-25 60s infinite;
    opacity: 0.13;
    height: 8px;
    width: 8px;
    animation-delay: -5s;
    transform: translate3d(74vw, 59vh, 23px);
    background: #26d9bb;
  }
  @keyframes particle-animation-26 {
    100% {
      transform: translate3d(35vw, 82vh, 67px);
    }
  }
  .particle:nth-child(26) {
    animation: particle-animation-26 60s infinite;
    opacity: 0.45;
    height: 10px;
    width: 10px;
    animation-delay: -5.2s;
    transform: translate3d(49vw, 79vh, 12px);
    background: #d98826;
  }
  @keyframes particle-animation-27 {
    100% {
      transform: translate3d(85vw, 39vh, 97px);
    }
  }
  .particle:nth-child(27) {
    animation: particle-animation-27 60s infinite;
    opacity: 0.28;
    height: 10px;
    width: 10px;
    animation-delay: -5.4s;
    transform: translate3d(78vw, 72vh, 78px);
    background: #8826d9;
  }
  @keyframes particle-animation-28 {
    100% {
      transform: translate3d(15vw, 28vh, 12px);
    }
  }
  .particle:nth-child(28) {
    animation: particle-animation-28 60s infinite;
    opacity: 0.18;
    height: 9px;
    width: 9px;
    animation-delay: -5.6s;
    transform: translate3d(51vw, 47vh, 1px);
    background: #c426d9;
  }
  @keyframes particle-animation-29 {
    100% {
      transform: translate3d(68vw, 5vh, 77px);
    }
  }
  .particle:nth-child(29) {
    animation: particle-animation-29 60s infinite;
    opacity: 0.46;
    height: 7px;
    width: 7px;
    animation-delay: -5.8s;
    transform: translate3d(66vw, 12vh, 32px);
    background: #26d95f;
  }
  @keyframes particle-animation-30 {
    100% {
      transform: translate3d(25vw, 89vh, 37px);
    }
  }
  .particle:nth-child(30) {
    animation: particle-animation-30 60s infinite;
    opacity: 0.46;
    height: 6px;
    width: 6px;
    animation-delay: -6s;
    transform: translate3d(20vw, 37vh, 47px);
    background: #262cd9;
  }

  </style>

This is for a v7.0 site using the Skye family of templates.

That should do it.

This could be tweaked and is just a starting point. You could do things like add more or less particles. Perhaps based on screen size? The target area of the particles could be restricted from the whole window to a sub area. For example below the header area. That would take some Javascript I think to place the particle-container into the right location.

I may follow up with a bit more detail of my process but these are the critical get it done steps.

Let us know how it goes.

creedon · September 28, 2020

Follow up detail information.

Since we don't have access to SCSS dynamically on Squarespace we had to convert it from...

body {
    background: #ecf3f3;
}

.particle {
    position: absolute;
     border-radius: 50%;
}

@for $i from 1 through 30 {
    @keyframes particle-animation-#{$i} {
        100% {
            transform: translate3d((random(90) * 1vw), (random(90) * 1vh), (random(100) * 1px));
        }
    }
    
    .particle:nth-child(#{$i}){
        animation: particle-animation-#{$i} 60s infinite;
        $size: random(5) + 5 + px;
        opacity: random(100)/100;
        height: $size;
        width: $size;
        animation-delay: -$i * .2s;
        transform: translate3d((random(90) * 1vw), (random(90) * 1vh), (random(100) * 1px));
        background: hsl(random(360), 70%, 50%);
    }
}

...to CSS...

body {
  background: #ecf3f3;
}
.particle {
  position: absolute;
  border-radius: 50%;
}
@keyframes particle-animation-1 {
  100% {
    transform: translate3d(73vw, 90vh, 72px);
  }
}
.particle:nth-child(1) {
  animation: particle-animation-1 60s infinite;
  opacity: 0.72;
  height: 6px;
  width: 6px;
  animation-delay: -0.2s;
  transform: translate3d(64vw, 77vh, 93px);
  background: #6826d9;
}
@keyframes particle-animation-2 {
  100% {
    transform: translate3d(15vw, 67vh, 8px);
  }
}
.particle:nth-child(2) {
  animation: particle-animation-2 60s infinite;
  opacity: 0.03;
  height: 8px;
  width: 8px;
  animation-delay: -0.4s;
  transform: translate3d(32vw, 14vh, 71px);
  background: #80d926;
}
@keyframes particle-animation-3 {
  100% {
    transform: translate3d(26vw, 74vh, 71px);
  }
}
.particle:nth-child(3) {
  animation: particle-animation-3 60s infinite;
  opacity: 0.65;
  height: 6px;
  width: 6px;
  animation-delay: -0.6s;
  transform: translate3d(3vw, 40vh, 1px);
  background: #c726d9;
}
@keyframes particle-animation-4 {
  100% {
    transform: translate3d(65vw, 15vh, 22px);
  }
}
.particle:nth-child(4) {
  animation: particle-animation-4 60s infinite;
  opacity: 0.75;
  height: 10px;
  width: 10px;
  animation-delay: -0.8s;
  transform: translate3d(47vw, 67vh, 3px);
  background: #d9265c;
}
@keyframes particle-animation-5 {
  100% {
    transform: translate3d(11vw, 54vh, 35px);
  }
}
.particle:nth-child(5) {
  animation: particle-animation-5 60s infinite;
  opacity: 0.13;
  height: 9px;
  width: 9px;
  animation-delay: -1s;
  transform: translate3d(25vw, 2vh, 96px);
  background: #d9a026;
}
@keyframes particle-animation-6 {
  100% {
    transform: translate3d(65vw, 18vh, 51px);
  }
}
.particle:nth-child(6) {
  animation: particle-animation-6 60s infinite;
  opacity: 0.91;
  height: 8px;
  width: 8px;
  animation-delay: -1.2s;
  transform: translate3d(72vw, 88vh, 44px);
  background: #d92688;
}
@keyframes particle-animation-7 {
  100% {
    transform: translate3d(86vw, 50vh, 98px);
  }
}
.particle:nth-child(7) {
  animation: particle-animation-7 60s infinite;
  opacity: 0.08;
  height: 8px;
  width: 8px;
  animation-delay: -1.4s;
  transform: translate3d(13vw, 39vh, 84px);
  background: #2680d9;
}
@keyframes particle-animation-8 {
  100% {
    transform: translate3d(75vw, 67vh, 5px);
  }
}
.particle:nth-child(8) {
  animation: particle-animation-8 60s infinite;
  opacity: 0.28;
  height: 8px;
  width: 8px;
  animation-delay: -1.6s;
  transform: translate3d(70vw, 46vh, 16px);
  background: #d926ca;
}
@keyframes particle-animation-9 {
  100% {
    transform: translate3d(81vw, 18vh, 36px);
  }
}
.particle:nth-child(9) {
  animation: particle-animation-9 60s infinite;
  opacity: 0.58;
  height: 8px;
  width: 8px;
  animation-delay: -1.8s;
  transform: translate3d(82vw, 33vh, 24px);
  background: #d92688;
}
@keyframes particle-animation-10 {
  100% {
    transform: translate3d(87vw, 61vh, 91px);
  }
}
.particle:nth-child(10) {
  animation: particle-animation-10 60s infinite;
  opacity: 0.85;
  height: 9px;
  width: 9px;
  animation-delay: -2s;
  transform: translate3d(42vw, 61vh, 1px);
  background: #d9a926;
}
@keyframes particle-animation-11 {
  100% {
    transform: translate3d(17vw, 73vh, 66px);
  }
}
.particle:nth-child(11) {
  animation: particle-animation-11 60s infinite;
  opacity: 0.31;
  height: 8px;
  width: 8px;
  animation-delay: -2.2s;
  transform: translate3d(48vw, 66vh, 8px);
  background: #8ed926;
}
@keyframes particle-animation-12 {
  100% {
    transform: translate3d(75vw, 74vh, 94px);
  }
}
.particle:nth-child(12) {
  animation: particle-animation-12 60s infinite;
  opacity: 0.42;
  height: 7px;
  width: 7px;
  animation-delay: -2.4s;
  transform: translate3d(5vw, 24vh, 15px);
  background: #d92662;
}
@keyframes particle-animation-13 {
  100% {
    transform: translate3d(58vw, 10vh, 90px);
  }
}
.particle:nth-child(13) {
  animation: particle-animation-13 60s infinite;
  opacity: 0.7;
  height: 7px;
  width: 7px;
  animation-delay: -2.6s;
  transform: translate3d(4vw, 37vh, 95px);
  background: #d92659;
}
@keyframes particle-animation-14 {
  100% {
    transform: translate3d(9vw, 58vh, 27px);
  }
}
.particle:nth-child(14) {
  animation: particle-animation-14 60s infinite;
  opacity: 0.2;
  height: 7px;
  width: 7px;
  animation-delay: -2.8s;
  transform: translate3d(88vw, 7vh, 99px);
  background: #8b26d9;
}
@keyframes particle-animation-15 {
  100% {
    transform: translate3d(48vw, 43vh, 85px);
  }
}
.particle:nth-child(15) {
  animation: particle-animation-15 60s infinite;
  opacity: 0.31;
  height: 10px;
  width: 10px;
  animation-delay: -3s;
  transform: translate3d(38vw, 88vh, 48px);
  background: #266bd9;
}
@keyframes particle-animation-16 {
  100% {
    transform: translate3d(44vw, 38vh, 77px);
  }
}
.particle:nth-child(16) {
  animation: particle-animation-16 60s infinite;
  opacity: 0.25;
  height: 9px;
  width: 9px;
  animation-delay: -3.2s;
  transform: translate3d(54vw, 21vh, 16px);
  background: #b826d9;
}
@keyframes particle-animation-17 {
  100% {
    transform: translate3d(50vw, 21vh, 42px);
  }
}
.particle:nth-child(17) {
  animation: particle-animation-17 60s infinite;
  opacity: 0.13;
  height: 7px;
  width: 7px;
  animation-delay: -3.4s;
  transform: translate3d(49vw, 71vh, 68px);
  background: #2677d9;
}
@keyframes particle-animation-18 {
  100% {
    transform: translate3d(39vw, 38vh, 46px);
  }
}
.particle:nth-child(18) {
  animation: particle-animation-18 60s infinite;
  opacity: 0.54;
  height: 8px;
  width: 8px;
  animation-delay: -3.6s;
  transform: translate3d(1vw, 78vh, 67px);
  background: #268bd9;
}
@keyframes particle-animation-19 {
  100% {
    transform: translate3d(47vw, 3vh, 83px);
  }
}
.particle:nth-child(19) {
  animation: particle-animation-19 60s infinite;
  opacity: 0.24;
  height: 10px;
  width: 10px;
  animation-delay: -3.8s;
  transform: translate3d(29vw, 27vh, 58px);
  background: #2685d9;
}
@keyframes particle-animation-20 {
  100% {
    transform: translate3d(71vw, 58vh, 50px);
  }
}
.particle:nth-child(20) {
  animation: particle-animation-20 60s infinite;
  opacity: 0.49;
  height: 8px;
  width: 8px;
  animation-delay: -4s;
  transform: translate3d(89vw, 62vh, 58px);
  background: #d9266b;
}
@keyframes particle-animation-21 {
  100% {
    transform: translate3d(1vw, 13vh, 34px);
  }
}
.particle:nth-child(21) {
  animation: particle-animation-21 60s infinite;
  opacity: 0.16;
  height: 6px;
  width: 6px;
  animation-delay: -4.2s;
  transform: translate3d(16vw, 63vh, 92px);
  background: #c7d926;
}
@keyframes particle-animation-22 {
  100% {
    transform: translate3d(62vw, 83vh, 8px);
  }
}
.particle:nth-child(22) {
  animation: particle-animation-22 60s infinite;
  opacity: 0.46;
  height: 7px;
  width: 7px;
  animation-delay: -4.4s;
  transform: translate3d(43vw, 3vh, 36px);
  background: #26d96e;
}
@keyframes particle-animation-23 {
  100% {
    transform: translate3d(8vw, 11vh, 17px);
  }
}
.particle:nth-child(23) {
  animation: particle-animation-23 60s infinite;
  opacity: 0.1;
  height: 6px;
  width: 6px;
  animation-delay: -4.6s;
  transform: translate3d(12vw, 11vh, 54px);
  background: #2cd926;
}
@keyframes particle-animation-24 {
  100% {
    transform: translate3d(42vw, 44vh, 70px);
  }
}
.particle:nth-child(24) {
  animation: particle-animation-24 60s infinite;
  opacity: 0.47;
  height: 8px;
  width: 8px;
  animation-delay: -4.8s;
  transform: translate3d(46vw, 33vh, 57px);
  background: #d97126;
}
@keyframes particle-animation-25 {
  100% {
    transform: translate3d(66vw, 52vh, 19px);
  }
}
.particle:nth-child(25) {
  animation: particle-animation-25 60s infinite;
  opacity: 0.13;
  height: 8px;
  width: 8px;
  animation-delay: -5s;
  transform: translate3d(74vw, 59vh, 23px);
  background: #26d9bb;
}
@keyframes particle-animation-26 {
  100% {
    transform: translate3d(35vw, 82vh, 67px);
  }
}
.particle:nth-child(26) {
  animation: particle-animation-26 60s infinite;
  opacity: 0.45;
  height: 10px;
  width: 10px;
  animation-delay: -5.2s;
  transform: translate3d(49vw, 79vh, 12px);
  background: #d98826;
}
@keyframes particle-animation-27 {
  100% {
    transform: translate3d(85vw, 39vh, 97px);
  }
}
.particle:nth-child(27) {
  animation: particle-animation-27 60s infinite;
  opacity: 0.28;
  height: 10px;
  width: 10px;
  animation-delay: -5.4s;
  transform: translate3d(78vw, 72vh, 78px);
  background: #8826d9;
}
@keyframes particle-animation-28 {
  100% {
    transform: translate3d(15vw, 28vh, 12px);
  }
}
.particle:nth-child(28) {
  animation: particle-animation-28 60s infinite;
  opacity: 0.18;
  height: 9px;
  width: 9px;
  animation-delay: -5.6s;
  transform: translate3d(51vw, 47vh, 1px);
  background: #c426d9;
}
@keyframes particle-animation-29 {
  100% {
    transform: translate3d(68vw, 5vh, 77px);
  }
}
.particle:nth-child(29) {
  animation: particle-animation-29 60s infinite;
  opacity: 0.46;
  height: 7px;
  width: 7px;
  animation-delay: -5.8s;
  transform: translate3d(66vw, 12vh, 32px);
  background: #26d95f;
}
@keyframes particle-animation-30 {
  100% {
    transform: translate3d(25vw, 89vh, 37px);
  }
}
.particle:nth-child(30) {
  animation: particle-animation-30 60s infinite;
  opacity: 0.46;
  height: 6px;
  width: 6px;
  animation-delay: -6s;
  transform: translate3d(20vw, 37vh, 47px);
  background: #262cd9;
}

I used an online tool to do the conversion. You can also install a similar tool onto your computer if you want. Check the internet for more info.

From this point I adapted the CSS for this use case.

nickleb · September 28, 2020

Thank you so much @creedon ! I so so appreciate your help and the explanation as well. Thank you!

creedon · September 28, 2020

4 minutes ago, nickleb said:

Thank you so much

Thank you! I appreciate the like and the upvote for my answer!

creedon · September 28, 2020

I tweaked the style tag a bit after seeing how the previous version interacted with your site. Please see the previously upvoted answer for the new style tag .

I think you will find that the particles cover a broader region of the browser window.

nickleb · September 28, 2020

Thank you! Appreciate your help 🙂

oldegray · January 23, 2021

So great @creedon thanks for making sense of this codepen connection. To add this to every page on the site would I just add an HTML block on each page? Thank you for your help

tuanphan · January 24, 2021

7 hours ago, oldegray said:

So great @creedon thanks for making sense of this codepen connection. To add this to every page on the site would I just add an HTML block on each page? Thank you for your help

You can also try adding to Code Injection > Footer

creedon · January 25, 2021

20 hours ago, tuanphan said:

You can also try adding to Code Injection > Footer

It's worth a try!

This is not plug and play code. It was designed for one specific use case.

I just tried installing the code site wide for a test on a v7.1 site and most of the effect is hidden by page sections. So it would need to be tweaked to work there or the site tweaked to work with the code. Page sections settings and such.

Here is a pic of my v7.1 test site with a page with a small page section at the top.

From the pic we can see the page section is blocking the effect.

creedon · January 25, 2021

When added in a code block on v7.1 it works a treat.

creedon · January 25, 2021

If you throw a z-index on the particles rule-set for a site-wide effect you can bring the particles up over other elements.

.particle {

  border-radius: 50%;
  left: 0;
  position: fixed; /* relative to browser window */
  top: 0;
  z-index: 2; /* increase number to bring the particles up over other elements */
  
  }

Add CSS animated background from codepen to squarespace site

Recommended Posts

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Archived

News

Squarespace Webinars

Hire a Designer

Support

Community

Developers

Resources