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

Bouncing scroll down indicator in Squarespace 7.1?


EbonyW

Question

  • Answers 2
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

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

Worked great. Thanks so much, Dan!

Posted Images

2 answers to this question

Recommended Posts

  • 0

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

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...