Scrolling indicators are a common client request.
Whether or not they’re entirely necessary is a matter for another day…
In this article we’ll create a simple mouse icon with an animation effect to indicate a scrolling action, like this:
First thing to do is add the following HTML to your page.
<div class="icon-scroll"></div>
Next we’ll add the style to create the basic shape of the mouse.
.icon-scroll {
width: 20px;
height: 30px;
background: #ccc;
border: 2px solid #bbb;
border-radius: 10px;
display: flex;
justify-content: center;
margin: auto;
position: relative;
box-shadow: 3px 3px 5px -5px #000;
}
Using the CSS ::before selector we can create a pseudo-element to represent the scroll wheel.
.icon-scroll::before {
content: "";
width: 4px;
height: 10px;
background: #eee;
border-radius: 2px;
margin-top: 5px;
}
And using the CSS ::after selector we can add a small square that we’ll animate.
.icon-scroll::after {
content: "";
width: 4px;
height: 3px;
background-color: #bbb;
position: absolute;
display: block;
animation: scroll ease 1s infinite;
}
Lastly the animation that shifts and fades .icon-scroll::after in an infinite loop.
@keyframes scroll {
from {
top: 5px;
}
to {
top: 18px;
}
100% {
opacity: 0;
}
}
Top comments (0)