Jump to content

How to make a stretchy scroll indicator?

Recommended Posts

Site URL: http://spaceforce.design/

Hi guys, I want to make a scroll indicator exactly like this: http://spaceforce.design/

Is there any code I can use for this?

Thanks so much in advance!

Sam Crawford | by Crawford.
 
Multi-award-winning Squarespace expert
 
💸 How I make $500k/year designing Squarespace websites: Watch the video
📱 Hire me to build your Squarespace website: calendly.com/bycrawford/call
 
Did my comment help? To help others benefit, leave a like and mark my answer as 'best'. This lets users scroll straight to the solution they need.
Link to comment
  • Replies 16
  • Views 1.1k
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

Bump!

Sam Crawford | by Crawford.
 
Multi-award-winning Squarespace expert
 
💸 How I make $500k/year designing Squarespace websites: Watch the video
📱 Hire me to build your Squarespace website: calendly.com/bycrawford/call
 
Did my comment help? To help others benefit, leave a like and mark my answer as 'best'. This lets users scroll straight to the solution they need.
Link to comment

They used

HTML

<div id="scroll-down">
				  <span class="arrow-down"></span>
				  <span id="scroll-title">Scroll Down</span>
				</div>

CSS

#scroll-down {
    width: 100%;
    bottom: calc(var(--plank)/2);
    display: block;
    position: fixed;
    padding-top: calc(var(--plank));
    text-align: center;
    left: 0%;
}
#scroll-down::before {
    -webkit-animation: elasticus 1.2s cubic-bezier(1, 0, 0, 1) infinite;
    -moz-animation: elasticus 1.2s cubic-bezier(1, 0, 0, 1) infinite;
    -o-animation: elasticus 1.2s cubic-bezier(1, 0, 0, 1) infinite;
    animation: elasticus 1.2s cubic-bezier(1, 0, 0, 1) infinite;
    position: absolute;
    top: 0px;
    left: 50%;
    margin-left: -1px;
    width: 2px;
    height: calc(var(--plank)*1);
    background: #2c367c;
    content: ' ';
}
.arrow-down {
    display: block;
    margin: 0 auto;
    width: 10px;
    height: calc(var(--plank)/2);
}
#scroll-title {
    display: block;
    color: #2c367c;
    font-size: calc(2vmin + 2px);
    font-family: Favorit;
}

 

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
1 hour ago, tuanphan said:

They used

HTML


<div id="scroll-down">
				  <span class="arrow-down"></span>
				  <span id="scroll-title">Scroll Down</span>
				</div>

CSS


#scroll-down {
    width: 100%;
    bottom: calc(var(--plank)/2);
    display: block;
    position: fixed;
    padding-top: calc(var(--plank));
    text-align: center;
    left: 0%;
}
#scroll-down::before {
    -webkit-animation: elasticus 1.2s cubic-bezier(1, 0, 0, 1) infinite;
    -moz-animation: elasticus 1.2s cubic-bezier(1, 0, 0, 1) infinite;
    -o-animation: elasticus 1.2s cubic-bezier(1, 0, 0, 1) infinite;
    animation: elasticus 1.2s cubic-bezier(1, 0, 0, 1) infinite;
    position: absolute;
    top: 0px;
    left: 50%;
    margin-left: -1px;
    width: 2px;
    height: calc(var(--plank)*1);
    background: #2c367c;
    content: ' ';
}
.arrow-down {
    display: block;
    margin: 0 auto;
    width: 10px;
    height: calc(var(--plank)/2);
}
#scroll-title {
    display: block;
    color: #2c367c;
    font-size: calc(2vmin + 2px);
    font-family: Favorit;
}

 

I have pasted this into a code block but doesn't seem to work. Should I be putting it somewhere else?

Sam Crawford | by Crawford.
 
Multi-award-winning Squarespace expert
 
💸 How I make $500k/year designing Squarespace websites: Watch the video
📱 Hire me to build your Squarespace website: calendly.com/bycrawford/call
 
