Basically CSS is used to style the web page. Just imagine if you are given to style each letter of the page then what will be the case. But no problem at all here is the a nice jQuery plugin which given you control to style each letters.
Yes you have read it correctly to control over each letters of the webpage. Lettering js is the plugin which do this trick.
Note: You can control the letters in three different ways. Like character, words and lines.
From where to get Lettering JS?
You can download lettering Js from their site.
How to use Lettering JS?
You need to include the jQuery js prior to use this plugin. [code]I am about to start the MooTools version of this plugin.[/code] After including the jQuery you have to include the lettering.js, see below:
[cc lang=”javascript”]
[/cc]
Style by character:
For example we have a below H1 tag in out web page and you want to style each character with lettering js.
Original Markup:
[cc lang=”html4strict”]
Expert Developer
[/cc]
JS Code:
[cc lang=”javascript”]
$(document).ready(function() {
$(“.letter_h1”).lettering();
});
[/cc]
Resulted HTML:
[cc lang=”html4strict”]
E
x
p
e
r
t
D
e
v
e
l
o
p
e
r
[/cc]
Style by Words:
Original Markup:
[cc lang=”html4strict”]
Expert Developer
[/cc]
JS Code:
[cc lang=”javascript”]
$(document).ready(function() {
$(“.word_h1”).lettering(‘words’);
});
[/cc]
Resulted HTML:
[cc lang=”html4strict”]
Expert
Developer
[/cc]
Style by Lines:
This plugin will consider [code]<br />[/code] as a line break indicator.
Original Markup:
[cc lang=”html4strict”]
This is
good Site.
[/cc]
JS Code:
[cc lang=”javascript”]
$(document).ready(function() {
$(“.line_h1”).lettering(‘lines’);
});
[/cc]
Resulted HTML:
[cc lang=”html4strict”]
This is
good Site.
[/cc]
