Bouncing scroll down indicator in Squarespace 7.1?

Site URL: https://goldfish-crimson-ccfp.squarespace.com/

Hi! 

Could someone share a code or advice for me to add a bouncing downward arrow under the "get a quote" button on this homepage? password: 3

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

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!

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

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? 

 

 

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>

Thank you so much!!! I just saw your reply. That's perfect.

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 

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 

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

I have manged to move the arrow longer down. So my issue is solved
Thanks for replay anyways!

https://varyrtest2022.squarespace.com

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

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

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

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

Sorry, try again: Applesandpears22!

On 4/11/2022 at 5:15 PM, Beagood said:

Sorry, try again: Applesandpears22!

Still incorrect password

@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

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

On 4/18/2022 at 1:50 PM, tuanphan said:

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

Hi - I ended up binning the arrow - apologies for not telling you - I forgot I had an outstanding request!

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!

Hey @tuanphan!

This thread has already been super helpful, thanks - been using the code you suggested and already have a customised arrow on my homepage: https://www.corneliusjoksch.com/ 

Just wondering if there's a way to have it fade in only once and then infinitely bouncing slightly? Also how could I give it a hard black drop shadow?

Thanks so much for your help!

On 2/1/2024 at 7:57 PM, cornelius85 said:

Hey @tuanphan!

This thread has already been super helpful, thanks - been using the code you suggested and already have a customised arrow on my homepage: https://www.corneliusjoksch.com/ 

Just wondering if there's a way to have it fade in only once and then infinitely bouncing slightly? Also how could I give it a hard black drop shadow?

Thanks so much for your help!

Hi,

I don't see it on your site. Can you share link to page where you added it?

Hey, yes, sorry you might have to scroll down a little, but it should be on the landing/home page: https://www.corneliusjoksch.com/
This is another issue I only just discovered: I can't get it to stay in the same position relative to the background video I have on my homepage. So on a desktop screen it sits in the right place but on a laptop it gets pushed further down so it sits weirdly on top of my portfolio page.

I have been using some CSS in order for the background video to always be on full screen and width on the homepage:

@media screen and (min-width:1200px) {
body.homepage article section:first-child {
    height: 100vh !important;
}

Not sure if that's got anything to do with it?

Sorry I hope I'm making sense here.

Thanks for your help!

On 2/5/2024 at 11:02 PM, cornelius85 said:

Hey, yes, sorry you might have to scroll down a little, but it should be on the landing/home page: https://www.corneliusjoksch.com/
This is another issue I only just discovered: I can't get it to stay in the same position relative to the background video I have on my homepage. So on a desktop screen it sits in the right place but on a laptop it gets pushed further down so it sits weirdly on top of my portfolio page.

I have been using some CSS in order for the background video to always be on full screen and width on the homepage:

@media screen and (min-width:1200px) {
body.homepage article section:first-child {
    height: 100vh !important;
}

Not sure if that's got anything to do with it?

Sorry I hope I'm making sense here.

Thanks for your help!

Nothing here..

Hey, hum that's weird.. I checked on several computers and I do see it. I've attached a screenshot (from a different computer) - it's hard to spot but it's the red arrow at the bottom of the page. Again if you're looking at the site from a laptop you'll have to scroll down further.

On 2/8/2024 at 8:47 PM, cornelius85 said:

Hey, hum that's weird.. I checked on several computers and I do see it. I've attached a screenshot (from a different computer) - it's hard to spot but it's the red arrow at the bottom of the page. Again if you're looking at the site from a laptop you'll have to scroll down further.

Ah I see now

You try edit First section > Reduce Row Count

That does sort of solve the issue.. However, ideally I would like the scroll-down arrow to always sit at the bottom of the landing page, relative to the bottom of the background video. Would that be possible?

Otherwise I can sort of eyeball it and even it out between the desktop- and laptop screen. But it never entirely sits where it's supposed to (i.e. a bit too high on desktop in order for it to sit at the bottom of the laptop screen).

You can use Classic Editor Section, wen can use code to fixed arrow on bottom of screen easier