You have viewed 0% of the page.
image

image

Scroller Plus

Advanced progress indicator

Customisable scroll indicators and messaging for your RapidWeaver / Stacks webpages.

For those that like seeing progress

A simple stack that shows a visual indication of how far down the page the user has scrolled.

Scroller Features

On long web pages having a visual indicator of your progress down the page can be a desirable feature. It lets the user easily determine how much of the article they have read / have still to read.

arrows-h
Select mode

Choose from 5 diistinct scroller modes!

percentage
Show percentage

Option to show the percentage value of how much of the page has been viewed

megaphone
Customised messaging

Display changing messages as the user makes progress down the page.

And not to forget all of the features available in the basic Scroller stack too...
paint-brush-alt
Style it

Choose the base colour and the scroller colour. You can also set what height you want the scroller bar to be.

map-pin
Pin it

Have the scroller bar either at the top or the bottom of your page.

cubes
Add content

You can just use the scroller on its own or you can opt to add content above it.

layer-group
Tune it

Adjust the z-index if required to move the stack above any nav bar you use

Scroller Plus examples

image
image

The core of Scroller Plus is the original (free) Scroller stack. Scroller Plus however has numerous additional functions. Most notably, 4 new scroll line 'modes' and the ability to add a scroll 'counter' to any text stack.

You can see a Scroller Plus scroll line in action at the bottom of this page (scroll to see it move!). This is the 'Dual' mode which uses 2 scroll lines - each going in the opposite direction. Also, within this Scroller Plus stack, a paragraph stack has been added and used to host the Scroller Counter. You can however use the scroll line just on its own (without any content).

Modes

Scroller Plus comes with 5 distinct modes. Check out the demos below that show Scroller Plus working on various other pages in this website.

Note: The demos will open in a new tab.

Normal mode

This mode is the same as the free version of Scroller. The scroll line expands from left to right across the page. From 0% at the top of the page to 100% at the bottom.

Reverse mode

This mode reverses the direction of the scroll line so that it moves from right to left across the page. From 100% at the top of the page to 0% at the bottom.

Collision mode

This mode splits the scroll line into 2 and as the page is scrolled the lines move towards each other until, at the bottom of the page, they meet in the middle.

Double mode (best with content)

This mode uses 2 scroll lines that both operate in 'normal' mode. This mode works best when you have added content into Scroller Plus stack as this then separates the 2 lines and provides a nice effect.

Dual mode (best with content)

This mode also uses 2 scroll lines. The top scroll line operates in 'normal' mode and the bottom line operates in 'reverse'. Again, the effect is best seen when content has been added to Scroller Plus stack.

The example on this page uses Dual mode.

Get Scroller Plus

You can get this stack on its own or as part of our hugely discounted stacks bundle.

Our stacks bundle includes Scroller Plus and ALL of our other stacks that are currently available. Buying as a bundle offers huge savings compared to buying the stacks separately. Currently the bundle consists of the following stacks:

  • Easy Grid
  • Content Filter
  • Grid Enabler
  • Magic Mouse
  • Magic Mouse 2
  • Markdown Link
  • Parallaxer
  • Scroller Plus
  • Source Addons
  • Splider 2


image

Scroller Plus

Add various scroll indicators and a progress counter to your webpages.

Summer sale! Get 30% off the listed price.

Automatically applied during checkout


Buy for

usd

Buy for

eur

Buy for

gbp

Over 60% off!

image

Stacks bundle

Our stacks bundle includes ALL of our stacks in one incredible bundle deal!

Summer sale! Get 30% off the listed price.

Automatically applied during checkout


Buy for

usd

Buy for

eur

Buy for

gbp

FAQs

Below are some of the most common questions about this and our other stacks.

Stack FAQs

There are no specific FAQs for this stack at this time. See our general FAQs below. If you have a particular question about this stack then please get in touch.


General FAQs

Yes this stack has been designed to work in any framework. If you encounter any issues then please contact us with an example and we will do our best to resolve.

All our stacks use only local resources, collect no data and include no calls to remote servers or CDNs etc. As such the stacks are completely GDPR compliant.

We have a full supporting Knowledge Base including articles for all of our stacks and settings. If you can’t find what you need there then do not hesitate to reach out to us via your preferred channel.

The whole site has been built with Source micro framework. In addition, this page also uses (obviously). Finally, this FAQ section has been built with Toggle stack and the Bundle details section above uses Moreish stack.

Source Icon

Built with Source