So you have seen on websites that typically have a full-screen header with an indicator to scroll down to view the rest/more of the content. We’re going to show a very nice and clean way to represent this feature. In today’s tutorial, we have a scroll down icon created as an SVG using just HTML & CSS and it looks pretty awesome if we do say so ourselves.
Here is a CodePen of what we are going to be creating.
So let’s being:-
HTML
<div class="scrolldown-wrapper">
<div class="scrolldown">
<svg height="30" width="10">
<circle class="scrolldown-p1" cx="5" cy="15" r="2" />
<circle class="scrolldown-p2" cx="5" cy="15" r="2" />
</svg>
</div>
</div>
CSS
body {
background: #000;
}
/* Scroll Down */
.scrolldown-wrapper {
left: 50%;
position: absolute;
text-align: center;
bottom: 0;
transform: translate(-50%, -50%);
}
.scrolldown {
border: 2px solid #FFFFFF;
border-radius: 30px;
height: 46px;
margin: 0 auto 8px;
text-align: center;
width: 30px;
}
.scrolldown-p1,
.scrolldown-p2 {
animation-duration: 1.5s;
animation-name: scrolldown;
animation-iteration-count: infinite;
fill: #FFFFFF;
}
.scrolldown-p2 {
animation-delay: .75s;
}
@keyframes scrolldown {
0% {
opacity: 0;
transform: translate(0, -8px);
}
50% {
opacity: 1;
transform: translate(0, 0);
}
100% {
opacity: 0;
transform: translate(0, 8px);
}
}
If you want to adjust the positioning of the icon, simply edit the .scrolldown-wrapper
class and adjust the bottom position (e.g. changing bottom: 10%;
will move the icon 10% of the viewport height from the bottom).
You can also adjust the speed of the animation by adjusting either .scrolldown-p1
or .scrolldown-p2
classes.
Pretty simple and lightweight right?
Any questions feel free to drop us a comment.
We hope you’ve enjoyed today’s tutorial.
Hi Nathan,
Thanks for the code. Sadly this doesn’t seem to work on iphones…