e-addons

Share

ic Interface bwe-User Interface

Scroll indicator

Thanks to the e-addons Scroll Indicator, you won’t get lost on the page anymore!

Enjoy some graphic elements that indicate the progression and improve the navigation on-page and the comprehension of its parts.

e-addons scroll indicator
Position indicators for the whole page or specific elements on the page

Detect Mode

You can manage the detecting on the page in 2 ways.

scroll indicator allpage 1

All Page

You will be able to create a personalized progress bar that covers the entire page and view the status of the position-percentage.

scroll indicator sections 1

Sections

Otherwise, create N elements, even clickable, lean to the right or bottom to highlight the status of the position and navigate the page to the desired point.

To manage this it is necessary to define:

  • The item Label
  • The target #ID of Section or Element (see next paragraph*)

The POSITION trigger for the scrolling START and END point is very important. ***
This is the point at which the object is analyzed from the moment it appears in the viewport to the moment it ends; and it may be different based on the item you are analyzing

*** Sections Trigger

The triggering system checks the status of the position of the element between:

position top bottom

top bottom

position center bottom

center bottom

position bottom bottom

bottom bottom

position center center

center cener

position top top

top top

position center top

center top

position bottom top

bottom top

* Get the ID in any element

copypaste element id 1
Right click
copypaste element id 2
Copy ID
copypaste element id 3
Paste in the field

Indicators

For the Detecting sections we have provided many styles, which can be of type: progress or bulllet, in addition a system based on svg.

scroll indicator sections 2

Bullets

Horizontal or vertical arrangement.

  • Distance from the right or from the bottom

Numerous styles available to handle the style you want.

  • Progress
  • Side Progress
  • Shapes SVG **
  • Labels
  • Vertical Labels
  • Dots
  • Circles
  • Indent bars
  • Bars
  • Squares
  • Lines
  • CUSTOM PATH
scroll indicator allpage 2

Progress

In the case of a progress bar for the whole page, you can arrange it with respect to the 4 sides and define its size and width.

  • Distance
  • Weight
  • Height
  • Rounded style

Progress SHAPE

scroll indicator progress shape

Custom PATH

scroll indicator custom path

** Shapes SVG

SHAPES manages the progression along a svg form-path, there are 20 predefined designs.

path1
path2
path3
path4
path5
path6
path7
path8
path10
path9
path11
path12
path13
path14
path15
path16
path17
path18
path19
path20
scroll indicator transform

Transform

Style, size and position:

  • X and Y
  • Items space
  • Dimension
  • Weight
  • Rounded style (only bars)

Direction &Position

Vertical
scroll indicator direction vertical
Horizontal
scroll indicator direction horizontal

The second positioning parameter is optional, if not selected it will be centered

Options

Additional features:

  • shows the text labels next to the indicator
  • when clicked, the page scrolls on the element (optionally with offset in pixels).
  • hide the browser’s native scroll bar
scroll indicator options

Styles

scroll indicator style

Bullets

Custom colors for each state:

  • Normal
  • Hover
  • Active

It concerns:

  • Color
  • Progress Line color
  • Padding e Margin
scroll indicator style 2

Progress

For the progress bar across the page.

  • Color
  • Progress Line color
  • Padding and Margin
  • Border
  • 4 corners radius
  • Blending mode of Progress bar