Dynamic counter

[bosse]

Hi guys,

i want to create a dynamic counter. Something like this: http://demo.joomlead.com/particles/index.php/particles/simple-counter/ but without relying on gantry an particles.

Do you have an idea how to start?
Preferrably i would inpunt maximum count numbers somewher in the backend… maybe exend the feature view of quark theme but instead of having a header i would have a number counting up from 0.

How can i realize the couting loop? Would it be good practice to to it via twig like in a for loop?
How could i realize the animation?

I am very pleased about your help.

[tom0360]

Hey bosse,

What about just using some JS like https://github.com/bfintal/Counter-Up or https://inorganik.github.io/countUp.js/

[bosse]

Hi tom,
thank you for your hints.

My theme is a child of Quark 2.0.3
I managed to import the js from bfintal via base.html.twig

like so:

    {% block javascripts %}
			...
            {% do assets.addJs('theme://js/site.js', {group:'bottom'}) %}
			{% do assets.addJs('theme://js/waypoints.min.js') %}
			{% do assets.addJs('theme://js/jquery.countUp.min.js') %}
	{% endblock %}

I then created a new modular copying from modular/features.html.twig and also gave it a blueprint.
I got things up and running by calling the count function in site.js

jQuery(document).ready(function ($) {
    // Count Up for Counters
    $('.counter').counterUp({
        delay: 50,
        time: 2000
    });
});

And it worked well. They counted up each time the pages was refreshed.

After that i was wondering if i could influence each individual counter ind “delay” and “time” via a value given in the admin backend defined via blueprint.yaml

How can i get the values from the backend into the site.js Javascript file in order to handle it in the function?

[tom0360]

hmmm,

I would think you would need to parse the yaml file if possible or maybe use twig to pull the needed values and pass the information into the Javascript file.