Execute Canvas rendering based on scroll event.

I have been showing animations using canvas in several blog posts lately and implemented a lot of this in my own homepage. Now, if you are doing animations you need to plan how the animations should execute so that the user does not miss the whole show. :)


You might want to kick off the animation on a click, or even on a long page – start the animation once the user scrolls down to the animations position. There would be little use in an animation if the show were over when the user gets to it, right?

Now, you can hook on to the browsers events using the window object or the document object. The click event I’ve already covered in this post. For the scroll event you need to grab the window object.

The easiest way to do this is to use JQuery and extend the scroll event. In this example I’ve added a delay before kicking of the animation.

I’ve also calculated the position the user should scroll to before firing the event handler.
var target = $("#mainSectionFootprint").offset().top - 400,
    timeout = null;

$(window).scroll(function () {
    if (!timeout) {
        timeout = setTimeout(function () {
            clearTimeout(timeout);
            timeout = null;
            if ($(window).scrollTop() >= target) {
                startFootLoop();
            }
        }, 250);
    }
});

Comments

Popular posts from this blog

Designing and programming - Part 2

Filtering Dropdown choices in a Power Pages form using Dataverse Relations

Exploring the Power of Variables in Liquid and Power Pages