Question

I have a function that counts the amount of visits a page has, and counts the amount of visits remaining to reach a certaing goal.
It’s like a countdown.
There is a “hidden” picture, and each time there is a new visit, part of the picture is shown.

I have simple JavaScript code that counts the visits and some CSS “unveils” the picture according to a percentage.

But now I need to make this “Unveiling” slow down, meaning less % of the remaining picture should be revealed as the visits get closer to the goal.

Right now this is all I can get out of my brain:

remaining_percentage_to_goal = (current_visits*100)/goal

div_height = (remaining_percentage_to_goal*image_height)/100

I could try something like:

slow_down_rate = 0.25 
div_height = div_height-(remaining_percentage_to_goal*slow_down_rate)

Of course this will never reach 100% of the image height so it occured to me that I could do a hardcoded fixed variable with an IF statement or something that removes the slow_down_rate when certain percentage is reached, but that’s doesn’t seem to be exactly the effect we are looking for. So I was wondering if there is a better or more elegant approach.

Thanks

Answer 1

Sounds like you want something like a logarithmic approach. For the sake of this answer, let’s assume your goal is 1500 visits (but this can be any number, of course). You know that for zero visits, you want zero percent showing, and for 1500 visits, you want 100% showing, so you know two points on your graph: (0,0) and (1500,1). To make the natural logarithm fit these parameters, you have to translate and scale it, so you have:

f(x) = alpha*ln(x+beta)

We know that ln(1)=0, so beta=1 is easy. We can also find alpha pretty easily by plugging in our second point:

1500 = alpha*ln(1500+1)

alpha = 1500 / ln(1500+1)

Now if we graph that, we get:

Which looks like the function we want…it naturally slows down as it approaches the goal, but it still reaches it.

Translating this into Javascript, you’d have:

var goal = 1500;
var alpha = goal / Math.log(goal+1);
var percentVisible = alpha * Math.log(visits+1);

I hope this helps!