Adding Falling Leaves and Falling Snow from CodePen

Hello,

I'd love to add two codebase codes to my site. One is for falling leaves, and the other for snow. I can't seem to get either to work. I've tried to add with codeblock and it doesn't seem to be working.

Leaves:
https://codepen.io/MAW/full/KdmwMb
 

Snow:
https://codepen.io/DavidJCobb/pen/XWxZXrQ

Any help would be appreciated!

Hi,

Add this to specific section, or whole specific page or entire site?

The whole site would be ideal!

I've tried everything, it doesn't seem to work

With Leaves effect, add this code to Website Tools (under Not Linked) > Code Injection > Footer

See demo: https://tuanphan3.squarespace.com/failing-leaves?noredirect

pass: abc

<div id="container"></div>
<style>
.dot{
  width:35px;
  height:35px;
  position:absolute;
  background: url(http://www.clipartqueen.com/image-files/red-lobed-fall-clipart-leaf.png);
  background-size: 100% 100%;
}
  div#container {
    width: 100% !important;
    height: 100% !important;
}

section, .section-border, .section-background {
    background-color: transparent !important;
}
</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script>
<script>
/* a Pen by Diaco m.lotfollahi  : https://diacodesign.com */
var falling = true;

TweenLite.set("#container",{perspective:600})
TweenLite.set("img",{xPercent:"-50%",yPercent:"-50%"})

var total = 30;
var container = document.getElementById("container"),	w = window.innerWidth , h = window.innerHeight;
 
 for (i=0; i<total; i++){ 
   var Div = document.createElement('div');
   TweenLite.set(Div,{attr:{class:'dot'},x:R(0,w),y:R(-200,-150),z:R(-200,200)});
   container.appendChild(Div);
   animm(Div);
 }
 
 function animm(elm){   
   TweenMax.to(elm,R(6,15),{y:h+100,ease:Linear.easeNone,repeat:-1,delay:-15});
   TweenMax.to(elm,R(4,8),{x:'+=100',rotationZ:R(0,180),repeat:-1,yoyo:true,ease:Sine.easeInOut});
   TweenMax.to(elm,R(2,8),{rotationX:R(0,360),rotationY:R(0,360),repeat:-1,yoyo:true,ease:Sine.easeInOut,delay:-5});
 };

function R(min,max) {return min+Math.random()*(max-min)};






/* a Pen by Diaco m.lotfollahi  : https://diacodesign.com */
</script>

With Snow, add this code to Code Injection > Footer

See demo: https://tuanphan3.squarespace.com/snow?noredirect

pass: abc

<style>
  section, .section-border, .section-background {
    background-color: transparent !important;
}
html {
  background: #000;
  min-height: 100vh;
}

