Nicebord.js

jQuery plugin for animate border

License

The plugin is under MIT License

Quickstart

Include jQuery and Nicebord css and js in your project:

  
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="path/to/nicebord.css">
<script type="text/javascript" src="path/to/nicebord.js"></script>

Options

Attribute	Type	Default	Description
`color`	String	'000000'	Set border color
`orientation`	String	'ckw'	Set direction animation: clockwise(ckw), anticlockwise(ackw)
`size`	Number	1	Set border size
`pos`	String	'top,right,bottom,left'	Animate top or right or bottom or left border
`speed`	Number	500	Animation time
`direction`	Boolean	false	Direction of animation, if false the animation occurs along the sides of the element, if true the inside of the element
`fix`	Boolean	false	Sets the fixed size of the element to which nicebord is applied. Usually images.
`center`	Boolean	false	Begins animation from the center of the block.

Examples

Default

  
  <a href="#" id="first">Nicebord</a>

  
  $(document).ready(function(){
	 $('#first').nicebord();
  });

Nicebord Nicebord Nicebord Nicebord Nicebord

Horizontal menu

  
  <a href="#" class="nice">Link 1</a>
  <a href="#" class="nice">Link 2</a>
  <a href="#" class="nice">Link 3</a>
  <a href="#" class="nice">Link 4</a>

  
  $(document).ready(function(){
	 
	 $('.nice').nicebord({
		color: '#567482',
		orientation: 'ackw',
		size:3,
		pos:'bottom',
		speed:300
		});
		
  });

Link 1 Link 2 Link 3 Link 4

Vertical menu

  
  <ul>
   <li> <a href="#" class="nicev">Link 1</a></li>
   <li> <a href="#" class="nicev">Link 2</a></li>
   <li> <a href="#" class="nicev">Link 3</a></li>
   <li> <a href="#" class="nicev">Link 4</a></li>
  </ul>

  
  $(document).ready(function(){
	 
	 $('.nicev').nicebord({
		color: '#567482',
		orientation: 'ackw',
		size:3,
		pos:'left',
		speed:300
		});
		
  });

Inner direction menu

  
  <a href="#" class="niced">Link 1</a>
  <a href="#" class="niced">Link 2</a>
  <a href="#" class="niced">Link 3</a>
  <a href="#" class="niced">Link 4</a>

  
  $(document).ready(function(){
	 
	 $('.niced').nicebord({
			color: '#567482',
			orientation: 'ckw',
			size:5,
			pos:'top,bottom',
			speed:200,
			direction:true
			});
		
  });

Link 1 Link 2 Link 3 Link 4

Center option

If, you want the animation to start in the center of the block, use the Center option

  
  <a href="#" class="nice_cen">Link 1</a>
  <a href="#" class="nice_cen">Link 2</a>
  <a href="#" class="nice_cen">Link 3</a>
  <a href="#" class="nice_cen">Link 4</a>

  
  $(document).ready(function(){
	 
	 $('.nice_cen').nicebord({
			color: '#567482',
			orientation: 'ckw',
			size:5,
			speed:200,
			center:true
			});
		
  });

Link 1 Link 2 Link 3 Link 4

Use of images

If you apply nicebord to images, use the fix parameter to equal the truth

  
 <a href='#' class='aimg'> <img src='./images/100.png'/> </a>
 <a href='#' class='aimg'> <img src='./images/100.png'/> </a>
  <a href='#' class='bimg'> <img src='./images/100.png'/> </a>
   <a href='#' class='bimg'> <img src='./images/100.png'/> </a>
     <a href='#' class='cimg'> <img src='./images/100.png'/> </a>
   <a href='#' class='cimg'> <img src='./images/100.png'/> </a>

  
  
    $(document).ready(function(){
	 
	$('.aimg').nicebord({
		color: '#000',
		orientation: 'ckw',
		size:5,
		speed:200,
		direction:true,
		fix:true
		});
		
			$('.bimg').nicebord({
			color: '#000',
			orientation: 'ckw',
			size:5,
			speed:200,
			direction:false,
			fix:true
			});
			
			$('.cimg').nicebord({
		color: '#000',
		orientation: 'ckw',
		size:5,
		speed:200,
		direction:false,
		fix:true,
		center:true
		});
		
  });