Skip to content

Instantly share code, notes, and snippets.

@caraya

caraya/lettering.html

Forked from adactio/lettering.html
Created November 1, 2018 01:53
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save caraya/8952fbc191cfbc14e6bd82572ddb68fa to your computer and use it in GitHub Desktop.
Save caraya/8952fbc191cfbc14e6bd82572ddb68fa to your computer and use it in GitHub Desktop.
Download ZIP
A quick'n'dirty way of doing some lettering.js stuff without jQuery.
Raw
lettering.html
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment