JS walk cycle on scrolling

April, 2016

For the Interactive Web Comic I needed to create a walk cycle while the user is scrolling in combination with skrollr.js.

At first we need a set of images for the walk cycle with the file names 1-xx

walk

Then place the Image in the markup and loop through the file name array and change the image source:


var imageArr = ["img/zwergwalk/1.svg","img/zwergwalk/2.svg",......"];
$(window).scroll(function() {
windowScrollCount = $(this).scrollTop();
animationFrame = (windowScrollCount / 20);
animationFrame = Math.floor(animationFrame % imageArr.length);
$('.zwergwalk').attr("src", imageArr[animationFrame]);
});

You can adjust the sensitivity by changing the windowScrollCount / 20 value.

That’s all!
Scroll here to see the demo: