In my previous post about JQuery animation, I showed how to create a simple animated number counter. In this article, we’ll learn how to create a responsive counter section on your web page.

In this example, I’m using

  • Bootstrap 4 – To make a responsive page.
  • JQuery – To create the animation.
  • FontAwesome.css – To display some icons.

What we’re going to create

See the Pen Creating a responsive counter section by Mishel Shaji (@mishelshaji) on CodePen.

Add HTML markup

See the Pen Creating a responsive counter section by Mishel Shaji (@mishelshaji) on CodePen.

Add CSS

See the Pen Creating a responsive counter section by Mishel Shaji (@mishelshaji) on CodePen.

Add JavaScript

See the Pen Creating a responsive counter section by Mishel Shaji (@mishelshaji) on CodePen.

This script starts the animation only when the element is visible in the viewport.