First off thank you for your help!! I added the above code to my functions.php file however it doesn’t seem to be loading.
This is my page: https://palilastudio.com/rain/
The bills according to the js are supposed to be all over the place, not neatly organized in rows like that. So it seems its not working. What I did so far is add that code to my functions.php. I added “bills” and “makeItRain” to the class of the section on my page. And I Added this css to my customizer:
span.billsbillsbills {
padding: 5px;
display: block;
position: relative;
z-index: 100;
-webkit-animation: sway 30s ease-out;
animation: sway 30s ease-out;
}
@-webkit-keyframes drop{
0%{
top:0%;
}
100%{
top: 100%;
}
}
span.coinsCoinsCoins{
padding: 5px;
display: block;
position: absolute;
z-index: 100;
-webkit-animation: drop 4s linear;
animation: drop 4s linear;
}
.bills {
position: static;
z-index: 0 !important;
}
.bills:after {
content: ‘’;
display: block;
padding:5px;
position: absolute;
z-index:0;
top:10px;
left:0px;
right:0px;
bottom:0;
pointer-events:none;
background-image: url(‘https://palilastudio.com/wp-content/uploads/2018/01/bill.svg’),url('https://palilastudio.com/wp-content/uploads/2018/01/bill.svg’);
-webkit-animation: sway 30s ease-out infinite;
animation: sway 30s ease-out infinite;
}
@-webkit-keyframes sway {
0%{
top:-20px;
-webkit-transform: rotateX(-20deg);
transform: rotateX(-20deg);
}
3%{
margin-left: -2%;
-webkit-transform: rotateX(-80deg);
transform: rotateX(-80deg);
}
7%{
margin-left: 1%;
-webkit-transform: rotateX(-170deg);
transform: rotateX(-170deg);
}
10% {
margin-left: 2%;
-webkit-transform: rotateX(-230deg);
transform: rotateX(-230deg);
}
16% {
margin-left: 5%;
-webkit-transform: rotateX(-250deg);
transform: rotateX(-250deg);
}
22% {
margin-left: 3%;
-webkit-transform: rotateX(-280deg);
transform: rotateX(-280deg);
}
28% {
margin-left: 0%;
-webkit-transform: rotateX(-300deg);
transform: rotateX(-300deg);
}
35% {
margin-left: 3.5%;
-webkit-transform: rotateX(-310deg);
transform: rotateX(-310deg);
}
48% {
margin-left: 1%;
-webkit-transform: rotateX(-350deg);
transform: rotateX(-350deg);
}
58% {
margin-left: 3.5%;
-webkit-transform: rotateX(-310deg);
transform: rotateX(-310deg);
}
70%{
margin-left: 0.5%;
-webkit-transform: rotateX(-280deg);
transform: rotateX(-280deg);
}
83% {
margin-left: -2%;
-webkit-transform: rotateX(-230deg);
transform: rotateX(-230deg);
}
95% {
margin-left: 2%;
-webkit-transform: rotateX(-200deg);
transform: rotateX(-200deg);
}
100% {
margin-left: 3%;
top: 100%; }
}
What am I doing wrong??
TIA!!!,
Rena