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