HTML5+CSS on Canvas 3D WebGL (TM) Library
 

posZ Library Method

Short Description: Move in Eye Direction

Signature: t.posZ (z0,[z1[,ex,ey,ez]])
Group: Light and Shadow
Class: transition Class
 

Assigns z0 to the z coordinate of the transition in 3D space and adapts the x and y coordinates so that the final 2D image of the transition does stay stationary. In other words, the top left point of the transition is moved away or towards the user to an extend that its z coordinate finally matches the z0 parameter.

The main application area of posZ arises for HTML elements that already have the correct position on the screen in 2D, but that conceptually are not in the z=0 plane. So for example this page has a grey background that is 200px behind the main image and the main text box. The page creates a 3D effect by attaching CSS-shadows to the image and the text box that create a hovering effect.

In order to make taccgl™ display correct shadows, it needs to be defined that the grey background is in the z=200px plane e.g. using posZ and resizeZ:

taccgl.a(document.body).shadowOnly().color("black").posZ(500).resizeZ().showAfter().start();
taccgl.actor("testimg").to(200,1000,-500).dur(7).start();
taccgl.actor("Middle").showAfter().start();
taccgl.actor("MenuBar").showAfter().start();
RUN

First have a look at the following simpler examples:

taccgl.a(document.body).shadowOnly().color("black").showAfter().start();
taccgl.actor("testimg").posZ(-500).start();
taccgl.actor("Middle").posZ(-500).start();
taccgl.actor("MenuBar").posZ(-500).start();
RUN
taccgl.a(document.body).shadowOnly().color("black").showAfter().start();
taccgl.actor("testimg").posZ(-400).start();
taccgl.actor("Middle").posZ(-200).start();
taccgl.actor("MenuBar").posZ(-300).start();
RUN

As the examples show (in 3D mode) elements become smaller when moved away and larger when moved towards the user. By using resizeZ this effect can be suppressed, or in other words, the element is resized just as much as needed to compensate the change of distance. Then the animated element is in fact stationary and just the shadows change.

taccgl.a(document.body).shadowOnly().color("black").showAfter().start();
taccgl.actor("testimg").posZ(-500).resizeZ().start();
taccgl.actor("Middle").posZ(-500).resizeZ().start();
taccgl.actor("MenuBar").posZ(-500).resizeZ().start();
RUN
taccgl.a(document.body).shadowOnly().color("black").showAfter().start();
taccgl.actor("testimg").posZ(-1000).resizeZ().start();
taccgl.actor("Middle").posZ(-1000).resizeZ().start();
taccgl.actor("MenuBar").posZ(-1000).resizeZ().start();
RUN
taccgl.a(document.body).shadowOnly().color("black").posZ(1500).resizeZ().showAfter().start();
taccgl.actor("testimg").start();
taccgl.actor("Middle").start();
taccgl.actor("MenuBar").start();
RUN
taccgl.actor("Middle").showAfter().start();
taccgl.actor("ex2",null,null,2).posZ(-500).resizeZ().dur(5).start();
RUN

The additional parameters ex, ey, ez specify the position of the virtual eye. If not specified, the current eye point specified with adjustEye is used, at the point in time when the posZ method is called and later changes of the eye point position are not taken into account. If the eye point changes, e.g. during parallax scrolling, it might be required to explicitly specify the ex, ey, ez parameters.

When using posZ together with position, to, from or other methods changing the position of the element, then posZ must be used after these methods.

WebGL™ is a trademark of the Khronos Group Inc.

Next Page:transition.resizeZ - Resize to compensate Distance
Previous Page: transition.castShadow - Control casting of shadows on other transitions