Tutorials

Heroic Banner

Setup

1. Add the Stack to the Stack’s Editor.

stack added

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”.

background image

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.

padding

5. Select a Preset value for the effect you want to use.

preset

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.

General Customization

Image Size

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.

Content Padding

Increase or decrease the area between the content and the edges of the Content Background.

Max Width

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.

Border

A set of options to control the border and border radius of the content.

Shadow

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.

Need to update your product? Use the Order Lookup Form to download the latest version.