... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ...
... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ...

Scroll Up - Foundation Footers Reimagined

My Image

ScrollUp Footers

You can put a footer in a slide up and just show when required


Because the footer is fixed, you can show it all the time if you want to.


You can even put your magellan navigation in the footer if you wish


Note: the rest of this page is the same as the home page, just scroll down to see the footer

My Image

Big White Duck Stacks

... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ...
... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ...

Although ideally suited to TopBar Menus, there are many uses for ScrollUp.

ScrollUp simply animates height, padding, background color and opacity.

The Duck on the left is in a ScrollUp stack which also contains another ScrollUp that houses the title, set to appear slightly after.

Every page on this site has a different ScrollUp effect, even the Stack Settings Page.
Be sure to visit them all to see what ScrollUp can do

My Image

Built for Foundation

TopBar Ready

Because ScrollUp comes from
Big White Duck you know that it is Foundation optimised.

Automatic removal of TopBar background

Automatic Detection of Mobile Menu Mode

Full user control of Drop Down Colors and Opacity

Fade In DropDowns
(Special Bonus Feature from TopBar Surgeon)

Minimally Invasive

The only alterations that ScrollUp makes to the TopBar are Background Colors and Opacity

Your Menus will behave exactly as you expect

Height and Padding is controlled within the ScrollUp container

Finally,
Hands Off Responsive Behaviour

My Image

ScrollUp detects when TopBar has transitioned to mobile mode automatically

You do not need to co-ordinate breakpoints, just set up TopBar as normal and your mobile menus will be styled by ScrollUp when necessary

This is particularly important when dealing with transparent TopBars

Control

ScrollUp gives you full control of the Dropdown color and opacity for the four possible states -

desktop or mobile when scrolled or not scrolled

Smart Effect Suppression

It doesn't make sense to change height and padding on small screens

ScrollUp automatically suppresses these effects when TopBar switches to mobile mode

Limitations

Pad With Care

If you go overboard with padding effects then there will not be room for the TopBar Menus

Use Responsive Padding on Images

ScrollUp can be triggered at either a pixel height or a percentage height go the page

Even using percentages ScrollUp cannot account for other elements changing aspect ratio as the screen width is changed. Their relative position down the page will change

What's Next

My Image

ScrollUp Pro

Advanced Scroll Detection

Using InView technology and ScrollUp Markers


More TopBar Styling

Menu Colors, Fonts and Sizes


Sticky Mode
For full design flexibility