ZIM js JavaScript Framework

Canvas Components, Controls and more!

Scrolling Parallax Animation on HTML 5 Canvas with ZIMjs Parallax


ZIM PARALLAX lets you scroll the page and control animations and content on the HTML 5 canvas in JavaScript with CreateJS and ZIM js.  The parallax class has always been part of the ZIM Build module but has now been updated to include scrollX and scrollY inputs along with the traditional mouseX and mouseY inputs. The library is available on the ZIM SITE under the CDN links – either in the whole ZIM package, the Build Module or the stand-alone Parallax sub module for 3K.

The combination of Parallax and Canvas dynamic drawing is amazingly powerful.  Creator, Dan Zen, made a Parallax Holiday Card in one day and still had time for family gatherings!

The parallax class lets you set up layers to animate and each layer is a ZIM ProportionDamp object.  So the Parallax class acts as a wrapper for multiple proportion damp objects.  Each layer looks something like this in the code:

{obj:banana, prop:”x”, propChange:200, input:”scrollY”, inMin:500, inMax:600}

This means that the banana will move 200 pixels in the x as the window is scrolled from 500 to 600 in the y direction.  You could animate the banana in from the side of the page, for instance.  You can also control y, alpha, scaleX, scaleY, rotation, etc. and there are two convenience properties, scale and frame (to handle timeline animations).

ZIM Parallax also lets you pass in custom input if you want in your own Ticker – for instance to handle a slider or Web cam motion, etc.

Please have a look at the well documented example and try your hand at making these very compelling features.  Dig into some more CreateJS and ZIM js and share with colleagues.  Any questions, you are welcome to message at https://www.facebook.com/groups/createjs/

All the best,

Dan Zen


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s


This entry was posted on December 10, 2015 by in javascript and tagged , , , , , , , , .


%d bloggers like this: