JqueryJquery plugins   PortFolioSenamion's PortFolio HomeHome page corner A jquery blog

Senamion.com


Senamion:

Categorie:

Archivi:

jOla plugin: documentation and demo page

Demo 1 - Text in a box with fixed height

Click here to see jOla() in action (You can click repeatedly)
jQuery jOla, Ola effect on text! - Div with style

This is the javascript code to launch jOla:

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

Demo 2 - jOla without style or parameters

Click here to see jOla() in action (You can click repeatedly)
jQuery jOla, Ola effect on text!

This is the javascript code to launch jOla:

	$('#second')
		.jOla({size: false, speed: 50, expansion: 11, rStart: 0, gStart: 0, bStart: 0, rStep: 0, gStep: 16, bStep: 16, bottomstart: 4,bottomadd:-2});
				

Demo 3 - jOla with speed and number of characters

Click here to see jOla() in action (You can click repeatedly)
jQuery jOla - With parameters: speed: 35, expansion: 6, multiplier: 1.1 and 3 different start position.

This is the javascript code to launch jOla with parameters:

	$().ready(function() {
		$('#third')
			.jOla({speed: 35, expansion: 6, multiplier: 1.1, position: 0})
			.jOla({speed: 35, expansion: 6, multiplier: 1.1, position: 20})
			.jOla({speed: 35, expansion: 6, multiplier: 1.1, position: 40});
	});
				

Demo 4 - jOla with negative multiplier

Click here to see jOla() in action (You can click repeatedly)
jQuery jOla, Ola effect on text! - With negative multiplier

This is the javascript code to launch jOla with negative multiplier:

	$().ready(function() {
		$('#fourth').jOla({expansion: 12, multiplier: 0.9});
	});
				

Double demo - 2 jOla

Click here to see jOla() in action (You can click repeatedly)
jQuery jOla, Ola effect on text! - Only bottom parameters
jQuery jOla, Ola effect on text! - Only bottom parameters
Click here for another version of effects

This is the javascript code to launch first double demo:

	$().ready(function() {
		$('#double1').jOla({expansion: 6, multiplier: 1, bottomstart: 1, bottomadd: 2});
		$('#double2').jOla({expansion: 6, multiplier: 1, bottomstart: -1, bottomadd: -2});
	});
				

This is the javascript code to launch second double demo:

	$().ready(function() {
		$('#double1').jOla({expansion: 6, multiplier: 1, bottomstart: -1, bottomadd: -2});
		$('#double2').jOla({expansion: 6, multiplier: 1, bottomstart: 1, bottomadd: 2});
	});
				

Demo 5 - jOla all

Show a full demo

Documentation

To use this jquery plugin:

  • download jquery.jOla.js and images files
  • download last version of jquery.js
  • include the js in the head section of the page:
    <head>
    ...
    <script type="text/javascript" src="js/jquery.js" ></script>
    <script type="text/javascript" src="js/jquery.jOla.js" ></script>
    ...
    </head>
    
  • in the read function launch the jOla (Ola effect on text) relative at your element:
    <script type="text/javascript">
    	$().ready(function() {
    		$("#elementId").jOla();
    	});
    </script>
    

Parameters:

  • speed - default 40 (ms)
  • expansion - number of characters - default 5 chars
  • multiplier - size multipier - default 1.2
  • position - start position - default 0
  • rStart - red color start value - default 0
  • gStart - green color start value - default 0
  • bStart - blue color start value - default 255
  • rStep - red step value - default 8
  • gStep - green step value - default 0
  • bStep - blue step value - default -32
  • colro - use colors effect - default true
  • size - use size effect - default true
  • bottomstart - start moving position - default 0
  • bottomadd - start add moving position - default 0
For comments see the blog page.

Download

You can download the entire archive:

  • jquery.jOla.zip - a zip archive containing the plugin source, a minified version of jQuery and a demo page.
Or single file:

Release

  • 0.3 - Mar 20 2010 - Added moving position effects
  • 0.2 - Mar 17 2010 - Add colors effects
  • 0.1 - Mar 15 2010 - New parameters
  • 0.0 - Mar 12 2010 - First release of jOla (Ola effect on text)

License

Dual licensed under the MIT and GPL licenses.