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

Scroll Down Arrow on Large Format Section

Question

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.

Share this post


Link to post

8 answers to this question

Recommended Posts

  • 0
Posted (edited)

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

Edited by derricksrandomviews

Share this post


Link to post
  • 0
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

 

Share this post


Link to post
  • 0
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

 

Share this post


Link to post
  • 0

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

Share this post


Link to post
  • 0
Posted (edited)

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! 

arrow-down.gif

Bounce-arrow.gif

down-arrow.gif

dripping-down-arrow.gif

Edited by derricksrandomviews

Share this post


Link to post
  • 0

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!

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