How to use the parallax effect with the Layer Slider

1 comment(s)

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.

Layer Slider Parallax Settings
Input parameter for the parallax effect in Layer Slider

Layer Slider Parallax
Move your mouse over your slider to see the parallax effect


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
Parallax Slider

Related Post

Embedding videos to Layer Slider

As the next part of the Layer Slider tutorials after the Parallax demo now we will show you how to embed your videos from a video channel, like Youtube or Vimeo or even a self-hosted one from a cus...


Advanced usage of Layer Slider

If you follow our blog section in the last period, you can see that the recent articles concern to Layer Slider. Those are some tutorials for the existing users, and so-called detailed description ...



instant cash loans
Thursday, 12 March 2015

I am using Layer Slider here... Look at the main page of my link to see what can be done with this great slider. I am going to try Parallax soon so wish me luck! I know I'm also advertising but please check my instant cash loans website. I definitely recommend Layer Slider to anybody. The rest are not worth it and I have always had hassles with the others.

Leave your comment

Wednesday, 24 July 2024