circle counters

Animated circle counters are a popular way to present information (like statistics or metrics) on a web page with fun interaction. You may already be familiar with Divi’s circle counter module, which makes adding circle counters to your Divi site quick and easy.

However, in this tutorial, we’re going to show you how to create fully custom circle counters that come alive as you scroll! We won’t need any external custom CSS to create them. The trick is to take advantage of Divi’s Layers function to manage several superimposed and animated modules with precision.

circle counters

Creation of the four circle counters which come alive when scrolling with Divi

Section and line configuration

First, add a four-column row to the default section.

Next, open the section settings and add a top and bottom margin so that we have enough space to test the scrolling effects of the circle counters that we are going to create.

  • Margin: 85vh high, 85vh low

Then open the row settings and update the following:

  • Gutter width: 1
  • Width: 100%
  • Max width: 1200px

Using the Layers view

Before you start creating the animated circle counters, make sure you deploy Divi’s Layers function. You can do this by clicking on the gray layers icon in the bottom settings menu.

Because we’re going to be creating a lot of overlapping elements (or layers), the layer box will come in handy for managing our layers in the future.

Create Animated Circle Counter # 1 (25%)

This first animated circle counter will animate up to 25% of the circle on the scroll and have the percentage text corresponding to the center that will blend into the scroll. To build the complete circle counter design, we will be using several overlapping text dividers and modules. Here’s how to do it.

The Back Circle

To create the back circle we are going to use a separator module that we will shape like a circle and give it a background color.

Add a separation module

Pull the divider up in the layer view and change the label to read “back circle”. Then open the settings of the separation module and update the following:

  • Show Divider: NO
  • Background color: # c3e0e5

Update the design parameters as follows:

  • Width: 250 px
  • Height: 250px
  • Margin: 25 pixels top, 25 pixels bottom, 25 pixels left
  • Rounded corners: 50%

The rotating color bar

The next part of the circle counter will be the rotating color bar. Duplicate the previous divider (back circle) to relaunch the design. Then update the new separator with the label “color bar”.

To create the rotating color bar effect, we need to turn this divider into a semicircle with the color we want to use for the bar.

Open the color bar separator settings and update the following:

  • Background color: none
  • Gradient background color left: # 121b55
  • Gradient background color on the right: rgba (255,255,255,0)
  • Gradient direction: 90deg
  • Starting position: 50%
  • Final position: 0%

On some browsers, there is a small overlapping issue that shows unwanted color through the layers. To avoid this, we’re going to make this semicircle slightly smaller and adjust the offset accordingly.

  • Width: 248px
  • Height: 248px

To make the circle of the color bar overlap the back circle, give the divider an absolute position as follows:

  • Position: absolute
  • Vertical shift: 26 pixels
  • Horizontal offset: 26 pixels

Then add the following scroll effect to rotate the circular bar 90 degrees (or 25% of the circle).

Under the Rotary Effects tab …

  • Start rotation: 0deg (at 15% of window)
  • Average rotation: 90 degrees (at 20% -25% of viewport)
  • End of rotation: 90 degrees (at 30% of viewport)

The percentages and rotation values ​​here may not seem to make complete sense at this point. We make it easier to update the rotation later when we build the next circle counter that ends at 180 degrees (50% of the circle). The important thing at this point is that the rotation ends at 90 degrees (or 25%).

The shield

The next element of our circle counter is what I call the shield, which is another semi-circle that hides the left side of the color bar circle as it spins.

To create the shield, duplicate the first Back Circle separation module we created earlier. Then drag it under the “Color Bar” separator module and update the label to “shield” for easy reference.

Open the shield divider module settings and update the following:

  • Background color: none
  • Left gradient background color: # c3e0e5 (same as back circle)
  • Gradient background color on the right: rgba (255,255,255,0)
  • Gradient direction: 90deg
  • Starting position: 50%
  • Final position: 0%

Now give the module an absolute position as follows:

  • Position: absolute
  • Vertical offset: 25px
  • Horizontal offset: 25 pixels

The front circle

The next piece of the circle counter in the front circle, which will hide the middle part of the previous layers and expose the outer edge.

To create it, duplicate the rear circle divider, drop it under the shield divider module, and update the label to “front circle”.

Open the front circle separation module settings and update the following:

  • Background Color: #ffffff
  • Width: 200px
  • Height: 200px

Then add the absolute position as follows:

  • Position: absolute
  • Vertical offset: 50px
  • Horizontal offset: 50px

Read more: 8 excellent Divi child themes for photographers

The number of discoloration

The last part of this first circle counter is the number of discolorations which corresponds to the value indicated by the rotating bar.

To build it, add a new text module under the front circle divider module.

In the Layers box, name the new text module “num1”. Then open the settings and update the body text to read “25%”.

Under Design Settings, update the following:

  • Text font weight: bold
  • Text size: 25px
  • Text line height: 2nd
  • Text alignment: center
  • Width: 200px
  • Height: 200px
  • Rounded corners: 50%
  • Padding: above 75px
  • Position: absolute
  • Vertical offset: 50px
  • Horizontal offset: 50px

Now the text should be perfectly centered in the circle counter.

To add the fade effect, update the following scroll effects:

Under the Fade In and Fade Out tab …

  • Activate fade in and fade out: YES
  • Starting opacity: 0% (at 10% of the window)
  • Average opacity: 100% (at 20% of the window)
  • End Opacity: 100% (at 100% of viewport)

That’s it for the circular meter. Discover the result.

All you need to do now is duplicate what we have done so far on the other columns and modify the different values ​​to make the counter unique.

 

For website maintenance service contact us.

Leave a comment

echo "";