<- retour aux docs
23 avril 2019 3425

Documentation :
WS-ScroLi - Scroll line indicator

(v.1.0.0)

# Présentation

WS-ScroLi is a jQuery plugin to display a customizable scroll line indicator. This plugin is available on my Github.

# Installation

To use WS-ScroLi in your project you have to import the jQuery library and FontAwesome Icons library :

<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">

And then import the plugin itself :

<link href="https://cdn.jsdelivr.net/gh/alexandrebulete/ws-scroli/dist/css/style.css">
<script src="https://cdn.jsdelivr.net/gh/alexandrebulete/ws-scroli/dist/js/ws-scroli.js"></script>

# Options

• sections(Array) : to set sections you wish include and their icon class associated

sections : [
  [ '#section-1', 'fas fa-info' ],
  [ '#section-2', 'fas fa-user' ],
  ...
]

• position(Object) : to set the ScroLi position

position : {
  x : ['left', 20],
  y : ['top', 20]
}

• icon(Object) : to customize your icons

icon : {
  size         : 30,
  borderWidth  : 1,
  borderRadius : 100,
  color        : 'orange',
  colorPast    : 'green',
  colorOff     : 'grey'
}

• line(Object) : to customize the lines between your icons

line : {
  height      : 30,
  width       : 3,
  color       : 'orange',
  colorPast   : 'green',
  colorOff    : 'grey',
}

• validEnd(Object) : to display and customize a last “validation” icon at the end.

validEnd : {
  status      : true,
  icon        : 'fas fa-check'
}