HTML5 Canvas 2D Library

parallax Library Method

Short Description: Set parallax position of eye point

Signature: taccgl.stdEye.parallax ([fx,fy,[x,y,z]])
Class: Eye Class

taccgl™ implements parallax scrolling by adjusting the eye position upon scrolling. The parallax method activates and parameterizes the parallax scrolling. If the page is scrolled to the top left position the eye position (x,y,z) is used. Please refer to the Eye.setPos function for the meaning of these coordinates.

When the user scrolls the page down or right, the eye position moves accordingly. The acceleration factors fx and fy specify how much the eye position moves. For each each pixel scrolled to the right the eye position moves fx pixels to the right and for each pixel scrolled down, the eye position moves fy pixels down.

More precisely the eye position is (x+fx*sl, y+fy*st, z) whereby sl means the number of pixels the pages was scrolled to the right and st the number of pixels scrolled down.

Using the Eye.setPos or Eye.setDefault methods parallax scrolling can be disabled as well as by calling parallax without parameters.

If parallax is called without the x,y,z parameters, the current eye position (set with setPos or setDefault) or the x,y,z parameters supplied to a previous call of parallax are taken as default.

When using parallax scrolling you normally want to leave the taccgl_parallax option in its default enabled state to speed up scrolling. See Library Options. You also probably want to use LightSource.parallaxPos to adjust the light source position as well.

The following example enables parallax scrolling and then shows the sample element for 10 seconds. Using posZ the element is moved 2000px towards the eye and resizeZ is used to avoid enlarging the element (which normally happens when moving the element towards the eye). Click on the run botton and scroll, to see that the sample element scrolls faster than the rest of the page.

Sample Text Box for parallax Scrolling


taccgl.stdEye.setDefault(); taccgl.stdEye.parallax (1,1); /* scroll to view parallax effect */
taccgl.stdEye.setDefault(); taccgl.stdEye.parallax (); /* nothing shows without parameters */

The following example shows a box for 10 seconds. By scrolling you can see the box from an eye point below or from an eye point above the box.


taccgl.stdEye.setDefault(); taccgl.stdEye.parallax(8,8,-1000,-5000,5000);
Next Page:Eye.setOrigin - Set 2D Origin
Previous Page: Eye.setPos - Set eye point position