Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Add CSS animated background from codepen to squarespace site


nickleb
Go to solution Solved by creedon,

Question

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.

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


<style>
body {
    background: #ffffff;
}

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

 

 

 

 

Edited by nickleb
figured out the second part of my question yay!!!!
Link to post
  • Answers 8
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

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

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;

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

Posted Images

8 answers to this question

Recommended Posts

  • 0

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.

Edited by creedon

Hello I'm Thomas. I've been getting websites up and running for 26 years. I want to help you at whatever level meets your needs, from as little (if you're a DIYer) to as much as you need.

Link to post
  • 0

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.

1009280280_ScreenShot2020-09-27at1_50_11PM.png.2536a2cee74523532089434ee0f30203.png

Hello I'm Thomas. I've been getting websites up and running for 26 years. I want to help you at whatever level meets your needs, from as little (if you're a DIYer) to as much as you need.

Link to post
  • 0
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.

1009280280_ScreenShot2020-09-27at1_50_11PM.png.2536a2cee74523532089434ee0f30203.png

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!

Link to post
  • 0

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.

Hello I'm Thomas. I've been getting websites up and running for 26 years. I want to help you at whatever level meets your needs, from as little (if you're a DIYer) to as much as you need.

Link to post
  • 0
4 minutes ago, nickleb said:

Thank you so much

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

Hello I'm Thomas. I've been getting websites up and running for 26 years. I want to help you at whatever level meets your needs, from as little (if you're a DIYer) to as much as you need.

Link to post
  • 0

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.

Hello I'm Thomas. I've been getting websites up and running for 26 years. I want to help you at whatever level meets your needs, from as little (if you're a DIYer) to as much as you need.

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...