Animated Numbers
Overview and Settings
With Animated numbers Setting up a simple counter was never easier. It is useful to display quick and fun statistics of your company, and at the same time grab your users attention with a quick animated count of the numbers.
Examples of animated number elements.
Code Snippets
Shortcode
[av_animated_numbers number='100' icon_select='av-icon-before' icon='ue80a' font='entypo-fontello' font_size='' font_size_description='' link='' linktarget='no' color='' custom_color='#444444' custom_class='' admin_preview_bg='' av_uid='av-slqb2s'] Click here to add your own text [/av_animated_numbers]
Customization
Before we start to customize the animated number element, please enable custom CSS class name support from Enfold theme options > Layout Builder and apply the required custom class name “my-custom-animated-numbers” to the animated numbers element for the code snippets to work well.
Animated Numbers
Font Style
By default, the body font family is applied to the animated numbers. If you wish to change the font family or add custom styles to the animated numbers please use the below CSS.
NOTE: The font size and color can be changed from the element options but you can also add the CSS rules for color and font to the below CSS to specifically target the numbers.
/* Import external fonts ( Add the @import line to the top of your stylesheet) */
@import url('https://fonts.googleapis.com/css?family=Caveat+Brush|Gochi+Hand');
/* Animated numbers font style*/
#top .my-custom-animated-numbers-font.avia-animated-number .avia-single-number {
font-family: 'Caveat Brush', cursive;
color:#333;
}
Background
To add a background color to the animated number please use the below CSS
/* Animated number background */
#top .my-custom-animated-numbers.avia-animated-number .avia-single-number {
background: red;
}
Border
To display a border only around the animated number, please use the below code:
#top .my-custom-animated-numbers.avia-animated-number .avia-single-number {
border:2px solid red;
}
Hover Style
The below code will make changes to the animated number on hover
#top .my-custom-animated-numbers.avia-animated-number:hover .avia-single-number {
color: red;
}
Description Text
Font Style
To change the font style of the description text, please use the below CSS. You can change the font size and color from the element options or add your own CSS rules to the below selector.
#top .my-custom-animated-numbers.avia-animated-number .avia-animated-number-content p {
background: red;
font-family: 'Caveat Brush', cursive;
color:#333;
}
Background
The below code will add a background color to the description text.
#top .my-custom-animated-numbers.avia-animated-number .avia-animated-number-content p {
background: red;
}
Border
To a border style to the description text please use the below code
#top .my-custom-animated-numbers.avia-animated-number .avia-animated-number-content p {
border: 2px solid red;
}
Hover Style
Use the below code to change the description text style on hover
#top .my-custom-animated-numbers.avia-animated-number:hover .avia-animated-number-content p {
background: red;
}
Icon
Size
Change the animated number icon size with the below code
#top .my-custom-animated-numbers.avia-animated-number .avia-animated-number-icon.av-icon-char:before {
font-size: 60px;
}
Color
The below code will change the animated number icon color
#top .my-custom-animated-numbers.avia-animated-number .avia-animated-number-icon.av-icon-char:before {
font-size: 60px;
}
Background
The below code will add a background color to the animated number icons.
#top .my-custom-animated-numbers.avia-animated-number .avia-animated-number-icon.av-icon-char:before {
background: gold;
}
Border
Hover Style
Please use the below code to add a hover effect to the icon
#top .my-custom-animated-numbers.avia-animated-number:hover .avia-animated-number-icon.av-icon-char:before {
background: gold;
}
Alignment
Icons in the animated number element can be aligned to the left or right of the title text. To make the icon appear on top or below the title text, simply disable the icon in the animated numbers option and place a separate icon element above or below the animated numbers as shown in the below screenshot.
Border
Animated Number border
Add a border to the animated number element
#top .my-custom-animated-numbers.avia-animated-number {
box-shadow: inset 0 0 0 4px red;
padding: 30px;
}
Hover Style
Display a border around the animated number element on hover
#top .my-custom-animated-numbers.avia-animated-number {
padding: 30px;
}
#top .my-custom-animated-numbers.avia-animated-number:hover {
box-shadow: inset 0 0 0 4px red;
}
Background
Animated numbers take the parent containers width and background effects. To add a background color, image or gradient place the animated numbers element inside a column or a grid and set its background. We can add the same background effect to the animated numbers using custom CSS. Below are some examples:
Solid Color
The below code adds a solid background to the animated number element.
#top .my-custom-animated-numbers.avia-animated-number {
background: gold;
padding: 30px;
}
Image
To add a background image please edit the background image path in the below code and add it to your site.
#top .my-custom-animated-numbers.avia-animated-number {
background: url(BACKGRUOND IMAGE PATH);
padding: 30px;
}
Gradient
The below code adds a solid background to the animated number element.
#top .my-custom-animated-numbers.avia-animated-number {
background: #12c2e9; /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #f64f59, #c471ed, #12c2e9); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #f64f59, #c471ed, #12c2e9); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
On mouse hover
Add a background effect on mouse hover using the below CSS
#top .my-custom-animated-numbers.avia-animated-number{
padding: 30px;
}
#top .my-custom-animated-numbers.avia-animated-number:hover {
background: gold;
}
Shapes
Circle border around the animated numbers can extend beyond the parent container and overlap to create a unique design. To do so please set the circle size more than 100% in the animated numbers options.
View examples of circle animated numbers.
Another approach to achieve a similar result is by applying custom CSS to the animated numbers as seen below:
NOTE: Please disable the built-in circle in the element options before using the CSS version of the circular animated numbers.
Faster smoother uploads!
CSS for circle shape animated numbers
/*----------------------------------------
// Circle Animated number
//--------------------------------------*/
.my-custom-animated-numbers.avia-animated-number {
border: 2px solid #333;
display: flex;
justify-content: center;
align-self: center;
width: 250px;
height: 250px;
border-radius: 250px;
flex-direction: column;
position: absolute;
left: 50%;
transform: translateX(-50%);
}
/* Icon style */
.my-custom-animated-numbers .avia-animated-number-icon:before {
display: flex;
justify-content: flex-start;
align-items: center;
flex-direction: column;
margin-top: -60px;
font-size: 28px;
}
/* Animated number description */
.my-custom-animated-numbers .avia-animated-number-content {
margin-top: 10px;
width: 100%;
padding: 0 30px;
}
Counter tricks
Adding a comma between the digits will start the counter for each comma-separated number unit. Check out the examples below.
This is a simple counter which starts from 0 and ends at 15000.
The counter counts 1 to 15 separately from the numbers on the right side of the comma.
Animation Speed
Enfold version 4.5.7 and higher provides the option to delay the animation for a longer period and it can be changed from the Animated Number element option.
Resource
Contributed video: