ScrollTo and Bounce Stacks set
Meet Scroll Pane's little brother... easily create an animated scroller to dynamically take
your visitors to another position on your webpage. Comes with a built-in bouncing effect.
ScrollTo and Bounce Examples
Below a demonstration video of the ScrollTo and Bounce Stacks set in action, the download file comes with the
demonstration RapidWeaver project file.
More examples
Some other examples of the ScrollTo and Bounce Stacks set in action on the updated Mondrian Theme from Henk Vrieselaar.
ScrollTo and Bounce Manual
The example website and video demonstrate almost all the available options that come with the ScrollTo and Bounce Stacks set and each option also has his own Tooltip (visible when hovering over an option in the HUD). So you are probably informed enough to get you started with creating your own Scroll Pane enabled Websites but of-course we've also created this more detailed manual with more information about each stack thats available in this set.
The ScrollTo and Bounce Stacks set contains the following stacks:
- ScrollTo Enclosure, add this stack once on a page to enable the ScrollTo and Bounce functionality;
- ScrollTo Position, create a unique position on your page that can be used to ScrollTo;
- ScrollTo, create a clickable link that activated the ScrollTo and Bounce;
You can use the ScrollTo and Bounce Position stack to create positions inside one of the three Scroll Pane stacks.
More information about this usage is shown below in the detail section.
More details
Below a more detailed explanation on how to use the specific ScrollTo and Bounce Stacks with their own options.
Click on an item to show/hide it's documentation content.
Bounce
effect
Simply add this stack once on a page and thats all it takes. If you want the Bounce effect besides Scrolling then click this checkbox.
Simply add this stack once on a page and thats all it takes. If you want the Bounce effect besides Scrolling then click this checkbox.
Position
Set the name for this position (that is the position where you drop it), note that the name should be unique on this page. So should I start with the text UniquePosition? No, you're free to use your own “naming convention”. We've only used this example no remind you of the fact that is should be unique.
Set the name for this position (that is the position where you drop it), note that the name should be unique on this page. So should I start with the text UniquePosition? No, you're free to use your own “naming convention”. We've only used this example no remind you of the fact that is should be unique.
You might consider setting the
Margins and Paddings to zero for
the overall look of your content
when you are using the Stacks
plugin v1.
Show information block
By default the ScrollTo Position stack has an information block to make the identification of the Position easier in edit mode. When the stack is used in small columns you can disable it's visibility. Simply drag the stack onto the page, set its properties, disable the Information block and drag it into it's final position.
Show information block
By default the ScrollTo Position stack has an information block to make the identification of the Position easier in edit mode. When the stack is used in small columns you can disable it's visibility. Simply drag the stack onto the page, set its properties, disable the Information block and drag it into it's final position.
Destination
Set the destination position that you want to ScrollTo or Bounce. This is one of the positions created with the ScrollTo and Bounce Position stack. If you leave this field empty it automatically creates a link to the top of the page.
Tooltip
Type a short Tooltip text as you want it to appear when your visitors hover their mouse over the “ScrollTo and Bounce link”.
Set the destination position that you want to ScrollTo or Bounce. This is one of the positions created with the ScrollTo and Bounce Position stack. If you leave this field empty it automatically creates a link to the top of the page.
Tooltip
Type a short Tooltip text as you want it to appear when your visitors hover their mouse over the “ScrollTo and Bounce link”.
Scroll speed
Select how long the scrolling effect should take, value in milliseconds.
Show information section
By default the ScrollTo stack has an information block to make the identification of the Destination easier in edit mode. When the stack is used in small columns you can disable it's visibility. Simply drag the stack onto the page, set its properties, disable the Information block and drag it into it's final position.
Note that
This stack is a placeholder for other stacks, so each stack that you drag inside this one is automatically turned into a clickable link. You can also use the RapidWeaver built-in Add Link dialog to achieve the same result but only apply it onto a single word of text. More information below on how to achieve.
Select how long the scrolling effect should take, value in milliseconds.
Show information section
By default the ScrollTo stack has an information block to make the identification of the Destination easier in edit mode. When the stack is used in small columns you can disable it's visibility. Simply drag the stack onto the page, set its properties, disable the Information block and drag it into it's final position.
Note that
This stack is a placeholder for other stacks, so each stack that you drag inside this one is automatically turned into a clickable link. You can also use the RapidWeaver built-in Add Link dialog to achieve the same result but only apply it onto a single word of text. More information below on how to achieve.
Manually creating a
ScrollTo and Bounce link is
easy. Just select some text
or an image and use the Add
Link button in RapidWeaver
to add the ScrollTo
function. All it takes is
the rel attribute that you
can add by clicking on the
plus sign. The value should
start with
ScrollTo
(case sensitive) and then
between brackets the scroll
speed in miliseconds. In
this example
ScrollTo[2000].
If it should move to the position directly you could use a value of ScrollTo[0] but in such a situation you better not add the rel name/value combination so that the browser handles the position move itself.
If it should move to the position directly you could use a value of ScrollTo[0] but in such a situation you better not add the rel name/value combination so that the browser handles the position move itself.
The
ScrollPane Stacks set
(different product) comes
with built-in Scrolling
features, all it takes is
the Follow Links checkbox
and simply create multiple
positions inside one the
the ScrollPane stacks. For
the creation of the
positions you use the
ScrollTo Position stack.
Create a Link to a Position
by using the RapidWeaver
built-in Add Link dialog.
Enable the Follow Links option from the ScrollPane Enclosure and you are ready to go.
Enable the Follow Links option from the ScrollPane Enclosure and you are ready to go.
Scroll Pane FAQ
All currently known FAQ items are shown below, if you believe something is missing we sure would like to know.
No that is not necessary since
the Scroll Pane stacks set comes
with built-in scroll support. All
it takes is to enable the “Follow
links” option in the Scroll Pane
Enclosure stack and use the
ScrollTo Position stack to define
you Positions inside one of the
three currently available Scroll
Pane types. You create your links
with RapidWeavers built-in Add
Link dialog.
ScrollTo and Bounce Information
Basically the ScrollTo and Bounce stacks set is a “GUI” for the used jQuery plugin that enables animated scrolling on webpages.
Besides the basic scrolling functionality we've also added a cool Bounce effect so that you are able to dynamically Scroll and Bounce to different Positions on your webpage(s). Finally you can also use the ScrollTo and Bounce Position stack to define positions inside the Scroll Pane stacks.
What you get when purchasing this Stacks set:
- Starting with the three stacks (Enclosure, Position, ScrollTo);
- RapidWeaver example project as shown in the video demonstration;
Requirements:
- RapidWeaver 4 or 5;
- Stacks Plugin 1.4 or above.
Version 1.0.1, released
on 27 january 2012
New: Compatibility update stacks plugin v2
New: Minimized file size and interface
Version 1.0.0
First public release on 6 march 2011.
New: Compatibility update stacks plugin v2
New: Minimized file size and interface
Version 1.0.0
First public release on 6 march 2011.