Parallax Slider
How it works
Parallax Slider is a nestable block element made up of Slider Items.
You can duplicate and remove Slider Items at pleasure.
Each Slider Item contains an image control and the content you want to set at the slide should be placed inside it.
Parallax Slider shouldn’t be wrapped at any element. Otherwise, parent paddings, margins, dimensions, etc.. can break the parallax animation. Just drop it at your page as if it was a container.
Styles
You can set any style you need at the style tabs of both Parallax Slider and each Slider Items. However, Slider Items should share the same dimensions to achieve a nice parallax effect. These dimensions can be set at width and height controls available at “Slider Items Style” Section.
Progress
Margin: the distance to be set regarding Parallax Slider. The demo uses 50px.
Width: the width of the progress. The demo uses 80%.
Height: the height of the progress. The demo uses 1px.
Path color: the color of the path filled by the progress.
Line color: the color of the progress.
Animation
Parallax scale: the scale to apply to the images to achieve the parallax effect. The demo uses 1.75
Ease: the parallax intensity. The demo uses 0.1
Ease: the speed when scrolling the slider. The demo uses 0.45
Ease: the speed when dragging the slider. The demo uses 1.5
– Tamu