Calling a JS file on a specific part of the scroll

Design help General
1

Hi,

I´m trying to do a Number Counter Style and i made it with no problem.

Here is the counter JS script → CountUp.js

And here is the script that i used:

<script src="https://dl.dropboxusercontent.com/s/w7mixg6fj0lbn71/countUp.min.js"></script>
<script> 
    var c1 = new countUp("c1", 0, 98, 0, 6);
    var c2 = new countUp("c2", 0, 1532, 0, 6);
    var c3 = new countUp("c3", 0, 85, 0, 6);
    var c4 = new countUp("c4", 0, 321, 0, 6);
    window.onload = function() {
        c1.start();
        c2.start();
        c3.start();
        c4.start();
    }
</script>

So far so good, the problem is the container is on the bottom of the page and the user has to do scroll to see it and when the user see it the “effect” is gone.
My question is, is there a way to when i scroll and the item is on 50% of the screen, the JS file start´s working?

tks
Rui

2

This is a curious stab in the dark. If the element is set to display none and then uses a scroll interaction to change the display state to block will it cause the script to init?

Some of the built in components like the slider behave that way, so although it is a bit hacky I think it may trigger the counter to start when the element scrolls into view.

We need a callback event on some of the interactions for things like this or to call a scroll to anchor link.

3

I have just try it 5 minutes ago and it´s the same.
Anybody has an idea for this?

4

I am having the same issue, did you ever find a solution for this?