Did my comment help? To help others benefit, leave a like and mark my answer as 'best'. This lets users scroll straight to the solution they need.
Link to comment
23 minutes ago, bycrawford said:

I have pasted this into a code block but doesn't seem to work. Should I be putting it somewhere else?

This is what it's displayed as. The text moves down on scroll with no line. Not sure why that is?

Screenshot 2020-10-16 at 11.31.13.png

Sam Crawford | by Crawford.
 
Multi-award-winning Squarespace expert
 
💸 How I make $500k/year designing Squarespace websites: Watch the video
📱 Hire me to build your Squarespace website: calendly.com/bycrawford/call
 
Did my comment help? To help others benefit, leave a like and mark my answer as 'best'. This lets users scroll straight to the solution they need.
Link to comment
11 hours ago, tuanphan said:

Add HTML into Code Block, CSS into Design > Custom CSS

Thanks Tuanphan! Still doesn't seem to be working though - it's got me stumped!

If it's easier, you could take a look at the site? The URL is https://lilac-drum-k5bx.squarespace.com/ - pw is atlas

Sam Crawford | by Crawford.
 
Multi-award-winning Squarespace expert
 
💸 How I make $500k/year designing Squarespace websites: Watch the video
📱 Hire me to build your Squarespace website: calendly.com/bycrawford/call
 
Did my comment help? To help others benefit, leave a like and mark my answer as 'best'. This lets users scroll straight to the solution they need.
Link to comment
17 hours ago, creedon said:

@bycrawford The website has expired.

Hey Thomas, have changed to pw to pass - let me know if that works?

Sam Crawford | by Crawford.
 
Multi-award-winning Squarespace expert
 
💸 How I make $500k/year designing Squarespace websites: Watch the video
📱 Hire me to build your Squarespace website: calendly.com/bycrawford/call
 
Did my comment help? To help others benefit, leave a like and mark my answer as 'best'. This lets users scroll straight to the solution they need.
Link to comment

Bump! @tuanphan said that the code used here is CSS variables and needs to be converted to CSS.

Anyone able to assist?

Sam Crawford | by Crawford.
 
Multi-award-winning Squarespace expert
 
💸 How I make $500k/year designing Squarespace websites: Watch the video
📱 Hire me to build your Squarespace website: calendly.com/bycrawford/call
 
Did my comment help? To help others benefit, leave a like and mark my answer as 'best'. This lets users scroll straight to the solution they need.
Link to comment

Add all into Code Block

<div id="container">
<div id="scroll-down">
				  <span class="arrow-down"></span>
				  <span id="scroll-title">Scroll Down</span>
				</div>
</div>
<style>
  


