Lazybars Themeable scrollbar jQuery plugin
JavaScript – Lazybars – Themeable scrollbar jQuery plugin | CodeCanyon
Lazybars Themeable scrollbar jQuery plugin his title this type of JavaScript/Miscellaneous This time I will review,made by ser-html, JavaScript/Miscellaneous is sold at a price of $7 in themeforest.
custom // jquery plugin // responsive // scroll // scrollbar // themeable //
| Created | 10 December 13 |
| Last Update | 10 December 13 |
| Compatible Browsers | IE8, IE9, IE10, IE11, Firefox, Safari, Opera, Chrome |
| Software Version | jQuery |
| Files Included | JavaScript JS, CSS |
Lazybars is an easy to use, themeable scrollbar, jQuery plugin.
You can implement these scrollbars just by adding a class name to to any scrollable element on your website.
Make use of the themes that are bundled with Lazybars, or create your own with some simple CSS.
One regular license allows you usage on one website.
Latest Lazybars version 1.2 (9th December 2013)
Documentation | Changelog | Support | Comments
Support
If you need support, please use the support forum. I will get back to you as soon as possible. Any direct messages may be delayed response.
Quick start guide
Because this is a jQuery plugin, you will need to be using jQuery on your website.
- Upload the
lazybarsfolder to the public folder on your server. Link Lazybars CSS to your site, in the
<head>tag.
<!-- Lazybars Default stylesheet --> <link rel="stylesheet" type="text/css" href="lazybars/css/lazybars.min.css">Add Lazybars Javascript below the jQuery library.
<!-- jQuery --> <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<!-- Lazybars Javascript --> <script src="lazybars/js/lazybars.min.js"></script>Add the class name
lazybars-xorlazybars-yto any scrollable element in your HTML
<p class="lazybars-y"> ... </p>
Example HTML
<!DOCTYPE html> <html> <head> <title>Lazybars example page</title> <!-- Lazybars Default stylesheet --> <link rel="stylesheet" type="text/css" href="css/lazybars.min.css"> </head> <body> <p class="lazybars-y"> ... </p> <!-- jQuery --> <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script> <!-- Lazybars Javascript --> <script src="js/lazybars.min.js"></script> </body> </html>
Options
There are multiple options so you can customise Lazybars. You can make use of these options using data attributes.
<p class="lazybars-y" data-position="left" data-fade="true" data-offset="-5"> ... </p>
For a full list of options and advanced implementation please take a look at the Documentation
0 comments:
Post a Comment