Layers 3D

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).

Try it: scroll down slowly!

show / hide the source code of this example

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!

Cartoon Example

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!

show / hide the source code of this example

Let' see the first sample with realtime transition

show / hide the source code of this example

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.

show / hide the source code of this example

Do you like 3D effect? Move your cursor over the text!

The following is an HTML sample with mousemove trigger.

These are P elements with text inside. They have all the same style settings except opacity.

Note that responsive mode works only with image layers.

3D effect

3D effect

3D effect

3D effect

3D effect

3D effect

show / hide the source code of this example

Features

* The 'mousemove' trigger is not working with embedded videos, iframes and some Flash contents.

Setting movement

Of course you can disable horizontal / vertical movement. In the following sample you cannot move the layers vertically.

show / hide the source code of this example

It is easy to add a link a to layer

You can simply put the layer inside an anchor element. Click on the km text on the logo above. Note, that the link will work only if other layers won't be over your linked layer.

It is important to know

This plugin is for animating elements only. It will never auto-cut or auto-slice your images, so you will need to create you layers yourself.

Do you need more?

The plugin supports also another type of usage, called: fullsize. You can build a whole parallax webpage with fullsize mode. You can find some examples in the top left menu, try them!