Hi. I am an awesome IT guy. This is my website where you can find my stuff.

+3630 / 38 69 142
info (at) genart.hu

myDots

This is a simple plugin which makes a lot of animated dots in an element. You can create pretty amazing effects if you change the easing.

How to use



  myDots uses the jQuery framework. Load jQuery, jQuery easing and the myDots javascript files in the proper order.
<script type="text/javascript" src="jquery-1.8.2.js"></script>
<script type="text/javascript" src="mydots.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script>
Then include the myDots CSS file
<link href="style.css" rel="stylesheet" type="text/css"/> 
In the head section insert this jQuery code. The $('body') is the element, where you want to create the dots. You can change it if you want (eg. $('some div')).
<script type="text/javascript">
     $(document).ready(function(){
     $('body').makedots();
     });
</script>
There are some properties which help you to modify the plugin
numberOfdots: 60,  // the number of dots
dotcolor: '#FFF',  // the color of the dots 
dotsize: 6,	  // size of the dots in pixel
radius: 3,  	  // the border-radius for the dots. If you want a 
		     circle, then it has to be the half of the dotsize
izing: 'easeInCubic',  // animation easing. Try to modify it, you can
			 create some really cool effects
trigger: 'normal', // click or normal. Click means the trigger of the
		    animation is a mouse click. If normal, its fluently. 
dotspeed: 2000,		// the speed of the dots in ms
You can add the properties like this:
<script type="text/javascript">
     $(document).ready(function(){
     $('body').makedots({
	numberOfdots: 60,
	dotcolor: '#FFF',
	dotsize: 6,
	radius: 3,
	izing: 'easeInCubic',
	trigger: 'normal', //click,normal
	dotspeed: 2000,
	});
     });
</script>