This is a short bio with a typing animation.
Last active
May 15, 2016 11:44
-
-
Save vwochnik/97709543b2266dc77a2c28e803ce7950 to your computer and use it in GitHub Desktop.
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
| license: mit |
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> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Typing Bio</title> | |
| <style> | |
| body { | |
| } | |
| .hidden {display:none} | |
| .blinking-cursor{ | |
| opacity: 1; | |
| -webkit-animation: blink 0.7s infinite; | |
| -moz-animation: blink 0.7s infinite; | |
| animation: blink 0.7s infinite; | |
| } | |
| @keyframes blink{ | |
| 0% { opacity:1; } | |
| 50% { opacity:0; } | |
| 100% { opacity:1; } | |
| } | |
| @-webkit-keyframes blink{ | |
| 0% { opacity:1; } | |
| 50% { opacity:0; } | |
| 100% { opacity:1; } | |
| } | |
| @-moz-keyframes blink{ | |
| 0% { opacity:1; } | |
| 50% { opacity:0; } | |
| 100% { opacity:1; } | |
| } | |
| </style> | |
| <noscript><style>.bio.hidden{display:block}</style></noscript> | |
| </head> | |
| <body> | |
| <div class="bio hidden"> | |
| <h1 data-speed="120">Hi! <small data-speed="80" data-delay="1000">I'm Vincent!</small></h1> | |
| <strong>I develop all kinds of things.</strong> | |
| <br>But mostly front-end and web development. | |
| <br>That's what this website is about! | |
| </div> | |
| <div class="bio" id="typed"></div> | |
| <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script> | |
| <script src="//cdnjs.cloudflare.com/ajax/libs/typed.js/1.1.1/typed.min.js"></script> | |
| <script> | |
| (function(window, $) { | |
| var requestAnimationFrame = window.requestAnimationFrame || | |
| window.webkitRequestAnimationFrame || | |
| window.mozRequestAnimationFrame || | |
| window.setTimeout; | |
| function timeout(fn, msec) { | |
| requestAnimationFrame(function() { | |
| setTimeout(fn, msec); | |
| }); | |
| } | |
| function typewrite($dst, $src, options) { | |
| var nde, str, idx = 0, intval; | |
| str = $src.text().replace(/(^\s+\n|\n\s+$)/g, "").replace(/\s+/g, " "); | |
| if (!str.length) { | |
| return options.cb(); | |
| } | |
| nde = document.createTextNode(""); | |
| $dst.append(nde); | |
| options.cursorElement.appendTo($dst); | |
| var delayedType = function() { | |
| timeout(function() { | |
| nde.nodeValue += str.charAt(idx++); | |
| if (idx < str.length) { | |
| delayedType(); | |
| } else { | |
| clearInterval(intval); | |
| timeout(function() { | |
| options.cursorElement.detach(); | |
| options.cb(); | |
| }, options.break); | |
| } | |
| }, options.speed); | |
| }; | |
| timeout(delayedType, options.delay); | |
| } | |
| function elementOptions($elem) { | |
| var options = {}, val; | |
| if (val = $elem.data("speed")) { | |
| options.speed = val; | |
| } | |
| if (val = $elem.data("delay")) { | |
| options.delay = val; | |
| } | |
| if (val = $elem.data("break")) { | |
| options.break = val; | |
| } | |
| console.info(options); | |
| return options; | |
| } | |
| function traverse($dest, ary, options) { | |
| if (!ary.length) { | |
| return options.cb(); | |
| } | |
| if (ary[0].nodeType > 3) { | |
| return traverse($dest, ary.slice(1), options); | |
| } | |
| var oldOptins = options; | |
| options = $.extend({}, options, { | |
| cb: function() { traverse($dest, ary.slice(1), oldOptins); } | |
| }, elementOptions($(ary[0]))); | |
| if (ary[0].nodeType === 3) { | |
| return typewrite($dest, $(ary[0]), options); | |
| } | |
| var $cp = $(ary[0].cloneNode(false)).appendTo($dest); | |
| return traverse($cp, $(ary[0]).contents(), options); | |
| } | |
| $.fn.typewrite = function(options) { | |
| options = $.extend({}, $.fn.typewrite.defaults, options); | |
| var src = options.sourceElement; | |
| if (!src) { | |
| return this; | |
| } | |
| if (src.tagName) { | |
| src = $(src); | |
| } | |
| if ((this.length === 0) || !(src instanceof $)) { | |
| return this; | |
| } | |
| if (!(options.cursorElement instanceof $)) { | |
| options.cursorElement = $(options.cursorElement); | |
| } | |
| traverse(this.first(), src.contents(), options); | |
| return this; | |
| }; | |
| $.fn.typewrite.defaults = { | |
| cursorElement: $([]), | |
| delay: 0, | |
| speed: 50, | |
| break: 120, | |
| cb: function() {} | |
| }; | |
| $(function(){ | |
| $("#typed").typewrite({ | |
| sourceElement: $(".bio.hidden"), | |
| cursorElement: $("<span/>").addClass("blinking-cursor").text("|") | |
| }); | |
| }); | |
| })(window, jQuery); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment