HTML5 Canvas 3D WebGL (TM) js Library
 

parallaxPos Library Method

Short Description: Set parallax position of Light Source

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

taccgl™ implements parallax scrolling by adjusting the eye position upon scrolling, see parallaxEye. When using this way of parallax scrolling it can be useful to adapt the position of the light source using parallaxPos: If the page is scrolled to the top left position (x,y,z) is used for the light source. Please refer to the LightSource.setPos function for the meaning of these coordinates.

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

More precisely the light source 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 LightSource.setPos method, because each scroll operation implicitly calls LightSource.setPos and sets the eye position to the coordinates described above. The parallax scrolling can be disabled by calling parallaxPos without parameters.

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

The following 3 examples enable parallax scrolling and then show the sample element for 10 seconds. They show a shadow using taccgl.a(document.body) (see Shadows). Using posZ the sample 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 one of the run bottons and scroll. In the first example the sample element and its shadow both move in parallel, because eye and light source both move identically, both use fx=fy=1. In the second example the light source moves slower than the eye by using fx=fy=0.8. This makes the shadow move slower than the element. The third example disables movement of the light source during scroll by calling parallaxPos without parameters. This keeps the shadow fixed (except for the normal scrolling).

Sample Text Box for parallax Scrolling

Examples

taccgl.defaultEye (); taccgl.parallaxEye (1,1,0,0,-5000); taccgl.stdLight.parallaxPos(1,1,-20,-20,-5000);
taccgl.a(document.body).color("black").shadowOnly().showAfter().start();
var a=taccgl.actor("sample").posZ(-1000).resizeZ().dur(10).start();
RUN
taccgl.defaultEye (); taccgl.parallaxEye (1,1,0,0,-5000); taccgl.stdLight.parallaxPos(0.8,0.8,-20,200,-5000);
taccgl.a(document.body).color("black").shadowOnly().showAfter().start();
var a=taccgl.actor("sample").posZ(-1000).resizeZ().dur(10).start();
RUN
taccgl.defaultEye (); taccgl.parallaxEye (1,1,0,0,-5000);
taccgl.stdLight.parallaxPos(); taccgl.stdLight.setPos(-20,-20,-5000);
taccgl.a(document.body).color("black").shadowOnly().showAfter().start();
var a=taccgl.actor("sample").posZ(-1000).resizeZ().dur(10).start();
RUN

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.

Examples

taccgl.defaultEye (); taccgl.parallaxEye(4,4,0,-2000,-5000); taccgl.stdLight.parallaxPos(1,1,-20,1200,-5000);
taccgl.a(document.body).color("black").shadowOnly().showAfter().start();
var a=taccgl.actor("sample",taccgl.dddBox).posZ(-500).dur(10).start();
RUN

WebGL™ is a trademark of the Khronos Group Inc.

Next Page:taccglShaderConfig Class
Previous Page: LightSource.setPos - Set position of Light Source
Please Add a Comment or Question, click here!