public
Created

A quick'n'dirty way of doing some lettering.js stuff without jQuery.

  • Download Gist
lettering.html
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test</title>
<style>
.slogan span:nth-child(odd) {
color: red;
}
</style>
</head>
<body>
 
<span class="slogan">Testing</span>
 
<script>
function sliceString(selector) {
if (!document.querySelector) return;
var string = document.querySelector(selector).innerText,
total = string.length,
html = '';
for (var i=0; i<total; i++) {
var letter = string.charAt(i);
html+= '<span class="'+letter+'">'+letter+'</span>';
}
document.querySelector(selector).innerHTML = html;
}
sliceString('.slogan');
 
</script>
</body>
</html>

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.