#scroll-down {
    width: 100%;
    top: calc(6vmin/2);
    display: block;
    position: fixed;
    padding-top: calc(6vmin);
    text-align: center;
    left: 0%;
}
@-webkit-keyframes elasticus {
    0% {
        -webkit-transform-origin: 0% 0%;
        -ms-transform-origin: 0% 0%;
        -moz-transform-origin: 0% 0%;
        -o-transform-origin: 0% 0%;
        transform-origin: 0% 0%;
        -webkit-transform: scale(1, 0);
        -ms-transform: scale(1, 0);
        -moz-transform: scale(1, 0);
        -o-transform: scale(1, 0);
        transform: scale(1, 0);
    }
    50% {
        -webkit-transform-origin: 0% 0%;
        -ms-transform-origin: 0% 0%;
        -moz-transform-origin: 0% 0%;
        -o-transform-origin: 0% 0%;
        transform-origin: 0% 0%;
        -webkit-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        -moz-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        transform: scale(1, 1);
    }
    50.1% {
        -webkit-transform-origin: 0% 100%;
        -ms-transform-origin: 0% 100%;
        -moz-transform-origin: 0% 100%;
        -o-transform-origin: 0% 100%;
        transform-origin: 0% 100%;
        -webkit-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        -moz-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        transform: scale(1, 1);
    }
    100% {
        -webkit-transform-origin: 0% 100%;
        -ms-transform-origin: 0% 100%;
        -moz-transform-origin: 0% 100%;
        -o-transform-origin: 0% 100%;
        transform-origin: 0% 100%;
        -webkit-transform: scale(1, 0);
        -ms-transform: scale(1, 0);
        -moz-transform: scale(1, 0);
        -o-transform: scale(1, 0);
        transform: scale(1, 0);
    }
}
@-moz-keyframes elasticus {
    0% {
        -webkit-transform-origin: 0% 0%;
        -ms-transform-origin: 0% 0%;
        -moz-transform-origin: 0% 0%;
        -o-transform-origin: 0% 0%;
        transform-origin: 0% 0%;
        -webkit-transform: scale(1, 0);
        -ms-transform: scale(1, 0);
        -moz-transform: scale(1, 0);
        -o-transform: scale(1, 0);
        transform: scale(1, 0);
    }
    50% {
        -webkit-transform-origin: 0% 0%;
        -ms-transform-origin: 0% 0%;
        -moz-transform-origin: 0% 0%;
        -o-transform-origin: 0% 0%;
        transform-origin: 0% 0%;
        -webkit-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        -moz-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        transform: scale(1, 1);
    }
    50.1% {
        -webkit-transform-origin: 0% 100%;
        -ms-transform-origin: 0% 100%;
        -moz-transform-origin: 0% 100%;
        -o-transform-origin: 0% 100%;
        transform-origin: 0% 100%;
        -webkit-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        -moz-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        transform: scale(1, 1);
    }
    100% {
        -webkit-transform-origin: 0% 100%;
        -ms-transform-origin: 0% 100%;
        -moz-transform-origin: 0% 100%;
        -o-transform-origin: 0% 100%;
        transform-origin: 0% 100%;
        -webkit-transform: scale(1, 0);
        -ms-transform: scale(1, 0);
        -moz-transform: scale(1, 0);
        -o-transform: scale(1, 0);
        transform: scale(1, 0);
    }
}
@-o-keyframes elasticus {
    0% {
        -webkit-transform-origin: 0% 0%;
        -ms-transform-origin: 0% 0%;
        -moz-transform-origin: 0% 0%;
        -o-transform-origin: 0% 0%;
        transform-origin: 0% 0%;
        -webkit-transform: scale(1, 0);
        -ms-transform: scale(1, 0);
        -moz-transform: scale(1, 0);
        -o-transform: scale(1, 0);
        transform: scale(1, 0);
    }
    50% {
        -webkit-transform-origin: 0% 0%;
        -ms-transform-origin: 0% 0%;
        -moz-transform-origin: 0% 0%;
        -o-transform-origin: 0% 0%;
        transform-origin: 0% 0%;
        -webkit-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        -moz-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        transform: scale(1, 1);
    }
    50.1% {
        -webkit-transform-origin: 0% 100%;
        -ms-transform-origin: 0% 100%;
        -moz-transform-origin: 0% 100%;
        -o-transform-origin: 0% 100%;
        transform-origin: 0% 100%;
        -webkit-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        -moz-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        transform: scale(1, 1);
    }
    100% {
        -webkit-transform-origin: 0% 100%;
        -ms-transform-origin: 0% 100%;
        -moz-transform-origin: 0% 100%;
        -o-transform-origin: 0% 100%;
        transform-origin: 0% 100%;
        -webkit-transform: scale(1, 0);
        -ms-transform: scale(1, 0);
        -moz-transform: scale(1, 0);
        -o-transform: scale(1, 0);
        transform: scale(1, 0);
    }
}
@keyframes elasticus {
    0% {
        -webkit-transform-origin: 0% 0%;
        -ms-transform-origin: 0% 0%;
        -moz-transform-origin: 0% 0%;
        -o-transform-origin: 0% 0%;
        transform-origin: 0% 0%;
        -webkit-transform: scale(1, 0);
        -ms-transform: scale(1, 0);
        -moz-transform: scale(1, 0);
        -o-transform: scale(1, 0);
        transform: scale(1, 0);
    }
    50% {
        -webkit-transform-origin: 0% 0%;
        -ms-transform-origin: 0% 0%;
        -moz-transform-origin: 0% 0%;
        -o-transform-origin: 0% 0%;
        transform-origin: 0% 0%;
        -webkit-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        -moz-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        transform: scale(1, 1);
    }
    50.1% {
        -webkit-transform-origin: 0% 100%;
        -ms-transform-origin: 0% 100%;
        -moz-transform-origin: 0% 100%;
        -o-transform-origin: 0% 100%;
        transform-origin: 0% 100%;
        -webkit-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        -moz-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        transform: scale(1, 1);
    }
    100% {
        -webkit-transform-origin: 0% 100%;
        -ms-transform-origin: 0% 100%;
        -moz-transform-origin: 0% 100%;
        -o-transform-origin: 0% 100%;
        transform-origin: 0% 100%;
        -webkit-transform: scale(1, 0);
        -ms-transform: scale(1, 0);
        -moz-transform: scale(1, 0);
        -o-transform: scale(1, 0);
        transform: scale(1, 0);
    }
}
#scroll-down::before {
    
    animation: elasticus 1.2s cubic-bezier(1, 0, 0, 1) infinite;
    position: absolute;
    top: 0px;
    left: 50%;
    margin-left: -1px;
    width: 2px;
    height: calc(6vmin*1);
    background: #2c367c;
    content: ' ';
}

