Pattern Library

Scroll Indicator

Home

Mouse scroll Indicator - This is the scrolling mouse. It can be used to indicate that there is more information below that cannot yet be seen. This is useful if the user is not so familiar with web designs, and could otherwise miss something. Although this is a very useful component its limits at this moment are that the moving arrow cannot rotate and scroll upwards when it reaches the bottom of the page. This can be overcome by making it disappear after a certain distance down the page.

See the Pen animated scroll indicator by George Houghton (@TheM3xican) on CodePen.

Pulsing Arrow - This Arrow is a clean way to indicate that there is information below. This code is very simple to use and can be easily adapted. The limits are again that at the present time the arrow can only point downwards. This can be overcome by making it disappear after a certain distance down the page.

See the Pen pulsing arrow by George Houghton (@TheM3xican) on CodePen.

Circles - These circles can be used at the edge of the page as a way to show that the page continues further. This is activated by a simple hover command. They are easily adaptable. The problem is that the circles do not change at the bottom of the page. Again, this can be overcome by making them disappear at a certain point on the page.

See the Pen circle navigation by George Houghton (@TheM3xican) on CodePen.