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 Sign up to the waitlist for my course 👇sixfiguresquare.space 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 Sign up to the waitlist for my course 👇sixfiguresquare.space 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 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
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 Sign up to the waitlist for my course 👇sixfiguresquare.space 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 Sign up to the waitlist for my course 👇sixfiguresquare.space 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 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
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 Sign up to the waitlist for my course 👇sixfiguresquare.space 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 best , and see my profile. Thanks for your support! 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 Sign up to the waitlist for my course 👇sixfiguresquare.space 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 Sign up to the waitlist for my course 👇sixfiguresquare.space 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 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
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 Sign up to the waitlist for my course 👇sixfiguresquare.space 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 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment