Pseudo 3D or parallax with javascript

After reading the post about the pseudo 3D effect , it became interesting to implement a certain analogue for use in web applications. For the result I ask under the cat

The basics

After watching the video and twisting a couple of applications from the app, I came to the conclusion: the sprites (layers) are like in a cube. Therefore, when we turn the device, the near layers move in one direction and the most distant layers in the other. Somewhere in the middle is the main layer, to which our attention is riveted.

Having dealt with the theory proceed to the development.

Place layers

Let's not go far and use DIVs, and the CSS z-index property is also useful to us.

<div id="background_scene" class="flow" style="background-image:url(res/images/moun.jpg);z-index:2;top:-20px;left:-150px;width:200%;height:200%"></div> <div id="clouds" class="flow" style="background-image:url(res/images/clouds.png);opacity: 0.5;z-index:3;top:120px;left:400px;"></div> <div id="dragon" class="flow" style="background-image:url(res/images/dragon.png);z-index:5;top:120px;left:500px;"></div> 

Above, I gave 3 sprites with a class .flow, initial coordinates and pictures. Now it's time to get them moving.

Device rotation

All our needs for obtaining a position in space will satisfy the event: window.ondevicemotion.

 window.ondevicemotion = function(event) { X = event.accelerationIncludingGravity.x; Y = event.accelerationIncludingGravity.y; Z = event.accelerationIncludingGravity.z; } 

I will not paint the event, I am sending the curious to the list of references.
We need 2 values ​​from this event: X and Y.
Calculate the delta offset:

  deltaX = lastX - X; deltaY = lastY - Y; lastY = Y; lastX = X; 

Find all sprites by class name .flow
Since sprites with a small z-index "th 'most" remote "and must move in the opposite direction, the movement for each group is calculated separately:

 elements = $('div.flow'); elements.each(function (key, layer) { zIndex = layer.style.zIndex; sprite = $('#' + layer.id); if (zIndex > 9) { //        z-index < 10 anim = {"left":"-=" + deltaX * zIndex * 2, "top":"+=" + deltaY * zIndex * 0.5}; //0.5      ,         } else { anim = {"left":"+=" + deltaX * zIndex * 2, "top":"-=" + deltaY * zIndex * 2}; } sprite.animate(anim, 100); //   jQuery } 

In addition to its usual task, z-index also plays the role of a factor for accelerating the movement of sprites.
Well, that's basically all.

Improvements

1. To reduce the number of triggering of the layer motion method, timer activation was added. This gave an increase, but the increase in the interval entails jerky animation.
2. To reduce shaking, the delta is calculated differently: delta = X - X; Hsredn - is calculated in the moments of the timer interval. Even if you shake your hand at the last moment, everything will be smooth.
3. Added support for screen orientation.

Problems

1. The shaking is still noticeable, I don’t know, it is necessary to calibrate or to write a completely different algorithm
2. I can not really adjust the speed of sprites

Could do

1. A simple designer of Drag & Drop sprites, with level control.
2. Work not only with the accelerometer, but also with the mouse, scroll bar (depending on availability or settings)
3. Working with the camera is possible, but ...
')
I recommend to read

demo (if devicemotion is not supported on the device, then the random tilt generator will turn on)

As a code and an example, a small time from idea to implementation is guilty. It will be curious to know the opinion tips. If there is interest, I will try to finish the library.

UPD : It was not and is not possible to test on Andriod devices. And, unfortunately, the code does not work for them. I'll try to find a solution.