html::after {
  z-index: 9999 !important;
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  user-select: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640px 480px' width='640px' height='480px'>   %3Cstyle> circle { r: 3px; } %3C/style>   %3Cg fill='%239098a0'> %3Ccircle cx='591px' cy='99px' /> %3Ccircle cx='591px' cy='363px' /> %3Ccircle cx='543px' cy='123px' /> %3Ccircle cx='525px' cy='15px' /> %3Ccircle cx='519px' cy='195px' /> %3Ccircle cx='501px' cy='183px' /> %3Ccircle cx='465px' cy='231px' /> %3Ccircle cx='465px' cy='375px' /> %3Ccircle cx='453px' cy='159px' /> %3Ccircle cx='447px' cy='435px' /> %3Ccircle cx='435px' cy='3px' /> %3Ccircle cx='399px' cy='123px' /> %3Ccircle cx='387px' cy='171px' /> %3Ccircle cx='381px' cy='207px' /> %3Ccircle cx='63px' cy='111px' /> %3Ccircle cx='357px' cy='471px' /> %3Ccircle cx='345px' cy='279px' /> %3Ccircle cx='345px' cy='63px' /> %3Ccircle cx='333px' cy='111px' /> %3Ccircle cx='321px' cy='183px' /> %3Ccircle cx='219px' cy='243px' /> %3Ccircle cx='213px' cy='375px' /> %3Ccircle cx='207px' cy='171px' /> %3Ccircle cx='189px' cy='111px' /> %3Ccircle cx='189px' cy='351px' /> %3Ccircle cx='177px' cy='423px' /> %3Ccircle cx='177px' cy='327px' /> %3Ccircle cx='141px' cy='171px' /> %3Ccircle cx='111px' cy='339px' /> %3Ccircle cx='93px' cy='255px' /> %3Ccircle cx='81px' cy='39px' /> %3Ccircle cx='57px' cy='447px' /> %3Ccircle cx='57px' cy='351px' /> %3Ccircle cx='75px' cy='411px' /> %3Ccircle cx='33px' cy='225px' /> %3Ccircle cx='33px' cy='279px' /> %3Ccircle cx='165px' cy='15px' /> %3Ccircle cx='27px' cy='387px' /> %3Ccircle cx='21px' cy='39px' />   %3C/g>%3C/svg>"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640px 480px' width='640px' height='480px'>   %3Cstyle> circle { r: 3px; } %3C/style>   %3Cg fill='%236e757c'> %3Ccircle cx='591px' cy='99px' /> %3Ccircle cx='591px' cy='363px' /> %3Ccircle cx='543px' cy='123px' /> %3Ccircle cx='525px' cy='15px' /> %3Ccircle cx='519px' cy='195px' /> %3Ccircle cx='501px' cy='183px' /> %3Ccircle cx='465px' cy='231px' /> %3Ccircle cx='465px' cy='375px' /> %3Ccircle cx='453px' cy='159px' /> %3Ccircle cx='447px' cy='435px' /> %3Ccircle cx='435px' cy='3px' /> %3Ccircle cx='399px' cy='123px' /> %3Ccircle cx='387px' cy='171px' /> %3Ccircle cx='381px' cy='207px' /> %3Ccircle cx='63px' cy='111px' /> %3Ccircle cx='357px' cy='471px' /> %3Ccircle cx='345px' cy='279px' /> %3Ccircle cx='345px' cy='63px' /> %3Ccircle cx='333px' cy='111px' /> %3Ccircle cx='321px' cy='183px' /> %3Ccircle cx='219px' cy='243px' /> %3Ccircle cx='213px' cy='375px' /> %3Ccircle cx='207px' cy='171px' /> %3Ccircle cx='189px' cy='111px' /> %3Ccircle cx='189px' cy='351px' /> %3Ccircle cx='177px' cy='423px' /> %3Ccircle cx='177px' cy='327px' /> %3Ccircle cx='141px' cy='171px' /> %3Ccircle cx='111px' cy='339px' /> %3Ccircle cx='93px' cy='255px' /> %3Ccircle cx='81px' cy='39px' /> %3Ccircle cx='57px' cy='447px' /> %3Ccircle cx='57px' cy='351px' /> %3Ccircle cx='75px' cy='411px' /> %3Ccircle cx='33px' cy='225px' /> %3Ccircle cx='33px' cy='279px' /> %3Ccircle cx='165px' cy='15px' /> %3Ccircle cx='27px' cy='387px' /> %3Ccircle cx='21px' cy='39px' />   %3C/g>%3C/svg>"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640px 480px' width='640px' height='480px'>   %3Cstyle> circle { r: 3px; } %3C/style>   %3Cg fill='%233e434a'> %3Ccircle cx='591px' cy='99px' /> %3Ccircle cx='591px' cy='363px' /> %3Ccircle cx='543px' cy='123px' /> %3Ccircle cx='525px' cy='15px' /> %3Ccircle cx='519px' cy='195px' /> %3Ccircle cx='501px' cy='183px' /> %3Ccircle cx='465px' cy='231px' /> %3Ccircle cx='465px' cy='375px' /> %3Ccircle cx='453px' cy='159px' /> %3Ccircle cx='447px' cy='435px' /> %3Ccircle cx='435px' cy='3px' /> %3Ccircle cx='399px' cy='123px' /> %3Ccircle cx='387px' cy='171px' /> %3Ccircle cx='381px' cy='207px' /> %3Ccircle cx='63px' cy='111px' /> %3Ccircle cx='357px' cy='471px' /> %3Ccircle cx='345px' cy='279px' /> %3Ccircle cx='345px' cy='63px' /> %3Ccircle cx='333px' cy='111px' /> %3Ccircle cx='321px' cy='183px' /> %3Ccircle cx='219px' cy='243px' /> %3Ccircle cx='213px' cy='375px' /> %3Ccircle cx='207px' cy='171px' /> %3Ccircle cx='189px' cy='111px' /> %3Ccircle cx='189px' cy='351px' /> %3Ccircle cx='177px' cy='423px' /> %3Ccircle cx='177px' cy='327px' /> %3Ccircle cx='141px' cy='171px' /> %3Ccircle cx='111px' cy='339px' /> %3Ccircle cx='93px' cy='255px' /> %3Ccircle cx='81px' cy='39px' /> %3Ccircle cx='57px' cy='447px' /> %3Ccircle cx='57px' cy='351px' /> %3Ccircle cx='75px' cy='411px' /> %3Ccircle cx='33px' cy='225px' /> %3Ccircle cx='33px' cy='279px' /> %3Ccircle cx='165px' cy='15px' /> %3Ccircle cx='27px' cy='387px' /> %3Ccircle cx='21px' cy='39px' />   %3C/g>%3C/svg>");
  background-size: 640px 480px, 480px 360px, 256px 192px;
  --snowfall-pos-x: 0;
  --snowfall-pos-y: 0;
  background-repeat: repeat;
  background-position: 0 0;
}

