gre/index.html

## index.html

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>&gt;&lt;&gt;</title>
    <style>
    #sky {
      position: absolute;
      background-color: #EEE;
      top: 0;
      bottom: 0;
      right: 0;
      left: 0;
      overflow: hidden;
    }

    .fish {
        position: absolute;
        font-family: monospace;
        font-size: 48px;
      white-space: nowrap;
    }

    .fish.swiming {
        -webkit-transition: top, left, font-size, color, margin;
        -webkit-transition-duration: 10s, 10s, 10s, 10s, 0.95s;
        -webkit-transition-timing-function: ease-out, ease-out, ease-out, ease-out, ease-out;
      -webkit-transform: translateZ(0);
        transition: top, left, font-size, color, margin;
        transition-duration: 10s, 10s, 10s, 10s, 0.95s;
        transition-timing-function: ease-out, ease-out, ease-out, ease-out, ease-out;
        top: 50% !important;
        left: 50% !important;
        font-size: 0;
        color: #EEE;
    }
    </style>
	</head>
	<body>
		<div id="sky"></div>
    <script>
      // Inspired from http://www.jsvine.com/txtbirds/txtbirds.js
    (function () {
      var root = this;
      var g = root.document.getElementById("sky");

      var Fish = function (sky) {
        this.flaps = [ '><>', '<><' ];
        this.flap_i = 0;
        this.flap_rate = 230;
        this.veer_rate = 500;
        this.veer_coefficient_vertical = 75;
        this.veer_coefficient_horizontal = 50;
        this.lifespan = 15 * 1000;
        this.timers = [];
        this.sky = sky;
      };

      Fish.prototype = {
        hatch: function () {
          var _this = this;
          this.el = root.document.createElement("span");
          this.el.className = "fish";
          [ "top", "left" ].forEach(function (s) {
            _this.el.style[s] = (50 + (root.Math.random() < 0.5 ? -1 : 1) * root.Math.random() * 80) + "%";
          });
          this.sky.appendChild(this.el);
          return this;
        },
        flap: function () {
          this.el.innerHTML = this.flaps[this.flap_i++ % this.flaps.length];
        },
        veer: function () {
          this.el.style.marginTop = root.Math.random() * this.veer_coefficient_vertical / root.Math.log(this.flap_i + 1) + "px";
          this.el.style.marginLeft = root.Math.random() * this.veer_coefficient_horizontal / root.Math.log(this.flap_i + 1) + "px";
        },
        swim: function () {
          var _this = this;
          root.setTimeout(function () { _this.el.className += " swiming"; }, 10);
          this.timers.push(root.setInterval(function () { _this.flap.call(_this); }, this.flap_rate));
          this.timers.push(root.setInterval(function () { _this.veer.call(_this); }, this.veer_rate));
          root.setTimeout(function () { _this.vanish.call(_this); }, this.lifespan);
          return this;
        },
        vanish: function () {
          this.timers.forEach(function (t) { root.clearInterval(t); });
          this.sky.removeChild(this.el);
          return this;
        }
      };

      var launch = function () {
        return (new Fish(g)).hatch().swim();
      };

      root.setInterval(launch, 730);

    }).call(this);
    </script>
	</body>
</html>

	<!DOCTYPE html>
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>><></title>
	<style>
	#sky {
	position: absolute;
	background-color: #EEE;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	overflow: hidden;
	}

	.fish {
	position: absolute;
	font-family: monospace;
	font-size: 48px;
	white-space: nowrap;
	}

	.fish.swiming {
	-webkit-transition: top, left, font-size, color, margin;
	-webkit-transition-duration: 10s, 10s, 10s, 10s, 0.95s;
	-webkit-transition-timing-function: ease-out, ease-out, ease-out, ease-out, ease-out;
	-webkit-transform: translateZ(0);
	transition: top, left, font-size, color, margin;
	transition-duration: 10s, 10s, 10s, 10s, 0.95s;
	transition-timing-function: ease-out, ease-out, ease-out, ease-out, ease-out;
	top: 50% !important;
	left: 50% !important;
	font-size: 0;
	color: #EEE;
	}
	</style>
	</head>
	<body>
	<div id="sky"></div>
	<script>
	// Inspired from http://www.jsvine.com/txtbirds/txtbirds.js
	(function () {
	var root = this;
	var g = root.document.getElementById("sky");

	var Fish = function (sky) {
	this.flaps = [ '><>', '<><' ];
	this.flap_i = 0;
	this.flap_rate = 230;
	this.veer_rate = 500;
	this.veer_coefficient_vertical = 75;
	this.veer_coefficient_horizontal = 50;
	this.lifespan = 15 * 1000;
	this.timers = [];
	this.sky = sky;
	};

	Fish.prototype = {
	hatch: function () {
	var _this = this;
	this.el = root.document.createElement("span");
	this.el.className = "fish";
	[ "top", "left" ].forEach(function (s) {
	_this.el.style[s] = (50 + (root.Math.random() < 0.5 ? -1 : 1) * root.Math.random() * 80) + "%";
	});
	this.sky.appendChild(this.el);
	return this;
	},
	flap: function () {
	this.el.innerHTML = this.flaps[this.flap_i++ % this.flaps.length];
	},
	veer: function () {
	this.el.style.marginTop = root.Math.random() * this.veer_coefficient_vertical / root.Math.log(this.flap_i + 1) + "px";
	this.el.style.marginLeft = root.Math.random() * this.veer_coefficient_horizontal / root.Math.log(this.flap_i + 1) + "px";
	},
	swim: function () {
	var _this = this;
	root.setTimeout(function () { _this.el.className += " swiming"; }, 10);
	this.timers.push(root.setInterval(function () { _this.flap.call(_this); }, this.flap_rate));
	this.timers.push(root.setInterval(function () { _this.veer.call(_this); }, this.veer_rate));
	root.setTimeout(function () { _this.vanish.call(_this); }, this.lifespan);
	return this;
	},
	vanish: function () {
	this.timers.forEach(function (t) { root.clearInterval(t); });
	this.sky.removeChild(this.el);
	return this;
	}
	};

	var launch = function () {
	return (new Fish(g)).hatch().swim();
	};

	root.setInterval(launch, 730);

	}).call(this);
	</script>
	</body>
	</html>