Jump to content

Bouncing scroll down indicator in Squarespace 7.1?

Recommended Posts

Hello there,

To add an animated arrow down element, we'll need to use a Code Block and Custom CSS.

1) Create a Code Block and place the block directly underneath the "Get A Quote" button.

2) In the Code Block menu, you'll see "<p> hello world! </p>" -- Remove the entire line and replace it with the following: 

<div class="arrow">
  <span></span>
</div>

3) You can now save and close the page editor. Return to "Home" and navigate to Design > Custom CSS.

4) To animate and place the element onto your website you can paste the following into the Custom CSS box:

 .arrow{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
.arrow span{
    display: block;
    width: 30px;
    height: 30px;
    border-bottom: 3px solid #000;
    border-right: 3px solid #000;
    transform: rotate(45deg);
    margin: -10px;
    animation: animate 1.8s ease infinite;
}
@keyframes animate {
    0%{
        opacity: 0;
        transform: rotate(45deg) translate(-20px,-20px);
    }
    50%{
        opacity: 1;
    }
    100%{
        opacity: 0;
        transform: rotate(45deg) translate(20px,20px);
    }
}

5) You should start to see the arrow animate downward in the center of the page, directly under the "Get A Quote" button. 

You can customize the "stroke" of the arrow by adjusting the dimensions of the Border-Bottom and Border-Right "px" properties.

You can adjust the color of the arrow ("stroke") by inserting a hex/rgb/rgba color of your choice. Simply replace the "#000" with the color/format of your choice for both Border-Bottom and Border-Right.

You can adjust the speed of the downwards animation by entering new timings and transitions. The CSS format of the animation shown above is listed below and I would encourage you to experiment with different properties for transition-duration and timing-function. 
 

Quote

 

animation: "name-of-animation_transition-duration_timing-function_iteration-count";

animation: "animate" -- refers to the name of the @keyframes animation.

transition-duration: "1.8s" -- refers to how long the animation will take to complete. 

timing-function: "ease" -- in this case, refers to how "smooth" the animation is.

iteration-count: "infinite" -- refers to how many times the animation should take place.

 

Let me know if you need any additional help. Hope this provided a solution for you! 

Cheers,

Dan

Link to comment
22 hours ago, Wolfsilon said:

Hello there,

To add an animated arrow down element, we'll need to use a Code Block and Custom CSS.

1) Create a Code Block and place the block directly underneath the "Get A Quote" button.

2) In the Code Block menu, you'll see "<p> hello world! </p>" -- Remove the entire line and replace it with the following: 


<div class="arrow">
  <span></span>
</div>

3) You can now save and close the page editor. Return to "Home" and navigate to Design > Custom CSS.

4) To animate and place the element onto your website you can paste the following into the Custom CSS box:


 .arrow{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
.arrow span{
    display: block;
    width: 30px;
    height: 30px;
    border-bottom: 3px solid #000;
    border-right: 3px solid #000;
    transform: rotate(45deg);
    margin: -10px;
    animation: animate 1.8s ease infinite;
}
@keyframes animate {
    0%{
        opacity: 0;
        transform: rotate(45deg) translate(-20px,-20px);
    }
    50%{
        opacity: 1;
    }
    100%{
        opacity: 0;
        transform: rotate(45deg) translate(20px,20px);
    }
}

5) You should start to see the arrow animate downward in the center of the page, directly under the "Get A Quote" button. 

You can customize the "stroke" of the arrow by adjusting the dimensions of the Border-Bottom and Border-Right "px" properties.

You can adjust the color of the arrow ("stroke") by inserting a hex/rgb/rgba color of your choice. Simply replace the "#000" with the color/format of your choice for both Border-Bottom and Border-Right.

You can adjust the speed of the downwards animation by entering new timings and transitions. The CSS format of the animation shown above is listed below and I would encourage you to experiment with different properties for transition-duration and timing-function. 
 

Let me know if you need any additional help. Hope this provided a solution for you! 

Cheers,

Dan

Worked great. Thanks so much, Dan!

Link to comment
  • 3 months later...
On 8/28/2021 at 4:42 PM, Billie123 said:

This is awesome! I was wondering if there's a way to do this with a png. arrow I've created? 

 

 

V Down copy.png

Hi, uploaded image to your site then replace this

<div class="arrow">
  <span></span>
</div>

with this

<div class="arrow">
  <img src="enter image url here"/>
</div>

 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 4 weeks later...
  • 2 months later...
On 5/10/2021 at 10:10 PM, Wolfsilon said:

Hello there,

To add an animated arrow down element, we'll need to use a Code Block and Custom CSS.

1) Create a Code Block and place the block directly underneath the "Get A Quote" button.

2) In the Code Block menu, you'll see "<p> hello world! </p>" -- Remove the entire line and replace it with the following: 

<div class="arrow">
  <span></span>
</div>

