funnyText.js
Create funny and crazy moving texts in a simple way.
Usage
As you can see in the example.html
file, you will need to include the JavaScript file jquery.funnyText.js
and the css file jquery.funnyText.css
of the plugin, as well as jQuery.
Including files:
<link rel="stylesheet" type="text/css" href="jquery.funnyText.css" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script type="text/javascript" src="jquery.funnyText.js"></script>
Required HTML structure
The funny text effect will be applied to the text under your custom selector which will be used as well in the initialization.
<div class="mySelector">funnText is applied here</div>
Initialization
All you need to do is call the plugin inside a $(document).ready
function using the selector in which the text is contained.
$(document).ready(function() { $('.mySelector').funnyText(); });
A more complex initialization with all the options set could look like this:
$(document).ready(function() { $('.mySelector').funnyText({ speed: 700, borderColor: 'black', activeColor: 'white', color: 'black', fontSize: '7em', direction: 'both' }); });
Options
-
speed
: (default700
) Defines the speed in which the letters change in milliseconds. -
borderColor
: (defaultblack
) Defines the color of the border when the text is active. This option won't take effect when if the browser doesn't support CSS3. -
activeColor
: (defaultwhite
) Defines the color of the text when it is active. -
color
: (defaultblack
) Defines the color of the text on start. -
fontSize
: (default7em
) Defines the size of the font. -
direction
: (defaultboth
) Defines the direction of the letters movement. It can beboth
,horizontal
orvertical
.