HTML5 Canvas 2D javaScript Library

parallaxEye Library Method

Short Description: Parallax Scrolling Eye Position

Signature: taccgl.parallaxEye ([fx,fy,[x,y,z]])
Class: taccgl Class

This method is depricated. Please use Eye.parallax instead, which has the same function.

taccgl™ implements parallax scrolling by adjusting the eye position upon scrolling. The parallaxEye 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 adjustEye 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.

While the parallax scrolling is enabled using this method, it is normally not useful to call the adjustEye function, because each scroll operation implicitly calls adjustEye and sets the eye position to the coordinates described above. The parallax scrolling can be disabled by calling parallaxEye without parameters.

If parallaxEye is called without the x,y,z parameters, the current eye position is taken as default.

When using parallax scrolling you normally want to enable the taccgl_parallax option 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 an scroll, to see that the sample elements scrolls faster than the rest of the page.

Sample Text Box for parallax Scrolling


taccgl.defaultEye (); taccgl.parallaxEye (1,1);
taccgl.defaultEye (); taccgl.parallaxEye ();

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.defaultEye (); taccgl.parallaxEye(4,4,0,-2000,-5000); var"sample",taccgl.dddBox).dur(10).start(); RUN
Next Page:taccgl.createEye - Create Eye Point Object
Previous Page: taccgl.adjustEye - Adjust Eye Position
Please Add a Comment or Question, click here!