1. Add the Stack to the Stack’s Editor.
2. If you intend to use an image, add an image to the Background Image field in the Stack’s settings panel under the heading “Background”.
3. Add your desired content to the “Drop stacks here” section. This content will appear in front of the background image.
4. Change the Background Padding values to increase or decrease the size of the background area. This is the area where the Background Image displays. The Margin values are optional and only effect the space between the background area and the surrounding content outside of the Stack.
5. Select a Preset value for the effect you want to use.
By default the Preset option is set to “Auto – Animation”, “Auto” means that this preset animates automatically without the user having to do anything, “Mouse” means the effect relies on the position of the mouse, and “Scroll” means the effect relies on the position of the scroll bar. Of the 8 choices, most modes do not require any additional setup unless you wish to customize how it works.
You can adjust how the background image fits by changing this value.
- Cover – Scale the background image to be as large as possible so that the background area is completely covered by the background image. Some parts of the background image may not be in view within the background positioning area
- Contain – Scale the image to the largest size such that both its width and its height can fit inside the content area
- Fit to Width – Scale the background image so that the left and right sides of the image fit to the width of background area. The left and right of the image will always be visible. The image may be cropped vertically or the image may repeat in the vertical direction, depending on the size.
- Fit to Height – Scale the background image so that the top and bottom of the image fits the height of background area. The top and bottom of the image will always be visible. The image may be cropped horizontally or the image may repeat in the horizontal direction, depending on the size.
- Actual Size – The image will not be scaled and will display at it actually resolution. The image may be cropped on all sides or repeat vertically and horizontally, depending on the size. This option is good for patterns.
- Use Custom Size – Declare a set height and width of the image. The image may be cropped on all sides or repeat vertically and horizontally, depending on the size. This option is for more advanced users and is also good for patterns.
Content Background Color
This adjusts the color of the content inside of the background area. This color value supports opacity.
Increase or decrease the area between the content and the edges of the Content Background.
Set a maximum width in pixels that the content can be. The content will be centered when the width of the browser or containing element is larger than the set amount.
A set of options to control the border and border radius of the content.
A set of options to add a box shadow to the content.
Preset Specific Customization
Auto – Animation: Direction
Change the direction the image animates.
Auto – Animation: Animation Speed
Increasing this value causes the animation to move more quickly.
Auto – Gradient: Colors 1 & 2
These set the color of the gradient inside of the background area. The color values support opacity, especially useful when also using a background image.
Auto – Gradient: Stop Points
Adjust at what point colors 1 & 2 overlap.
Auto – Gradient: Orientation
Change the direction or shape of the gradient.
Auto – Gradient: Animate Gradient
Enabled by default, this option makes the gradient transition from color 1 to color 2 and back continually.
Auto – Gradient: Animation Speed
Adjust how quickly Animate Gradient transitions between colors.
Mouse – 3D Parallax: Z position
Adjust how far away from the background the content sits in 3D space. A higher value brings the content closer to the screen.
Scroll – Frosted Glass: Blur Amount
Adjust how much blur is applied to the transparent content. Note: the content must have an opacity value lower than 90% to display.
Scroll – Parallax: Parallax Speed
Adjust how fast or slow the background image moves in relation to the browser’s scroll speed.
Scroll – Transition: Switch Point
Adjust how far from the top of the browser the stack should be before it fades the background image out and the transtion image in. Setting the value to 1px will mean the image will not transtion until the stack is 1px away from the top of the browser window.
Scroll – Transition: Animation Speed
Change how fast the image blurs out and in.
Scroll – Transition: Transtion Image
Set an image to transtion to whens the Switch Point has been reached.