Welcome to the free site template! If you are looking premium template I recommended you Jollyany!

Close Notification

Tutorial: How to Make a Stats Count and Fun Facts with jQuery

A tutorial that shows how to make a stats count and fun facts with jQuery. Using javascript setTimeout function, transitions and animations, the aim is to implement a beautiful count effect and add some variations. You can learn how to make a beautiful fun facts with jQuery and how to make a stats count with JavaScipt code below;

Today we’d like to explore a very subtle, but interesting custom stat counts or fun facts animation effect that can be seen on the creative website of Jollyany website template. Some websites may have seen in the fun facts effects, if you do not know how to do this effect, you should carefully read our article. Let’s see how to make page fun facts with jQuery and CSS;

You Will Need to Complete This Tutorial:

Live Preview

The JavaScript Markup

In the first step, you should add standard jQuery file and JavaScript plugin to the your website. If you have a jQuery code on your site, you do not need to add it. Your fun facts with jQuery worked like this;

fun facts with jquery

The CSS Markup

In the second step, you need to add these style codes to the your style.css file I share with you below;

The HTML Markup

Let’s add our markup for the any page section. This will have one side. Please add these codes to the your any page template “after body tag”.

In the above step we added some Bootstrap column elements and font awesome icons. If you have to use Bootstrap no need to make any column elements, If not please build your own columns. Also don’t forget to add Font Awesome icons to the your design. If you have another font icons please change all icons above.

Congratulations, you’re all finished! Your fun facts and stat count effects ready! There you have it, we’ve teach you how to set a fun facts with jQuery.

Leave a comment and let me know what you think. What would you have done differently?

2 Comments.

  1. Zharko

    Hi ! Nice done! How can to run script ,when scrol to this section on site?

  2. Maxwelt

    Hi! Great tuto! I spent all day looking for this. No external libraries, clean code and Bootstrap! Thank you very much for sharing.
    regards