Looking to Add Custom CSS to Home Page (Bouncing Down Arrow Animation)

Site URL: https://ashmanfreepress.com

Hi,

I am looking to add this custom css bouncy arrow to the bottom of my website on Squarespace (Template Basil).

https://codepen.io/bisaillonyannick/pen/pvZeGg

Site: ashmanfreepress.com
Password: usa

Can anyone advise me the steps to do this?

Thanks!

Hi. Add a Code Block > Paste this code

<div class="arrow bounce">
  <a class="fa fa-arrow-down fa-2x" href="#"></a>
</div>
<style>
.arrow a {
  color: white;
  text-decoration: none;
}
.arrow {
  text-align: center;
  margin: 8% 0;
}
.bounce {
  -webkit-animation: bounce 2s infinite;
  animation: bounce 2s infinite;
}
@-webkit-keyframes bounce {
  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-30px);
  }
  60% {
    transform: translateY(-15px);
  }
}
@keyframes bounce {
  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-30px);
  }
  60% {
    transform: translateY(-15px);
  }
}

</style>

17 hours ago, tuanphan said:

Hi. Add a Code Block > Paste this code

<div class="arrow bounce">
  <a class="fa fa-arrow-down fa-2x" href="#"></a>
</div>
<style>
.arrow a {
  color: white;
  text-decoration: none;
}
.arrow {
  text-align: center;
  margin: 8% 0;
}
.bounce {
  -webkit-animation: bounce 2s infinite;
  animation: bounce 2s infinite;
}
@-webkit-keyframes bounce {
  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-30px);
  }
  60% {
    transform: translateY(-15px);
  }
}
@keyframes bounce {
  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-30px);
  }
  60% {
    transform: translateY(-15px);
  }
}

</style>

 

Ok, did that, still no bouncing arrow. Any other suggestions? (Thanks for the reply man!)

Add this gif. You can adjust the size with spacers. 

4 minutes ago, derricksrandomviews said:

Add this gif. You can adjust the size with spacers. 

Unfortunately I need a transparent gif, as you can see on my page. Thats why I was looking to get that code to work. 

Sorry I didn't look first. How about this one, it isn't bouncy but see how it looks for you. you will have to resize it with spacers most likely. 

1 hour ago, derricksrandomviews said:

Sorry I didn't look first. How about this one, it isn't bouncy but see how it looks for you. The red one is transparent. YOu will have to resize it with spacers most likely. 

Thanks for this solution. It doesn't seem to be working very elegantly with this layout. Any other tips, guidance, or advice on how to get that code working?

2 hours ago, AshmanFreePress said:

transparent gif

GIFs don't support transparency.

APNG (animated PNG) I believe supports transparency. But I've had a hard time finding free/inexpensive tools that will save/convert to that format. ☹️

On 2/2/2021 at 12:20 AM, tuanphan said:

Hi. Add a Code Block > Paste this code

<div class="arrow bounce">
  <a class="fa fa-arrow-down fa-2x" href="#"></a>
</div>
<style>
.arrow a {
  color: white;
  text-decoration: none;
}
.arrow {
  text-align: center;
  margin: 8% 0;
}
.bounce {
  -webkit-animation: bounce 2s infinite;
  animation: bounce 2s infinite;
}
@-webkit-keyframes bounce {
  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-30px);
  }
  60% {
    transform: translateY(-15px);
  }
}
@keyframes bounce {
  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-30px);
  }
  60% {
    transform: translateY(-15px);
  }
}

</style>

 

Hey, sorry to bother you again, just wanted to bump this up to see if you had any idea why its still now working when I copy and paste that?

10 hours ago, AshmanFreePress said:

Hey, sorry to bother you again, just wanted to bump this up to see if you had any idea why its still now working when I copy and paste that?

Can you share link to page where you inserted the code? We can check easier

how can I make the arrow clickable? to move smoothly down the homepage to a specific section

On 8/19/2021 at 5:20 AM, deekelley said:

how can I make the arrow clickable? to move smoothly down the homepage to a specific section

in the code block, you will see this

<div class="arrow bounce">
  <a class="fa fa-arrow-down fa-2x" href="#"></a>
</div>

edit # to #next-section

<div class="arrow bounce">
  <a class="fa fa-arrow-down fa-2x" href="#next-section"></a>
</div>

next, edit next section >> Add a Code Block >> paste this code

Quote

<span id="next-section"></span>