Layers 3D is a powerful jQuery plugin which you can use for creating 'Parallax' or 'Out of the Image' effects on your site. With 'fullsize' mode you can create even a whole parallax effect website!
How it works?
It is very easy: you can create layers (we recommend to use PNG images) and position them (by adding left and top properties) inside their container element. After that if you use Layers 3D plugin on the container element the layers will be moving if you scroll on your page (or - optional - if you move your mouse cursor over the element).
As you can see, there are three layers on this picture which are moving with different speed with a delayed transition if you scroll on your page. You can easily set which layer should move slower or faster - with this setting you can create a 3D parallax effect, and because the overflow of the container element is set to visible, layers can fly out of the image.
Of course it is responsive, if you need! So your complete Layers 3D Box will resize itself (including the size and the positions of the layers), when you resize your browser. The picture above is set to responsive, you can try it!
Layers 3D also allows you to add mousemove trigger (instead of scrolling) to an image - so the effect will be shown if you move your mouse over the image!
This image has a realtime transition, so it will animate instantly as you scroll with no delay.
Let's see another sample!
This is also an image which has been sliced to five parts. Every part of the image contains only 2 pixel wide 'lines' but if you put all these images over each other you will see the complete image. Layers 3D works like magic if you use it in this way.