Jump to content

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

Recommended Posts

  • Replies 11
  • Views 1.4k
  • Created
  • Last Reply

Top Posters In This Topic

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>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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!)

Link to comment
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. 

arrowgif.gif

arrow-clipart-animated-15.gif

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?

Link to comment
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. ☹️

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
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?

Link to comment
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 6 months later...
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>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

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

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.