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 demoDocumentation
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
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.
- jOla.js - js code.
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.