A vanilla JS fork of Lettering.js. Follow along in the tutorial video at https://gomakethings.com/converting-a-jquery-plugin-to-vanilla-js-lettering.js/.
Pass in a selector for the elements you want to run Vanilla Lettering.js on.
<h1 class="letters">Hello there, friend!</h1>
var lettering = new Lettering('.letters');Next, run the lettering method you want on the instance.
// Each letter
lettering.letters();
// Each word
lettering.words();
// Each line
lettering.lines();| <!doctype html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> | |
| <title>Lettering.js Examples</title> | |
| <meta name="description" content="A jQuery Plugin that allows you to style each individual letter and more."> | |
| <meta name="author" content="Dave Rupert"> | |
| <style type="text/css" media="screen"> | |
| body { | |
| margin: 0 auto; | |
| max-width: 80em; | |
| width: 88%; | |
| } | |
| .demo { | |
| color: red; | |
| margin-bottom: 1.5em; | |
| text-transform: uppercase; | |
| } | |
| .demo p { | |
| font-weight: 700; | |
| font-size: medium; | |
| } | |
| .char2, | |
| .char8, | |
| .word2, | |
| .line2 { | |
| color: orange; | |
| } | |
| .char3, | |
| .char9, | |
| .word3, | |
| .line3 { | |
| color: yellow; | |
| } | |
| .char4, | |
| .char10, | |
| .line4 { | |
| color: blue; | |
| } | |
| .char5, | |
| .char11 { | |
| color: green; | |
| } | |
| .char6, | |
| .char12 { | |
| color: indigo; | |
| } | |
| .char7, | |
| .char13 { | |
| color: violet; | |
| } | |
| [class*="line"] { | |
| display: block; | |
| width: 100%; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="container"> | |
| <div> | |
| <p><strong>Characters</strong></p> | |
| <div id="demo1" class="demo"> | |
| <h1>Hello, World!</h1> | |
| </div> | |
| </div> | |
| <div> | |
| <p><strong>Words</strong></p> | |
| <div id="demo2" class="demo"> | |
| <h1>Hello there, friend!</h1> | |
| </div> | |
| </div> | |
| <div> | |
| <p><strong>Lines</strong></p> | |
| <div id="demo3" class="demo"> | |
| <p>This is an amazing<br> Revolution in Typography. <br/> The possibilities are endless: <br/>Coloring, Vertical spacing, and Kerning.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <script src="my-lettering.js"></script> | |
| <script> | |
| new Lettering('#demo1 h1').letters(); | |
| new Lettering('#demo2 h1').words(); | |
| new Lettering('#demo3 p').lines(); | |
| </script> | |
| </body> | |
| </html> |
| /*! | |
| * Vanilla JS Lettering.js | |
| * A vanilla JS fork of http://letteringjs.com/ by Dave Rupert | |
| * (c) 2019 Chris Ferdinandi, MIT License, https://gomakethings.com | |
| */ | |
| var Lettering = (function () { | |
| "use strict"; | |
| /** | |
| * Create the Constructor object | |
| */ | |
| var Constructor = function (selector) { | |
| // | |
| // Error Checks | |
| // | |
| // Make sure a selector is provided | |
| if (!selector) { | |
| throw new Error("Please provide a valid selector"); | |
| } | |
| // | |
| // Variables | |
| // | |
| // Get all of the elements for this instantiation | |
| var elems = Array.prototype.slice.call(document.querySelectorAll(selector)); | |
| // Hashed string to replace line breaks with | |
| // Public APIs object | |
| var publicAPIs = {}; | |
| // | |
| // Methods | |
| // | |
| /** | |
| * @return {[type]} [description] | |
| */ | |
| /** | |
| * Wrap each letter, word, or line in a span and add attributes | |
| * @param {Array} elems The elements to wrap content in | |
| * @param {String} splitStr The string to use as the delimiter | |
| * @param {String} className The class prefix to use for wrapped content | |
| * @param {String} after String to add after each item | |
| * @param {Boolean} breaks If true, replace line breaks | |
| * @return {Array} The elements that were wrapped | |
| */ | |
| var wrap = function (splitStr, className, after = "") { | |
| elems.forEach(function (elem) { | |
| var original = elem.textContent; | |
| console.log(elem.textContent.split(splitStr)); | |
| var text = elem.innerHTML | |
| .split(splitStr) | |
| .map(function (item, index) { | |
| return ( | |
| '<span class="' + | |
| className + | |
| (index + 1) + | |
| '" aria-hidden="true">' + | |
| item + | |
| "</span>" | |
| ); | |
| }) | |
| .join(after); | |
| elem.setAttribute("aria-label", original); | |
| elem.innerHTML = text; | |
| }); | |
| return elems; | |
| }; | |
| /** | |
| * Wrap each letter in a span and class | |
| * @return {Array} The elements that were wrapped | |
| */ | |
| publicAPIs.letters = function () { | |
| return wrap("", "char"); | |
| }; | |
| /** | |
| * Wrap each word in a span and class | |
| * @return {Array} The elements that were wrapped | |
| */ | |
| publicAPIs.words = function () { | |
| return wrap(" ", "word", " "); | |
| }; | |
| /** | |
| * Wrap each line in a span and class | |
| * @return {Array} The elements that were wrapped | |
| */ | |
| publicAPIs.lines = function () { | |
| return wrap(/<br ?\/?>/, "line", "<br>"); | |
| }; | |
| // | |
| // Return the Public APIs | |
| // | |
| return publicAPIs; | |
| }; | |
| // | |
| // Return the Constructor | |
| // | |
| return Constructor; | |
| })(); |