Setup

When added to the Stacks editor, the Emphasize stack is a blank “Drop stacks here” wrapper. You can place any stacks content into this wrapping stack and that content will automatically emphasize when it has reached the center of the browser window (when published or in preview mode).

No additional setup is required, however you may customize how the content is emphasized though the stack settings panel.

Emphasize On: Scroll

Enabled by default, content will emphasize based on scroll position.

Emphasize On: Hover

This option will emphasize content on hover instead of scroll position.

Transition Speed

Controls the time in milliseconds it takes to animate the scale, shadow, and overlay when the content is emphasized.

—

Initial Scale

Controls the size of the Emphasize stack when it is not emphasized. If the value is 100%, no scaling will be applied.

Emphasized (Scale)

Controls the size of the Emphasize stack when it is emphasized. If the value is 100%, no scaling will be applied.

—

Initial Shadow

Applies and adjusts the size of the shadow applied to the Emphasize stack when it is not emphasized. If the value is 0%, no shadow will be applied.

Emphasized (Shadow)

Applies and adjusts the size of the shadow applied to the Emphasize stack when it is emphasized.  If the value is 0%, no shadow will be applied.

Shadow Color

Defines the color of the initial and emphasized shadows.

—

Overlay Color

Defines the color of the page overlay when the stack is emphasized. This color picker supports opacity and it should be set to 0% if you do not wish to apply an overlay.

Overlay Z-index

Controls the Z positioning of the Emphasize stack in relation to other stacks on the page. This only needs to be adjusted if content appears over top or underneath the Emphasize stack that should not.

Advanced Settings

The Emphasize stack has some optional settings for refining how the features behave.

Focus Window

This setting is only available when Emphasize On: Scroll is enabled. These two values control the size of the window that is used to determine when content is in focus. In the image below the focus window is outlined in red while the Emphasize stack is outlined in green (reflecting its initial scale before being emphasized).

Whenever the Emphasize stack overlaps this window the content will be considered in focus and the emphasized settings will apply. The “Top” value defines the distance in percent from the top of the browser window. The “Bottom” value defines the distance in percent from the bottom of the browser window.

Example: Top 0% and Bottom 0%

The Focus Window will apply to the entire browser window. Any Emphasize stack that enters into view will be considered in focus and the emphasized settings will apply.

Example: Top 25% and Bottom 25%

The Focus Window will be 50% of the browser window in height. Content will be in focus when it overlaps the the Focus Window in the center of the browser.

Example: Top 50% and Bottom 40% (default)

The Focus Window will be narrow at 10% of the browser window in height. Content will be in focus when it overlaps the Focus Window 40% from the bottom of the browser and lose focus when it passes the center of the screen.

Show focus window in preview

Enable this option to see the Focus Window outlined with a red border and the Emphasize stack outlined with a green border while in preview mode. This can help you adjust the Focus Window to your desired height and position.

Enable content overflow

Enable this option to allow the emphasized content to overlap other elements on the page if the theme or stack framework you are using is not allowing the content to display properly. This option only needs to be enable on a single Emphasize stack if you are using multiple on a single Stacks plugin page.

How To Emphasize Specific Elements

There may be situations when you only want to scale or add shadows to a certain stack within the contents of the Emphasize stack wrapper. To handle this you can use any of the 3 predefined class names. Class names are added to the the stacks HTML > CSS classes field.
Note that these classes should only be added to stacks inside of the Emphasize stack and not to the Emphasize stack itself. They are also only necessary if you want to customize how the contents inside of the Emphasize stack are highlighted. 

If you are using a prior version of the Stacks plugin that does not include the CSS classes field you can contact 1LD support to receive a free wrapper stack that will allow you to add classes.

emphasize-scale

If this class is added to any stack within the contents of the Emphasize stack wrapper, the scaling will no longer apply to the entire Emphasize stack and will now only apply to stacks with this class name. This class can be applied to multiple stacks.

emphasize-shadow

If this class is added to any stack within the contents of the Emphasize stack wrapper, the shadows will no longer apply to the entire Emphasize stack and will now only apply to stacks with this class name. This class can be applied to multiple stacks.

emphasize-reveal

Any stack within the contents of the Emphasize stack wrapper that has this class will not be visible when the content is not in focus. When the content comes into focus the stack will then fade into view. This class can be applied to multiple stacks.