ScrollShow Demo

On this page are some more examples of the use of the ScrollShow Stack:

  • In the center: a box that disappears as soon as you scroll down, and will not be shown again until you reload this page or visit it again.
  • Also in the center and a little below: a series of boxes that come and go when you scroll down.
  • Top left: a green box showing as soon as you scroll down that is replaced with a yellow box when you scroll up again and vice versa.
  • Top right: a small box showing your current scroll position; and links to scroll up or down precisely, and show or remove all boxes.
  • Center left: an example of social media icons (not functional) that appear when you scroll down at least 100px.
  • Center right: a series of call-to-action boxes that identical except the background color. When scrolling, one of them is shown. Result: the more you scroll down, the darker the color.
  • Bottom: a copy of the menu that appears as soon as the menu on the top is scrolled out of sight. When scrolling up, it disappears when the top menu is visible again.

Back to product page

In order to be able to scroll down enough to see all examples of the ScrollShow Stack, some empty space is added below.
current scroll position: 0px
Stacks Image 366
Do you really want to close all boxes?
You will need to reload this page to show them again.

ScrollShow Stack demo page

Please scroll down gently to see the boxes come and go. For precise scrolling, you can use the links in the upper right box.

This content will disappear as soon as you scroll down – and will not be shown again.

Keep scrolling down. There’s more!
With the download of this stack, a RapidWeaver sandwich file is included with the examples on this page, and many more.
Keep scrolling down. There’s more!
The End
Scroll down, and I’m visible.
Scroll up, and I’ll disappear.
Scroll up, and I’m visible.
Scroll down, and I’ll disappear.




© 2012-2018 Marathia Web Design | Contact