vwochnik/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    This is a short bio with a typing animation.

  
## index.html
<!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>
	<!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>