bycrawford Posted October 14, 2020 Share Posted October 14, 2020 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 e. sam@bycrawford.com w. bycrawford.com 💸 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
bycrawford Posted October 15, 2020 Author Share Posted October 15, 2020 Bump! Sam Crawford | by Crawford. Multi-award-winning Squarespace expert e. sam@bycrawford.com w. bycrawford.com 💸 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
tuanphan Posted October 16, 2020 Share Posted October 16, 2020 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
bycrawford Posted October 16, 2020 Author Share Posted October 16, 2020 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 e. sam@bycrawford.com w. bycrawford.com 💸 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
bycrawford Posted October 16, 2020 Author Share Posted October 16, 2020 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? Sam Crawford | by Crawford. Multi-award-winning Squarespace expert e. sam@bycrawford.com w. bycrawford.com 💸 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
tuanphan Posted October 16, 2020 Share Posted October 16, 2020 Add HTML into Code Block, CSS into Design > Custom CSS 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
bycrawford Posted October 17, 2020 Author Share Posted October 17, 2020 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 e. sam@bycrawford.com w. bycrawford.com 💸 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
creedon Posted October 17, 2020 Share Posted October 17, 2020 @bycrawford The website has expired. 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
bycrawford Posted October 18, 2020 Author Share Posted October 18, 2020 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 e. sam@bycrawford.com w. bycrawford.com 💸 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
bycrawford Posted October 20, 2020 Author Share Posted October 20, 2020 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 e. sam@bycrawford.com w. bycrawford.com 💸 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
tuanphan Posted October 21, 2020 Share Posted October 21, 2020 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
bycrawford Posted October 21, 2020 Author Share Posted October 21, 2020 Got it - thank you! Sam Crawford | by Crawford. Multi-award-winning Squarespace expert e. sam@bycrawford.com w. bycrawford.com 💸 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
erifili Posted October 27, 2020 Share Posted October 27, 2020 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
tuanphan Posted October 28, 2020 Share Posted October 28, 2020 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
TJC123 Posted June 11, 2023 Share Posted June 11, 2023 Hi @tuanphan, I have code working perfectly in a code block but 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? Would be a great help! Link to comment
creedon Posted June 11, 2023 Share Posted June 11, 2023 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
TJC123 Posted June 12, 2023 Share Posted June 12, 2023 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment