In our previous articles, we have published jQuery countdown timer and animated progress counter widgets for Weebly. Weebly has its own free app called “Counter” to add drag and drop milestone counter anywhere on your site. As usual this app also having many bugs even after releasing few years. But definitely it’s worth to try if you are looking for milestone counter widget for Weebly.
In this article let us explain how to add full width parallax milestone counter using Weebly counter app and using custom jQuery script.
Milestone Counter with Counter App
Counter is a free app from Weebly, connect this app from app center to your site. Drag and drop a section element and set the background image with parallax scrolling effect. Now drag and drop the counter app inside section element on the content area. Click on the counter number shown to see the below options popup:
The counter app has the following options to customize your counter:
- Counts to this number – set the number for the counter.
- Text display – set the visibility of above and below text. These text content will be displayed above and below the number which can be modified by clicking on the text.
- Number size – set the font size for your counter.
- Number color – set color for the number. This will set the color only for the number, the above and below text elements can be adjusted by clicking on it.
- Number bold – bold the counter number.
- Seconds – set number of seconds the counter should run from 0 to the specified number.
Now that you have setup one counter. If you need three counter then copy the element three times and paste side by side. This will create a complete milestone counter for your Weebly site. You can use spacer element in-between, above and below the milestone counter to create sufficient space around.
The final look of the milestone counter should look something like below and check out the live demo of different counters on Weebly site.
Note, in the demo we have switched off both above and below text and used separate text element for each counter.
Custom jQuery Milestone Counter
The Weebly counter app is an good option but has does not offer many options to separate the numbers with comma or using symbols. You can easily create custom milestone counter by using the jQuery counterup script.
Add the jQuery Script
Download the zip archive of the counterup script and extract the “jquery.counterup.min.js” file. Go to “Themes > Edit HTML / CSS > Assets” section of your Weebly site and upload the script file. The location of the uploaded script should be like “http://yoursite.com/files/theme/jquery.counterup.min.js”. Ensure to check the file can be accessed on the browser with this URL.
Now add the following script lines under “Pages > Select your page > SEO Settings > Footer Code”.
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/2.0.3/waypoints.min.js"></script>
<script src="URL of jquery.counterup.min.js"></script>
<script>
jQuery(document).ready(function( $ ) {
$('.counter').counterUp({
delay: 20,
time: 2500
});
});
</script>
In the above script delay 20 indicates the animation delay of 20 milliseconds and the time 2500 indicates the animation duration of 2500 milliseconds. You can set any custom values as per your need.
Adding CSS
Let us add the following CSS under”Pages > Select your page > SEO Settings > Header Code” section. This CSS is just to create a circle background on the counter with some sizing of fonts.
<style>
.circle {
background: lightgreen;
width: 200px;
line-height: 200px;
display: inline-block;
color: #333;
border-radius: 100%;
font-size: 66px;
color: #555;
margin-bottom: 350px;
display: inline-block;
font-weight: 400;
text-align: center;
}
</style>
Adding HTML
The final step is to add the HTML code. First insert a section element and then add an image background with parallax effect. Then add four embed code elements side by side inside the section element and add the below HTML code:
<span class="counter circle">11,111</span> <!-- First counter in first embed code element --> <span class="counter circle">1.950</span><!-- Second counter in second embed code element --> <span class="counter circle">12345</span><!-- Third counter in third embed code element --> <span class="counter circle">5,123,348</span> <!-- Fourth counter in fouth embed code element -->
Publish your site and see the beautiful animated milestone counter as below.
The example shows the milestone counter with comma separator for thousands, decimal point, plain number without separator and a large number. You can customize the circle color and font size by modifying the CSS.
5 Comments
Leave your reply.