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,1500,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.
| 
3D Animation
