How to create scroll down animation

HTML

For HTML, we need only one element with class "scrolldown".

        <div class='scrolldown'></div>
      

CSS

For CSS, first we'll style the scrolldown class. We'll set position to relative, width and height to 30x50 px, set a border radius to 25 px and color to dark blue (or any other color).

        .scrolldown {
            position: relative;
            width: 30px;
            height: 50px;
            border: 3px solid rgb(0, 71, 106);
            border-radius: 25px;
        }
      

Now we'll create a scroller inside the "scrolldown" element using it's before pseudo element. We'll set content and position to absolute, with bottom property to 30px and left to 50% with translate X to -50%, which will place this element horizontally in center and vertically just a little above the center. Now we'll set width and height to 6x6 px and add the same blue background color as border of "scrolldown" element. We'll round the border by 100% and add box shadow, same blue color with a little transparency. Animation will simply increase the elements height and move it down a bit. We'll also change the opacity here to create a little pulse effect. Now we'll set this animation to before pseudo element with duration of 2 seconds, infinite.

        .scrolldown::before {
            content: "";
            position: absolute;
            bottom: 30px;
            left: 50%;
            transform: translateX(-50%);
            width: 6px;
            height: 6px;
            background-color: rgb(0, 71, 106);
            border-radius: 100%;
            box-shadow: 0px -5px 3px 1px rgba(0, 71, 106, .6);
            animation: scrolldown-anim 2s infinite;
        }
        @keyframes scrolldown-anim {
            0% {
                opacity: 0;
                height: 6px;
            }
            40% {
                opacity: 1;
                height: 10px;
            }
            80% {
                opacity: 0;
                transform: translate(-50%, 20px);
                height: 10px;
            }
            100% {
                opacity: 0;
                height: 3px;
            }
        }
      

Using after pseudo element, we'll create an arrow that is beneath our scroller. Setting content and position to absolute, with bottom of -12px and left of 50% with translate X of -50%, will set this element a little beneath the "scrolldown" element in horizontal center. We'll set width and height to 7x7 px and right and bottom borders to 2px solid blue (the same blue color we used before). With rotation of 45 deg, this will create an arrow. Now we'll create an animation that pulses, simply by changing opacity for 0 to 0.7 and back to 0. We'll set this animation to about after pseudo element, with 2 seconds duration, infinite (same as scroller).

        .scrolldown::after {
            content: "";
            position: absolute;
            bottom: -12px;
            left: 50%;
            transform: translateX(-50%) rotate(45deg);
            width: 7px;
            height: 7px;
            border: 2px solid rgb(0, 71, 106);
            border-top: none;
            border-left: none;
            animation: pulse 2s infinite;
        }
        @keyframes pulse {
            0% {
                opacity: 0;
            }
            60% {
                opacity: 0.7;
            }
            100% {
                opacity: 0;
            }
        }
      

And that's it.

Checkout in playground

Video tutorial

Whole code

<div class='scrolldown'></div>

<style>
.scrolldown {
  position: relative;
  width: 30px;
  height: 50px;
  border: 3px solid rgb(0, 71, 106);
  border-radius: 25px;
}
.scrolldown::before {
  content: "";
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  width: 6px;
  height: 6px;
  background-color: rgb(0, 71, 106);
  border-radius: 100%;
  box-shadow: 0px -5px 3px 1px rgba(0, 71, 106, .6);
  animation: scrolldown-anim 2s infinite;
}
@keyframes scrolldown-anim {
  0% {
    opacity: 0;
    height: 6px;
  }
  40% {
    opacity: 1;
    height: 10px;
  }
  80% {
    opacity: 0;
    transform: translate(-50%, 20px);
    height: 10px;
  }
  100% {
    opacity: 0;
    height: 3px;
  }
}
.scrolldown::after {
  content: "";
  position: absolute;
  bottom: -12px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 7px;
  height: 7px;
  border: 2px solid rgb(0, 71, 106);
  border-top: none;
  border-left: none;
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 0.7;
  }
  100% {
    opacity: 0;
  }
}
</style>
      

Thank you for reading this article.

More scrollers

Similar

Read more

See also

Read more

Read more

Read more

Read more