Created
April 18, 2012 05:40
-
-
Save s-hiroshi/2411317 to your computer and use it in GitHub Desktop.
JavaScript > lib > It displays one character at a time.
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
| <html> | |
| <body> | |
| <p id="foo"></p> | |
| </body> | |
| </html> |
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
| /** | |
| * typo.js | |
| * | |
| * It displays one character at a time. | |
| * | |
| * Copyright 2012 Sawai Hiroshi | |
| * http://www.info-town.jp | |
| * | |
| */ | |
| /** | |
| * typographic object | |
| */ | |
| var typo = {}; | |
| // implement typo object | |
| (function() { | |
| /** | |
| * transform string to array | |
| * | |
| * @private | |
| * @param {String} text | |
| * @return {Array} arr | |
| */ | |
| function _strToArr(str) { | |
| var arr = []; | |
| for (i = 0; i < str.length; i++) { | |
| arr.push(str.charAt(i)); | |
| } | |
| return arr; | |
| } | |
| /** | |
| * insert text to dom | |
| * | |
| * callback of setTimeout | |
| * | |
| * @private | |
| * @param {jQuery} elem | |
| * @param {String} text | |
| * @param {Number} timer_id Timer ID | |
| */ | |
| function _insert(text, elem) { | |
| // argument elem, text is free variable | |
| return function _callback() { | |
| console.log(elem); | |
| elem.innerHTML = text; // insert text | |
| clearTimeout(_callback.timer); | |
| }; | |
| } | |
| /** | |
| * rendering text used timer | |
| * | |
| * @private | |
| * @param {Array} arr | |
| * @param {jQuery} elem | |
| */ | |
| function _rendering(text, elem) { | |
| var arr = _strToArr(text), | |
| timer = [], | |
| text, | |
| s, | |
| i; | |
| for (i = 0; i < arr.length; i++) { | |
| text = arr.slice(0, i + 1).join(''); | |
| s = _insert(text, elem); | |
| s.timer = setTimeout(s, i * 500); | |
| } | |
| } | |
| typo.rendering = _rendering; | |
| }()); | |
| // var elem = document.getElementById('foo'); | |
| // typo.rendering('Hellow World', elem); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment