The Concept

ANAGLYPH CONCEPT (in few words)

The tridimensional perception is generated by the brain  receiving different images of the same subject from left and right eyes.
You can easily verify this putting a finger 30 cm from your eyes and alternatively close the left and the right eye... you'll have the impression that your finger is moving.
Anaglyphs images are an optical illusion of depth created from flat, two-dimensional  images.
Viewing anaglyphs through appropriately colored glasses results in each eye seeing a slightly different picture. In a red-blue anaglyph, for instance, the eye covered by the red filter sees the red parts of the image as "white", and the blue parts as "black" (with the brain providing some adaption for color); the eye covered by the blue filter perceives the opposite effect. True white or true black areas are perceived the same by each eye. The brain blends together the image it receives from each eye, and interprets the differences as being the result of different distances. This creates a normal stereograph image without requiring the viewer to cross his or her eyes.


To create an stereoscopic image you need two images of the same subject from slightly different point of view... this is quite difficult to do if you are not the photographer that take the picture... 
Z3D does not work with images, but simply work with text.
All the text you read when you surf the web is virtual, so it is relatively easy to duplicate for create an anaglyph view. Z3D just dinamicaly modify a web page and duplicate all the text content, altering colours and background to create the trick.


If you know a bit about Javascript, CSS and XHTML probably you can already guess how Z3D works... anyway...
The basic idea is to replace every text node in the DOM, with two identical, except for position and colours, text nodes.
To do that Z3D recursively navigate the DOM tree searching for text node, once find, an inline new element is applied around the text. This is needed to calculate the absolute position of the text in the page trought offsetWidth and offsetHeight property.
Having the absolute position of the text node the next step is to set to "hidden" his visibility property and to create two  new elements with absolute position containing the same text with different colours and an horizontal gap of pixel between them.