Dynamic counter componentAvailable since EcoComposer 1.0

Each time you hover the section and wait, the numbers will come to life!

You have

mails!

You have

remaining things to do!

The defaults values are :

'suffix'             : '',
'counter--font-size' : 5rem,
'counter--width'     : 3rem,
'counter--height'    : 5rem,
'counter--numbers'   : (
  ('one' 1),
  ('two' 2),
  ('three' 3),
  ('four' 4),
  ('five' 5),
  ('six' 6),
  ('seven' 7),
  ('eight' 8),
  ('nine' 9),
  ('zero' 0)
),
'speed'              : 2,
'delay'              : 1

We can implement it that way :

@include counter.init;
@include counter.create;
@include counter.create(
  '-2',
  $second-section--font-size,
  2rem,
  3rem,
  (
    ('one' 1),
    ('two' 2),
    ('three' 3),
    ('four' 4),
    ('five' 5),
    ('six' 6)
  ),
  10,
  1
);

We can implement it that way :

<div class="counter-container-std counter-container"> <div class="counter-container-std--element counter-container--element counter-container--element--100 counter-container--element--one"></div> <div class="counter-container-std--element counter-container--element counter-container--element--10 counter-container--element--zero"></div> <div class="counter-container-std--element counter-container--element counter-container--element--1 counter-container--element--zero"></div> </div>