Scrolline.js
A jQuery plugin. Create a scroll line bar indicator on the page.
Demonstration
Documentation
Basic Usage
Include scrolline.js file in the page, along with jQuery.
<script src="js/jquery.js"></script>
<script src="js/scrolline.js"></script>
Then call $.scrolline();
to launch the plugin.
Options
You can apply a set of optional options:
backColor
- Define the color of back's scrolline (default'#ecf0f1'
)direction
- Can be vertical or horizontal (default'horizontal'
)frontColor
- Define the color of front's scrolline (default'#2ecc71'
)opacity
- Define alpha's scrolline, value must be between 0 and 1 (default1
)position
- Define the position of scrolline : top and bottom for horizontal's position, left or right for vertical's position (defaulttop
in horizontal andleft
in vertical)reverse
- Revert the front line sens on set value at true (defaultfalse
)weight
- Define the larger of scrolline on pixels (default5
)zindex
- Change the z-index value if needed (default10
)scrollEnd
- Callback's function call at the end of scrolling
Example
Scrolline revert with custom color at bottom position:
$.scrolline({
reverse : true,
position : 'bottom',
backColor : '#2980b9',
frontColor : '#f1c40f',
weight : 12
});
Scrolline vertical at right position with callback:
$.scrolline({
position : 'right',
direction : 'vertical',
weight : 30,
scrollEnd : function() {
alert('End of scroll!');
}
});
Compatibility
- Safari
- Firefox
- Chrome
- IE
- Safari mobile
Credits
Author
Anthony Ly, on twitter @Pik_at
Licence
Licence MIT