AltTextUsing the Chroma Stack

SLIDE UP

A scroll controlled Slide Up Social Footer  

Look at the bottom of the page and watch the Chroma social bar as you scroll up and down

Note: More control of when to slide up/down is possible using Chroma Pro and marker controlled slide.

Get In Touch

                  
www.bigwhiteduck.com

Comments

This page shows a Social Footer sliding up and down. It could however be anything you like. A special offer, contact info or even a form.

This page has a scroll controlled social footer. Using Chroma Pro, you can control the slide up and down using markers and so show or hide it exactly wherever you like.

We have a fixed Chroma menu at the top of the page just to demonstrate that you can have as many Chroma stacks on the page as you like.

Setup Notes

THE SOCIAL FOOTER

1. Sizing

Chroma is set to Position Fixed and relative to the bottom of the page.

The width is set to Scale to Content s

Chroma handles the padding, rounded corners and the background color of the social bar. You can use any stacks you like to make the contents. This example just uses a Paragraph Pro with font awesome icons.

2. Slide Up and Down

Simple set the Slide Animation control to Scroll Activated and choose the up and down sensitivity.

For this example, the Initial State is set to In View


Want More Control?

The slide up and slide down functions can be controlled precisely using markers by swapping Chroma for Chroma Pro. All the other settings are identical.

With markers, you can choose exactly when and where to show and hide the social footer bar.

THIS IS NOT A REAL MENU. It is just to show Chroma in operation.

To use this Chroma setup simply replace the 3-column fake menu with your real menu.

Other Stacks used.

Just for this example (not required)

  • Sections Pro
  • Header Pro
  • Paragraph Pro
  • ButtonPlus 2

Unlike other "Blank" themes, Joe's is totally blank. There is no hidden framework behind the scenes.

There are therefore no dependencies in this project and you can copy the Chroma set ups in to any theme.

Note: Examples using full width fixing requires a theme that allows full width content