This next example simplifies, but pays reference to some excellent work done on http://daverupert.com/2010/09/lettering-js/. I have taken this idea but used it to create the same class across all the letters in my title. You'll be able to see why when you copy the code into a file of your own. Essentially , in this case, I have put boxes around each letter to give you an idea as to what you can do.
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Splitting Letters</title>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
google.load("jqueryui", "1");
</script>
<script>
$.fn.spanTheChars = function()
{
var returnString = '';
$(this.text().split('')).each(function()
{
returnString += '<span class="chars">'+this+'</span>';
});
$(this).empty().append(returnString);
}
jQuery(function( $ )
{
$('h1').spanTheChars();
});
</script>
<style type="text/css">
body
{
font-family:Sans-serif;
font-size:62.5%;
}
h1
{
text-align:center;
font-size:2em;
text-transform:uppercase;
color:#FFFFFF;
}
.chars
{
display:block;
float:left;
width:2.8em;
min-height:2em;
background:#5CCCCC;
margin:0.2em;
padding-top:1em;
}
</style>
</head>
<body>
<h1>Split Title</h1>
</body>
</html>
No comments:
Post a Comment