Stacks Image 1101677

Parallax Box

UTILITY STACK
STACK DETAILS:
  • BROWSER: IE9+, CHROME, FIREFOX, SAFARI
  • REQUIREMENTS: STACKS 3+
  • STACK VERSION: 1.0
PURCHASE INCLUDES:
  • 1 YEAR FREE UPDATES
  • 1 YEAR FREE SUPPORT

Overview

Parallax Box is a responsive two column stack with parallax effect, where one column moves to a slower rate than the other. Innovative settings like container inertia and adjuster are included, as well as column width, break points and invert options.
We may use any type of content on the columns, like text, image, video or other stack.
Parallax Box is developed for Stacks 3 plugin, so it requires RapidWeaver 6 and Stacks 3.

Demo

Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.
Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.
Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.
Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.
Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.
Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.

Settings

Stacks Image 3211
Inertia: The speed at which the container moves in relation to the scrollbar.

Adjust: The value that moves the container into a position we want.

Column Width: The width of the columns in percentage, relative to the break point.

Break Point: The point at which content will respond to provide the best possible layout to consume the information. 

Invert on Break Point: Inverts the content in relation to the Break Point option.