Scrolling Animation

Our class wanted some dynamic and animated elements to exist on our portfolio website. Since we are already basing the site on the parallax effect and scrolling, I thought we could tie the animation to the scroll event.

I’m sure this has been done before, I’m just introducing my take on animation much the way they made the very first movies.

Start with two alternating images. Try two positions of a stickman walking. If you don’t fee like making it, I have a downloadable demo here.

Load the images into a page and we’ll begin writing some javascript.

First off, lets just make the images alternate when you scroll. jQuery has a nice function for this, aptly named “scroll.” Basically all the code says is when the user scrolls run a function called walk. Inside the function we alternate between showing two different classes. This allows us to piece together an animation.

// set a global alternating variable
alternating = 0;

// when the user scrolls
$(document).scroll(function(e){

	// run a function called walk
	walk();

	function walk() { 

		// if the alternating variable is zero, show the walk class
		if(alternating == 0) {
			$(".walk2").hide();
			$(".walk").show();

		// otherwise show the walk2 class
		} else {
			$(".walk").hide();
			$(".walk2").show();
		}

		// if alternating is 1, change it to zero. if it's 0, change it to 1
		alternating = 1 - alternating;

	}

});

This isn’t very useful yet, all it does is alternate between two images…let’s make it run across the page.

// set a global alternating variable
alternating = 0;

// when the user scrolls
$(document).scroll(function(e){

	// grab the scroll amount and the window height
    var scrollAmount = $(window).scrollTop();
    var documentHeight = $(document).height();

    // calculate the percentage the user has scrolled down the page
    var scrollPercent = (scrollAmount / documentHeight) * 100;

	// run a function called walk
	walk();

	function walk() { 

		// set the position left = to the scroll percent
		$(".common").css({
							'left' : scrollPercent + '%'
						});

		// if the alternating variable is zero, show the walk class
		if(alternating == 0) {
			$(".walk2").hide();
			$(".walk").show();

		// otherwise show the walk2 class
		} else {
			$(".walk").hide();
			$(".walk2").show();
		}

		// if alternating is 1, change it to zero. if it's 0, change it to 1
		alternating = 1 - alternating;

	}

});

It’s beyond the scope of this post, but it would be interesting to animate more than two frames of something and have scroll become another interaction point for your users. It’s a simple example, but this technique has a lot of possibilities.

Demo

Download