In few places the Quark template contains a counters which animate during a scrolling the website.
Social counters
Above module is a Custom HTML module which uses the following code and the small-spaces module suffix:
<div class="gk-cols" data-cols="3"> <div class="gk-text-center gk-social-counter"> <a href="#" class="inverse"><i class="gkicon-fb"></i><strong><span data-sr="enter bottom" data-count="15477">0</span><span>likes</span></strong></a> </div> <div class="gk-text-center gk-social-counter"> <a href="#" class="inverse"><i class="gkicon-twitter"></i><strong><span data-sr="enter bottom" data-count="6633">0</span><span>followers</span></strong></a> </div> <div class="gk-text-center gk-social-counter"> <a href="#" class="inverse"><i class="gkicon-gplus"></i><strong><span data-sr="enter bottom" data-count="1408">0</span><span>followers</span></strong></a> </div> </div>
This code uses the columns structure - div with the gk-cols CSS class for creating a three-columns structure (the amount of columns can be changed in the data-cols attribute). Content in the column can be centered with the gk-text-center CSS class.
For creating the social counters we need to add the data-sr attribute which will fire a counter function when user scroll down to the element. The final counter value is specified in the data-count attribute. Additionally user can specify the data-time attribute with time specified in milliseconds - it will be used to specify the time of the counting animation.
If it is necessary to add delay between start time for specific counters then we recommend to add in the data-sr attribute text and wait .25s - then the animation will by delayed by 250 milliseconds
Company counters
Above counters have much easier structure visible below:
<div class="gk-counters"> <div class="gk-counter"><span data-sr="enter bottom" data-count="69">0</span><small>projects</small></div> <div class="gk-counter"><span data-sr="enter bottom" data-count="467">0</span><small>clients</small></div> <div class="gk-counter"><span data-sr="enter bottom" data-count="22">0</span><small>awards</small></div> <div class="gk-counter"><span data-sr="enter bottom" data-count="865">0</span><small>coffee cups</small></div> </div>
It uses the same mechanism - the scroll reveal engine which fires the counting animation.