Loading...
Skip to main content
Navigation and related functionality and content
Features
Requirements
Download
Install
Backup
Upgrade
Help
FAQs
Need Assistance ? Join-us live this Thursday, click for info !
Related content
Find
History: PluginCountup
View published page
Source of version: 27
(current)
! 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. See also ((PluginCountdown)) !! 1. Parameters {pluginmanager plugin="countup"} !! 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: {CODE(colors="tiki" theme="default")}{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"}{CODE} produces on this site: {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"} !!!! 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: {CODE(colors="tiki" theme="default")} {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"}{CODE} Produces on this site: {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"}
Related content
