Jump to content

Scroll Down Arrow on Large Format Section

Recommended Posts

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.

Link to comment
  • Replies 9
  • Views 7.5k
  • Created
  • Last Reply
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.

 

gooey-scroll-arrow.gif

ATbK5LnXc.png

 

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

 

gooey-scroll-arrow.gif

ATbK5LnXc.png

 

Link to comment

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);
    }
}

Link to comment

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!

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

Looking for help with a project?
💻 www.connectionmadedesign.com
 for hire on Upwork (Top Rated Plus)

Link to comment

Archived

This topic is now archived and is closed to further replies.

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