-
-
Save madrobby/1119059 to your computer and use it in GitHub Desktop.
lettering.js
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| function( | |
| a, // a DOM element | |
| b // optional regexp (use /\S+/g for whole words) | |
| ) { | |
| a.innerHTML = // replace the html contents | |
| a.textContent.replace( // with the text contents | |
| b || /\S/g, // default regexp: single characters | |
| function(c){ // wrapped in | |
| return '<span class=char' + // spans with classnames (note: no need for attribute quoting) | |
| (a=-~a) + // char1 .. charN. "a" is reused, and initialized. | |
| // ~document.body => -1 | |
| // -~document.body => 1 | |
| // -~1 => 2 | |
| // -~2 => 3 etc. | |
| '>' + | |
| c + // char or word | |
| '</span>' | |
| } | |
| ) | |
| } | |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| function(a,b){a.innerHTML=a.textContent.replace(b||/\S/g,function(c){return'<span class=char'+(a=-~a)+'>'+c+'</span>'})} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE | |
| Version 2, December 2004 | |
| Copyright (C) 2011 Thomas Fuchs <http://mir.aculo.us/> | |
| Everyone is permitted to copy and distribute verbatim or modified | |
| copies of this license document, and changing it is allowed as long | |
| as the name is changed. | |
| DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE | |
| TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION | |
| 0. You just DO WHAT THE FUCK YOU WANT TO. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "name": "lettering", | |
| "description": "A clone of lettering.js.", | |
| "keywords": [ | |
| "lettering", | |
| "typography", | |
| "css", | |
| "injector" | |
| ] | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <title>Foo</title> | |
| <h1 id="h1">LETTERING.JS</h1> | |
| <style> | |
| /* shamelessly borrowed from lettering.js */ | |
| h1{font-weight: normal;text-transform:uppercase;font-family:'League Gothic','Impact',sans-serif;font-size:160px;margin-bottom:-32px;margin-left:10px;color:#c44032;text-shadow:#863027 -4px 4px 0;margin-top:30px;} | |
| h1 span{display:inline-block;position:relative;letter-spacing:-1px;-webkit-transition:all 0.2s ease-out;} | |
| h1 span:hover{top:3px} | |
| h1 .char2, h1 .char11{color:#e36b23;text-shadow:#9b4d1f -4px 4px 0} | |
| h1 .char3, h1 .char10{z-index:10;color:#e6c92e;text-shadow:#9c8b26 -4px 4px 0} | |
| h1 .char4, h1 .char9{color:#5da028;text-shadow:#427021 -4px 4px 0} | |
| h1 .char5, h1 .char8{color:#4584be;text-shadow:#2f597f -4px 4px 0} | |
| h1 .char6, h1 .char7{color:#7073cf;text-shadow:#4a4d88 -4px 4px 0} | |
| h1 .char1{-webkit-transform:rotate(-3deg)} | |
| h1 .char3{top:-1px;-webkit-transform:rotate(2deg)} | |
| h1 .char4{top:-7px} | |
| h1 .char6{top:-7px;-webkit-transform:rotate(2deg)} | |
| h1 .char7{} | |
| h1 .char8{top:1px;-webkit-transform:rotate(-2deg)} | |
| h1 .char9{-webkit-transform:rotate(2deg)} | |
| h1 .char10{top:-65px;width:36px;} | |
| h1 .char10:hover{-webkit-transition-duration:0.4s;} | |
| h1 .char11{top:2px;left:-30px;width:50px;-webkit-transform:rotate(-3deg)} | |
| h1 .char12{left:-24px} | |
| </style> | |
| <script> | |
| var lettering = function(a,b){a.innerHTML=a.textContent.replace(b||/\S/g,function(c){return'<span class=char'+(a=-~a)+'>'+c+'</span>'})} | |
| lettering(document.getElementById('h1')) | |
| </script> |
Updated and we're now down to 120 bytes.
Heads up: @jdalton pointed out this won’t work in IE < 9 because of textContent. You may want to fall back to .innerText or .firstChild.nodeValue (assuming that’s always a text node) if oldIE support is an issue.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Few suggestions:
(1)
dplaceholder argument in outer function is unnecessary.(1), (3)
cmay be dropped andareused. 3rd arg of.replaceis unused, so we can assigna=0here.a.innerHTMLanda.textContentare already «on stack» by the moment of assignment, so value ofais unneeded.(2) Braces are unneeded in
'foo'+(++i)+'bar', one space is enough for lexer:'foo'+ ++i+'bar'