Tutorial

I will briefly describe what to do to achieve a cheap parallax scrolling effect from pictures.
I have some stub for a more technical implementation, about the formulae that I (should) use. Could be nice once finished, you find the ideas under Tech 1 and with a more practicable explanation Tech 2.
The details will change (I hope). At the moment, layers have to have the same size as the original image and you cannot zoom etc.
If you do something nice, send me a link or just tell me. If you then are not the first one, I might consider providing a gallery. Well, I would be GLAD to provide a gallery.

Same same

What we need is some images, that define the layers and the DOMiao JavaScript library file.
Then we embed some code in a webpage to host this rendering and – voila thats it (aint easy though).
First of all, download and unpack the archive and include the JavaScript file in your html pages header:

<script src="./files/domiao.js" type="text/javascript"></script>

Now you need two more things: images that will work and a piece of code to display the pictures.
As free image editing programs I recommend The GIMP and for vector based ideas inkscape.

The Everything by Hand- Method

The main idea is described in Tech 2 and I am working on it.

Fotos and Inpainting

One can create nice effects on fotos, too.
For that you have to:

find a cool picture.
decide on a size.
dissect the picture in a number of layers.
inpaint the areas that were covered by something else before.
code a little (little little).

The more layers you have the better the result will look and the more work you have and soon you will need a modern pc for a fluid feel.

Finding the cool picture

is easy if you know people who do a lot of them. I decided on one that two friends of mine did on a journey (should be Bagan). I sized it down to 500×333 pixel.

I hoped that it would be quite easy to trick with this picture, as the segmentation seems to be quite clear.
I will now do five pictures out of this one. The whole process, including inpainting and so on took me less than one hour and I am sure that next time it will be much faster.

Dissecting

Now starts a marathon of selecting, cutting, pasting, correcting etc. In this example I made a mistake and sometimes choose my selections to be “feathery”, that is why some borders seem to be a bit blurred.
In GIMP, I first add Layers (Ctrl+L) to the original image and make a copy of the background.
Now I put a selection around one layer, in the screenshot it was the temple. The “intelligent scissors” (I) tool is handy, corrections can usually done with the freehand tool (F).
Once the selection is okay, it can be cropped and pasted into another layer.

Inpainting

But once you cut something out of the background layer, parts miss and will be transparent.
These holes can be filled manually with a pen (heavy work), with the clone tool © – what I did, or with a special inpainting software. GreyCStoration is one of these free programs, but there are quite some of them out there that do reasonable .
In this case, cloning works fine. I do not want to describe it here in detail, searching the net for 10 seconds gave me this tutorial for cloning with photoshop which should suffice. Just, with the GIMP you have to press CTRL instead of ALT.

Now, I did this with every layer (and I agree it is not sooo much fun) and save each layer as a single picture. Of course it is very important that you chose a image format that is able to store transparency and can be read by most browsers (like gif or png). My layers looked like this at the end:

Oh my god – Code!

As with every DOMiao- project we need some lines of code (if you want to hack a visual editor that would be awesome – thanks!).
First of all include the Javascript file in the header (code given above).
As a reference point we have to have a div- container to give space and location for the viewport- div and a instance of a Renderer, along with instances for each Layer. Because we dont want to position the layers, the defineOnScreen- function takes a lot of zeros. The big number is the depth.

<div id ="center" style="position:absolute; top:100px; left:400px;width:400px;height:400px;">
<script type="text/javascript">
r = new Renderer();
r.viewportwidth = 500;
r.viewportheight = 330;
r.doClip = true;
lsky = new Layer();
lsky.defineOnScreen("lsky.png", 0, 0, 1200000, r);
lg = new Layer();
lg.defineOnScreen("lground.png", 0, 0, 200000, r);
l0 = new Layer();
l0.defineOnScreen("ltemple2.png", 0, 0, 95000, r);
l1 = new Layer();
l1.defineOnScreen("ltemple.png", 0, 0, 85000,r);
l2 = new Layer();
l2.defineOnScreen("ltul.png", 0, 0, 45000,r);
r.html();
</script>
</div>

Thats about it. But if you do so, there is no interaction yet. It just looks like the original image.
To allow interaction with mouse you can add a RendererMouseHandler. If you want to restrict the mouse- movements there are ways to do that. So you could allow horizontal movements only.
To start with the default, add following lines, just behind r.html(); :

h = new RendererMouseHandler(r);
h.startMouseHandling();

If you want to put a mask in the Demo you need a mask-image and call some masking function (I am tired, see the doc). In this example I used the possibility to clip the images, so that closer layers cant “move out of the image” as in the Tech 2 – example.