How to use the Parallax effect for the layers

If you ever checked the Layer Slider demo page, you could see that this is a really multi-purpose slider extension for Joomla, within many built-in features, animations, and other effects. Now we will introduce the Parallax feature, and give a closer look about it.

What is all about?

According to the definition: Parallax is a displacement or difference in the apparent position of an object viewed along two different lines of sight, and is measured by the angle or semi-angle of inclination between those two lines. Maybe this might sounds complicated, bit see the following examples, and everything gonna be clear:

This animation is an example of parallax. As the viewpoint moves side to side, the objects in the distance appear to move slower than the objects close to the camera.

But you can also meet this effect on every day. From iOS 7 you can get the parallax effect on the home screen of those Apple devices. In that case your icons and the background are on different layers. When you tilt your device the background moves under your icons. And here is the connection with the parallax effect and Layer Slider! This feature is also implemented, and you can use it for any of your layers.

How this feature works in Layer Slider?

You can find the parameter for this feature under the Transition tab of the Layer as you can see on the attached image. This is a textfield, where you can enter numbers. With zero value this function will disabled. But when you enter .e.g. 1, and move your mouse over the slider, the layer start to move inverse to your mouse movement. Set higher values for closer objects, and less for the further ones. You can enter negative values as well, in this case the layer will move right to your mouse movement, not in inverse.

Input parameter for the parallax effect in Layer Slider

Move your mouse over your slider to see the parallax effect

3....2....1....ACTION!

On the previously mentioned demo site you can check the Parallax layers on the third slide of the main slider, but the better example is the dedicated Parallax Slider . NjOy!

Parallax Slider