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
   
Animated Block Borders In JavaScript - jQeury Nicebord.js

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.