SiteOrigin Parallax Feature
PRIME
The SiteOrigin Parallax feature adds interaction to a page by modifying the CSS properties of elements based on their position in the viewport.
Viewport Position
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
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.
Moves Left 500 Pixels
This card widget will have moved 500 pixels left when its position in the viewport is 75% from bottom.
Translate Y
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.
Moves Down with Scroll
This card widget will have its Y position adjusted to a maximum of 100px as you scroll the page.
Rotate
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.
Rotates Clockwise with Scroll
This card widget rotates 20 degrees relative to the scroll position.
Scale
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.
Scales Up with Scroll
This card widget scales up from 50% relative to the scroll position.
Opacity
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.
Becomes Gradually Visible
This card widget will go from 25% (0.25) to 75% (0.75) opacity.
Blur
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.
Focus Improves with Scroll
This card widget will become clearer the more your scroll.
Greyscale
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.
Multiple Options
Parallax takes up to 3 Options to allow for combinations, here we combine the Translate Y and Opacity options together.
Moves Down with Scroll
This card widget will have its Y position adjusted to a maximum of 100px as you scroll the page.
Scroll to top