.arrow-down {
    display: block;
    margin: 0 auto;
    width: 10px;
    height: calc(6vmin/2);
}

#scroll-title {
    display: block;
    color: #2c367c;
    font-size: calc(2vmin + 2px);
    font-family: Favorit;
}
#container {
  position: relative;
}
</style>

 

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Got it - thank you!

Sam Crawford | by Crawford.
 
Multi-award-winning Squarespace expert
 
💸 How I make $500k/year designing Squarespace websites: Watch the video
📱 Hire me to build your Squarespace website: calendly.com/bycrawford/call
 
Did my comment help? To help others benefit, leave a like and mark my answer as 'best'. This lets users scroll straight to the solution they need.
Link to comment

Hi @tuanphan! I inputted the above code into a code block at the bottom of my first page, but unfortunately the scroll down arrow appears at the top of the screen, and it stays fixed there when I scroll up and down, going above all the content it passes over.  Is there any way you could slightly modify the code to make the "arrow" appear at the position where you input the code block, without moving when you scroll and without appearing at the header of the website? I hope this makes sense! Thank you so much in advance.

Link to comment
20 hours ago, erifili said:

Hi @tuanphan! I inputted the above code into a code block at the bottom of my first page, but unfortunately the scroll down arrow appears at the top of the screen, and it stays fixed there when I scroll up and down, going above all the content it passes over.  Is there any way you could slightly modify the code to make the "arrow" appear at the position where you input the code block, without moving when you scroll and without appearing at the header of the website? I hope this makes sense! Thank you so much in advance.

Can you share link to page where you use Code Block? We can check easier

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 2 years later...
7 hours ago, TJC123 said:

I would like it to fade away or disappear completely after the use has scrolled down. How can I achieve that? Can some code be added to the existing code you made?

This can not be achieved with CSS alone. You'd need JavaScript to know where the scroll is. Then write code to turn off the effect at some point. This requires the business plan or above. I know of know code, that  exists, that would work specifically for what you want.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
15 hours ago, creedon said:

This can not be achieved with CSS alone. You'd need JavaScript to know where the scroll is. Then write code to turn off the effect at some point. This requires the business plan or above. I know of know code, that  exists, that would work specifically for what you want.

Thanks for the reply! I am currently using a business plan. Would you be able to share the code needed for this? Ideally the indicator completely disappears once the viewer has scrolled past it.

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.