Plugin Countup

Introduced in Tiki25, use this plugin to make a counter on a wiki page. You can add one or multiple counters on the same page and each counter starts to count when it becomes visible in the viewport. Each counter has its own custom settings (Title, ending number, custom counting (animation) speed, custom CSS (color, font size, font family, background, ...), etc.).

It is powered by Anime.js (https://github.com/juliangarnier/anime) which offers many nice tools which will be progressively used in other Tiki features.

2. Examples of use

Example 1 :

In this example, we have one counter on the page and we are counting the number of registered students with a counting speed of 1 second.

The following code:

Copy to clipboard

{countup title="Students" titleFontWeight="bold" titleFontStyle="italic" titleFontColor="white" icon="2002" description="Registered Students" descriptionFontStyle="italic" descriptionFontColor="white"  endingNumber="10" numberFontWeight="800" numberFontSize="70" numberFontColor="white" speed="1" delay="1" suffix="+" backgroundImage="1998" shadow="inset 2000px 0px 0px 0px #24a2c09c"}

produces on this site:

0+

Students

Registered Students

Example 2 :

In this example we have two counters on the same page and each counter has its own custom settings (counting speed, font style, font color,etc) and starts to count when it becomes visible in the viewport.

The following code:

Copy to clipboard

{countup title="Students" titleFontWeight="bold" titleFontStyle="italic" titleFontColor="white" description="Registered Students" descriptionFontStyle="italic" descriptionFontColor="white" endingNumber="15" numberFontWeight="800" numberFontSize="70" numberFontColor="white" speed="1" delay="1" suffix="+" backgroundImage="1998" shadow="inset 2000px 0px 0px 0px #24a2c09c"}
{countup title="Countries" titleFontWeight="bold" titleFontColor="black" icon="2000" endingNumber="195" numberFontWeight="bold" numberFontSize="70" numberFontColor="black" speed="0.02" shadow="inset 2000px 0px 0px 0px #24a2c09c"}

Produces on this site: