Create animated scroll down mouse affect using HTML and CSS only

Published: 3 August 2019

Why do you might need it?

People often ask me to create full screen landing page with some kind of image or background video with text overlay.

Full screen landing page gives most users nice experience when page loads, however some users do not realize that is more content below. This unfortunatelly sometimes leads them to click on navigation menu and leave the page rather than scrolling down to explore more content on this particular page.

This simple animated mouse effect positioned right before bottom of page is nice indicator for user to highlight the idea of scrolling down.

Demo

---

A little bit of HTML and CSS

HTML

<div class="moving-mouse-holder">
  <div class="mouse">
    <div class="mouse-button">&nbsp;</div>
  </div>
  <div class="text">SCROLL DOWN <br> TO EXPLORE MORE</div>
</div>

CSS

.moving-mouse-holder {
  margin: auto;
  margin-top: 60px;
  width: 170px;
}

.moving-mouse-holder .mouse {
  width: 26px;
  height: 40px;
  position: relative;
  right: 0;
  border-radius: 18px;
  border: 2px solid #000000;
}

.moving-mouse-holder .mouse-button {
  background-color: #000000;
  width: 4px;
  height: 10px;
  border-radius: 2px;
  position: absolute;
  top: 10px;
  left: 50%;
  margin: 0 0 0 -2px;
  animation: mouse-scroll 1s infinite alternate;
}

.moving-mouse-holder .text {
  margin-top: -30px;
  margin-left: 40px;
  color: #33cc66;
  font-size: 12px;
  line-height: 1em;
}

@keyframes mouse-scroll {
  to {
    transform: translate(0, 6px) scale(1, 0.8);
  }
}

I hope this little snippet of code helps you and your user to explore more content on any full screen page.

Feel free to modify it to your needs.

Happy coding