SiteOrigin Parallax Feature
The SiteOrigin Parallax feature adds interaction to a page by modifying the CSS properties of elements based on their position in the viewport.
Parallax modifies CSS properties based on the elements position in the viewport. The Viewport option in the Parallax settings takes a number between 0 and 1. With 0 being the bottom of the screen, 1 being the top of the screen and 0.5 being half way. Parallax will adjust CSS values from the start value to end value relative to the viewport.
Translate X moves elements on the horizontal axis based on pixels, the Translate X option expects to be provided with whole numbers for it's values. To start or end at the elements default position use 0.
Translate Y moves elements on the vertical axis based on pixels, the Translate Y option expects to be provided with whole numbers for it's values. To start or end at the elements default position use 0.
The Rotate option expects to be provided with whole numbers that represent degree. To start or end the rotation at the elements default position use 0. The image shows how to set a Card widget to follow the scroll for a 20 degree rotation.
The Scale option will grow or shrink an element and expects a float number for its values. To grow 10% you would enter 1.1 or to shrink by half enter 0.5. The default scale of an element is 1.
The Opacity option will adjust the opacity of an element between a minimum of 0 and a maximum of 1, opacity expects a float number for its values.
The Blur option will adjust the blur filter of an based on a pixel radius, blurs expects whole numbers for its values, with 0 being no blur. Using large numbers can have a negative performance impact.
The Greyscale option will remove color from the element based on a percentage. 0 being full color and 100 being black and white. The Greyscale option expects whole numbers between 0 and 100 for it's values.
Get Prime for a single developer. Suitable for individuals, site owners and freelancers.
Get Prime for two or more developers. Suitable for agencies, teams and companies.