3) You can now save and close the page editor. Return to "Home" and navigate to Design > Custom CSS.

4) To animate and place the element onto your website you can paste the following into the Custom CSS box:

 .arrow{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
.arrow span{
    display: block;
    width: 30px;
    height: 30px;
    border-bottom: 3px solid #000;
    border-right: 3px solid #000;
    transform: rotate(45deg);
    margin: -10px;
    animation: animate 1.8s ease infinite;
}
@keyframes animate {
    0%{
        opacity: 0;
        transform: rotate(45deg) translate(-20px,-20px);
    }
    50%{
        opacity: 1;
    }
    100%{
        opacity: 0;
        transform: rotate(45deg) translate(20px,20px);
    }
}

5) You should start to see the arrow animate downward in the center of the page, directly under the "Get A Quote" button. 

You can customize the "stroke" of the arrow by adjusting the dimensions of the Border-Bottom and Border-Right "px" properties.

You can adjust the color of the arrow ("stroke") by inserting a hex/rgb/rgba color of your choice. Simply replace the "#000" with the color/format of your choice for both Border-Bottom and Border-Right.

You can adjust the speed of the downwards animation by entering new timings and transitions. The CSS format of the animation shown above is listed below and I would encourage you to experiment with different properties for transition-duration and timing-function. 
 

Let me know if you need any additional help. Hope this provided a solution for you! 

Cheers,

Dan

The arrow and codes worked perfect!

but i have an issue. the arrow is to highly placed on my site. i want to be just at very bottom of my background photo.

i made a circle of where i would like the arrow to be placed compared to where it is placed 

Screenshot 2021-12-22 at 02.38.04.png

Link to comment
On 12/22/2021 at 8:41 AM, Andre_99 said:

The arrow and codes worked perfect!

but i have an issue. the arrow is to highly placed on my site. i want to be just at very bottom of my background photo.

i made a circle of where i would like the arrow to be placed compared to where it is placed 

Screenshot 2021-12-22 at 02.38.04.png

If you share link to page in screenshot, we can check & help easier

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 3 months later...
On 4/7/2022 at 3:38 PM, Beagood said:

@tuanaphan

Hi - I'm trying to animate the png arrow on this site: 

https://whale-alligator-dtp9.squarespace.com/

p/w: Applesandpears22!

But can't seem to get it to work using the code on this question. I'd like it to bounce three times and then stop...

Password is incorrect

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
On 4/16/2022 at 4:14 AM, StevieJSmall said:

@tuanphan I have the arrow placed where I want on Desktop using the code block function but on mobile, I need to move the arrow down towards the bottom of the section. How can I do that?

steviejsmall.com

p/w steviej

Hi. Which page? I don't see arrow on homepage

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 1 month later...
On 5/10/2021 at 3:10 PM, Wolfsilon said:

Hello there,

To add an animated arrow down element, we'll need to use a Code Block and Custom CSS.

1) Create a Code Block and place the block directly underneath the "Get A Quote" button.

2) In the Code Block menu, you'll see "<p> hello world! </p>" -- Remove the entire line and replace it with the following: 

<div class="arrow">
  <span></span>
</div>

3) You can now save and close the page editor. Return to "Home" and navigate to Design > Custom CSS.

4) To animate and place the element onto your website you can paste the following into the Custom CSS box:

 .arrow{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
.arrow span{
    display: block;
    width: 30px;
    height: 30px;
    border-bottom: 3px solid #000;
    border-right: 3px solid #000;
    transform: rotate(45deg);
    margin: -10px;
    animation: animate 1.8s ease infinite;
}
@keyframes animate {
    0%{
        opacity: 0;
        transform: rotate(45deg) translate(-20px,-20px);
    }
    50%{
        opacity: 1;
    }
    100%{
        opacity: 0;
        transform: rotate(45deg) translate(20px,20px);
    }
}

5) You should start to see the arrow animate downward in the center of the page, directly under the "Get A Quote" button. 

You can customize the "stroke" of the arrow by adjusting the dimensions of the Border-Bottom and Border-Right "px" properties.

You can adjust the color of the arrow ("stroke") by inserting a hex/rgb/rgba color of your choice. Simply replace the "#000" with the color/format of your choice for both Border-Bottom and Border-Right.

You can adjust the speed of the downwards animation by entering new timings and transitions. The CSS format of the animation shown above is listed below and I would encourage you to experiment with different properties for transition-duration and timing-function. 
 

Let me know if you need any additional help. Hope this provided a solution for you! 

Cheers,

Dan

 

On 12/25/2021 at 2:15 AM, tuanphan said:

If you share link to page in screenshot, we can check & help easier

Hey Tuanphan! I was wondering if there's a way to be able to have the arrow fade out once the viewer scrolls down and reappear if they go back to the top of the site?

My website is 

joecook.design

password: 1234

 

Thanks!

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.