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

How can I create a bouncing down arrow?

Question

I'd like to create a bouncing down arrow like the one on this website:

https://www.cookmellow.com/

It would be within the index pages of Brine / Marta template -- so that people know to scroll down (particularly on homepage)...

Thanks a lot

Edited by mvpottery
Initial Revision

Share this post


Link to post

8 answers to this question

Recommended Posts

  • 0

Yo Dawg,

You can use CSS to achieve this:

le CSS


 .bounce {
  position:fixed;
  left:50%;
  bottom:0;
  margin-top:-25px;
  margin-left:-25px;
  height:50px;
  width:50px;
  background:red;
  -webkit-animation:bounce 1s infinite;
  -moz-animation:bounce 1s infinite;
  -o-animation:bounce 1s infinite;
  animation:bounce 1s infinite;

}

@-webkit-keyframes bounce {
  0%       { bottom:0px; }
  50%      { bottom:15px; }
  100%     {bottom:30;}
}

 @-moz-keyframes bounce {
  0%       { bottom:0px; }
  50%      { bottom:15px; }
  100%     {bottom:30;}
}

 @-o-keyframes bounce {
  0%       { bottom:0px; }
  50%      { bottom:15px; }
  100%     {bottom:30;}
}

 @keyframes bounce {
  0%       { bottom:0px; }
  50%      { bottom:15px; }
  100%     {bottom:30;}
}

le HTML


<div class="bounce"></div>

Currently it's a red square, however you can use a background-image of an arrow instead.

Edited by YoDawg

Share this post


Link to post
  • 0

Can anyone walk me through actually using this code on my landing page? I'm trying to copy and paste but its not working. I'm not a very savvy code user so a very simple explanation would be awesome. This is exactly the answet to what I need on my site as well...arrow to scroll down

Share this post


Link to post
  • 0

The code is working! Is there a way to get this bouncing arrow on a specific page? For example like displayed on the Squarespace homepage.

Edited by bb1992
Initial Revision

Share this post


Link to post
  • 0

In the design section of your site click on the CSS Editor and that's where you add the code. I had to add this in front of the code above to make it work: .parallax-item .scroll-arrow,I had seen that in someone else's code and it allowed my arrow to start moving. Before that the code was not doing anything. Then I changed the background color to "none" and the red block behind the arrow disappeared.

Share this post


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