Animated Block Borders In JavaScript - jQeury Nicebord.js
File Size: | 6.25 KB |
---|---|
Views Total: | 785 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
Nicebord.js is small jQuery plugin to create animated borders for any block level element using plain JavaScript and CSS.
Fully configurable and works with most modern browsers and even IE 10/9/8.
See also:
How to use it:
1. Include reference to jQuery library and the Niceboder plugin's files.
<!-- jQuery --> <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script> <!-- nicebord plugin files --> <script src="./js/nicebord.js"></script> <link href="./css/nicebord.css" rel="stylesheet" />
2. To create default animated borders, just attach the function nicebord to the target block element.
<div class="example"> Content Here </div>
$(function(){ $('#example').nicebord(); });
3. Customize the border size & color.
$('#example').nicebord({ color: '#999', size: 3 });
4. Set the orientation of the animation: clockwise(ckw) or anticlockwise(ackw).
$('#example').nicebord({ orientation: 'ckw' });
5. Enabled/disbale top/right/bottom/left borders.
$('#example').nicebord({ pos: 'top,right,bottom,left' });
6. Set the animation speed in milliseconds.
$('#example').nicebord({ speed : 500 });
7. Set the position of the animated borders. True = inside the element.
$('#example').nicebord({ direction: false });
8. Set the fix
option to true if the target element has a fix height.
$('img').nicebord({ fix: true });
9. Set whether this animation starts from the center of the block element.
$('img').nicebord({ center: false });
10. All default options
$('img').nicebord({ color: '#999', orientation: 'ckw', size: 3, pos: 'top,right,bottom,left', speed : 200, direction: false, fix: false, center: false });
This awesome jQuery plugin is developed by dkdevru. For more Advanced Usages, please check the demo page or visit the official website.