/* no-op condition for scoping */
html::after {
  animation: snowfall-no-composition 96s linear infinite;
}

@keyframes snowfall-no-composition {
  0% {
    background-position: 0 0, 0 0, 0 0;
  }
  3.125% {
    background-position: -60px 480px, -45px 360px, -24px 192px;
  }
  33.3333333333% {
    background-position: -640px 5120px, -480px 3840px, -256px 2048px;
  }
  100% {
    background-position: -1920px 15360px, -1440px 11520px, -768px 6144px;
  }
}
@supports (animation-composition: replace, add, add) {
  /**/
  html::after {
    animation: snowfall-x 32s linear infinite, snowfall-y 3s linear infinite, snowfall-x-wobble-1 8s cubic-bezier(0.35, 0, 0.65, 0.99) infinite, snowfall-x-wobble-2 8s cubic-bezier(0.35, 0, 0.65, 0.99) infinite;
    animation-composition: replace, add, add, add;
    animation-delay: 0s, 0s, 0s, 0.23s;
  }
}
@keyframes snowfall-y {
  from {
    background-position: 0 0, 0 0, 0 0;
  }
  to {
    background-position: 0 480px, 0 360px, 0 192px;
  }
}
@keyframes snowfall-x {
  from {
    background-position: 0 0, 0 0, 0 0;
  }
  to {
    background-position: -640px 0, -480px 0, -256px 0;
  }
}
@keyframes snowfall-x-wobble-1 {
  0% {
    background-position: 16px 0;
  }
  50% {
    background-position: -16px 0;
  }
  100% {
    background-position: 16px 0;
  }
}
@keyframes snowfall-x-wobble-2 {
  0% {
    background-position: 0 0, 12px 0;
  }
  50% {
    background-position: 0 0, -12px 0;
  }
  100% {
    background-position: 0 0, 12px 0;
  }
}
@keyframes snowfall-x-wobble {
  0% {
    background-position: 16px 0, 12px 0, 6.4px 0;
  }
  50% {
    background-position: -16px 0, -12px 0, -6.4px 0;
  }
  100% {
    background-position: 16px 0, 12px 0, 6.4px 0;
  }
}
</style>