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

How to make a stretchy scroll indicator?


bycrawford

Question

  • Answers 13
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Posted Images

13 answers to this question

Recommended Posts

  • 0

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;
}

 

Link to post
  • 0
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?

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

Link to post
  • 0

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>

 

Link to post
  • 0

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

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