You have viewed 0% of the page.

S C R O L L E R P L U S

For those that like seeing progress

Add engaging scroll / progress lines to your web pages. Scroller Plus offers 5 scroll line styles, a scroller counter and scroll-triggered messaging!


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.

Style it

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

Pin it

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

Use it

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

Select mode

Choose from 5 diistinct scroller modes!

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 new '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.

Scroller Counter

Another Scroller Plus feature is 'Scroller counter'. This is a little code snippet that can be added to any paragraph or header stack and which displays the current % viewed. The snippet doesn't need to sit within Scroller Plus content. It can be added anywhere on the page (though being in a fixed position is obviously most useful).

You can see an example of this at the bottom of the page. Here a paragraph stack has been added to the Scroller Plus stack and the snippet added. Some text at either side of the snippet has been added too.

Scroller Messages

This page also uses the Scroller Messaging option that allows you to show a different piece of text at intervals as the user scrolls down the page. On this page, Scroller Plus has been set to show 5 messages (which translates as one every 20% of the page). If you look at the counter at the bottom you can see when each message changes. The first message is hidden as the container that is in has been set to only become visible part way down the page.

Like the Scroller Counter, this is achieved by simply adding a single code snippet into any text stack that you like (again, it is obviously beneficial to use this in a fixed element so that it remains visible to the user throughout their journey through the page).

Buy Scroller Plus stack

You can buy this stack on its own or as part of our hugely discounted stacks bundle (find out more).