WS-ScroLi

A jQuery plugin for display a customizable scroll line

V. 1.0.0

Documentation

Getting Started

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">

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'
}

Historique du plugin

Versions Commits
V.1.0.0 First version of the Scroll Line customizable