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:

• Animated Borders In Pure CSS – animated-border.css
• Neon Style Rotating Borders with Pure CSS/CSS3

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.