Scroll Down Arrow on Large Format Section

Hello Squarespace Community,

I have the new Squarespace Template / Editor and made a Full Page Section with the Format, Section Height "L" (Large).

However, I want to add an scroll down arrow at the bottom, because otherwise it appears to the viewer that the Large Section is already the full page.
I hope you understand what I mean, if not, please ask me to clarify further.

Easy to do if you just add one of these which can resize. These are examples, there are png files and gif clipart files totally fee all over the web. Doesn't take code to make them work either.

11 minutes ago, derricksrandomviews said:

"It's easy" isn't specific enough. How about a link to the site with this gif?

 

Easy to do if you just add one of these which can resize. These are examples, there are png files and gif clipart files totally fee all over the web. Doesn't take code to make them work either.

 

http://clipart-library.com/red-arrow-down.html 

You can also right click the gif and the png and "save image as"  to your desktop to upload to your site. 

15 minutes ago, derricksrandomviews said:

Stationary arrows are very easy to find, true. Do you have a link for the bouncing white arrow?

 

"It's easy" isn't specific enough. How about a link to the site with this gif?

 

Easy to do if you just add one of these which can resize. These are examples, there are png files and gif clipart files totally fee all over the web. Doesn't take code to make them work either.

 

Its here to save or 

If you want to code it:

https://freefrontend.com/css-arrows/

This seems like a great site (FreeFrontEnd.com) with free CSS for all kinds of animated-arrow gifs, including just what I need. https://codepen.io/raf187/pen/BvgGRQ

I just don't know why it won't display the arrows on my site. Here is that code, in case you can use it: 

body{
  margin: 0;
  padding: 0;
  background-color: #000;
}
.arrow{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
.arrow span{
    display: block;
    width: 30px;
    height: 30px;
    border-bottom: 5px solid #06A8FF;
    border-right: 5px solid #06A8FF;
    transform: rotate(45deg);
    margin: -10px;
    animation: animate 2s infinite;
}
.arrow span:nth-child(2){
    animation-delay: -0.2s;
}
.arrow span:nth-child(3){
    animation-delay: -0.4s;
}
@keyframes animate {
    0%{
        opacity: 0;
        transform: rotate(45deg) translate(-20px,-20px);
    }
    50%{
        opacity: 1;
    }
    100%{
        opacity: 0;
        transform: rotate(45deg) translate(20px,20px);
    }
}

Sometimes, depending on the template code doesn't do anything, its missing something so in this case inserting a gif image might do it. I have provided you with four that you can download from here, and resize on your page using spacers if necessary. We are needed an arrow for this thread! 

I need my arrow to overlay my homepage's banner/header image, rather than it being separate/under it and, similarly, Mo94 wants it visible before any scrolling.

Are you suggesting that I just add an image section in 7.1 and then paste a gif into it? With all the padding under the banner/header image, I'd be surprised if the arrow would be visible without scrolling first.

Concrete suggestions always welcome!

On 5/18/2020 at 3:45 PM, sjet said:

This seems like a great site (FreeFrontEnd.com) with free CSS for all kinds of animated-arrow gifs, including just what I need. https://codepen.io/raf187/pen/BvgGRQ

I just don't know why it won't display the arrows on my site.

Hey sjet,

Did you put the HTML on your site as well? All of that CSS is useless unless it's properly applied to identify with the HTML code.

If you haven't already, you need to put the HTML code in a Code Block in whichever section you're trying to display the arrow. Also, the whole "body" section of the CSS isn't necessary for your application.

I hope this helps!