japboy/index.html

## index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">

    <title>RxJS</title>

    <script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/rxjs/2.5.3/rx.all.min.js"></script>
    <script defer>
      (function (global, doc, nav, _, Rx) {

        var scroll = function () {
          return Rx.Observable.fromEvent(global, 'scroll');
        };

        var resize = function () {
          return Rx.Observable.fromEvent(global, 'resize');
        };

        var ready = function () {
          return Rx.Observable.fromEvent(doc, 'DOMContentLoaded');
        };

        var position = function (id, x, y, w, h) {
          var data = { id: id, x: x, y: y, w: w, h: h, active: false };
          return ready()
          .flatMap(function () {
            return Rx.Observable.merge(scroll(), resize());
          })
          .map(function () {
            var scrollTop = (global.pageYOffset || doc.documentElement.scrollTop) - (doc.documentElement.clientTop || 0);
            var scrollBottom = scrollTop + global.innerHeight;
            var offsetMiddle = data.y + (data.h / 2);
            if (scrollTop < offsetMiddle && scrollBottom > offsetMiddle) data.active = true;
            else data.active = false;
            return data;
          });
        };

        var body = function () {
          var el = doc.body, dEl = doc.documentElement;
          var height = global.Math.max(el.scrollHeight, el.offsetHeight, dEl.clientHeight, dEl.scrollHeight, dEl.offsetHeight);
          _.extend(el.style, {
            backgroundImage: 'linear-gradient(to bottom, #fff, #000)',
            height: height + 'px',
            margin: '0',
            position: 'relative',
            width: 'auto'
          });
        };

        var box = function (id, x, y, w, h) {
          var el = doc.createElement('div');
          el.setAttribute('id', id);
          _.extend(el.style, {
            backgroundImage: 'linear-gradient(to bottom, #000, #fff)',
            borderColor: '#000',
            borderRadius: w > h ? (h / 2) + 'px' : (w / 2) + 'px',
            borderStyle: 'solid',
            borderWidth: '3px',
            boxSizing: 'border-box',
            height: h + 'px',
            left: x + 'px',
            marginTop: '60px',
            opacity: '0.2',
            position: 'absolute',
            top: y + 'px',
            transitionDuration: '0.6s',
            transitionProperty: 'left, margin-top, opacity',
            width: w + 'px'
          });
          return el;
        };

        var main = function () {
          var space = global.Math.floor((global.innerWidth - (global.Math.floor(global.innerWidth / 100) * 100)) / 2);
          var randoms = function (start, stop) { return _.shuffle(_.range(start, stop, 100)); };

          var datas = _.map(randoms(0, 9000), function (y) {
            var x = space + (Math.floor(Math.random() * Math.floor(global.innerWidth / 100)) * 100);
            var w = Math.floor(Math.random() * 100);
            return [_.uniqueId('box'), x, y, w, w];
          });

          var frag = doc.createDocumentFragment();

          var positions = _.map(datas, function (data) { return position.apply(undefined, data); });
          var boxes = _.map(datas, function (data) { return box.apply(undefined, data); });

          _.each(boxes, function (el) { frag.appendChild(el); });

          // TODO: Support resize event
          Rx.Observable.merge.apply(undefined, positions).subscribe(function (data) {
            var el = doc.querySelector('#' + data.id);
            if (data.active) return _.extend(el.style, { left: data.x + 'px', marginTop: '0', opacity: '1' });
            _.extend(el.style, { left: data.x + 'px', marginTop: '60px', opacity: '0.2' });
          });

          ready()
          .subscribe(function () {
            doc.body.appendChild(frag);
            body();
          });
        };

        main();

      })(window, document, navigator, _, Rx);
    </script>

  </head>
  <body></body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">

	<title>RxJS</title>

	<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
	<script src="//cdnjs.cloudflare.com/ajax/libs/rxjs/2.5.3/rx.all.min.js"></script>
	<script defer>
	(function (global, doc, nav, _, Rx) {

	var scroll = function () {
	return Rx.Observable.fromEvent(global, 'scroll');
	};

	var resize = function () {
	return Rx.Observable.fromEvent(global, 'resize');
	};

	var ready = function () {
	return Rx.Observable.fromEvent(doc, 'DOMContentLoaded');
	};

	var position = function (id, x, y, w, h) {
	var data = { id: id, x: x, y: y, w: w, h: h, active: false };
	return ready()
	.flatMap(function () {
	return Rx.Observable.merge(scroll(), resize());
	})
	.map(function () {
	var scrollTop = (global.pageYOffset \|\| doc.documentElement.scrollTop) - (doc.documentElement.clientTop \|\| 0);
	var scrollBottom = scrollTop + global.innerHeight;
	var offsetMiddle = data.y + (data.h / 2);
	if (scrollTop < offsetMiddle && scrollBottom > offsetMiddle) data.active = true;
	else data.active = false;
	return data;
	});
	};

	var body = function () {
	var el = doc.body, dEl = doc.documentElement;
	var height = global.Math.max(el.scrollHeight, el.offsetHeight, dEl.clientHeight, dEl.scrollHeight, dEl.offsetHeight);
	_.extend(el.style, {
	backgroundImage: 'linear-gradient(to bottom, #fff, #000)',
	height: height + 'px',
	margin: '0',
	position: 'relative',
	width: 'auto'
	});
	};

	var box = function (id, x, y, w, h) {
	var el = doc.createElement('div');
	el.setAttribute('id', id);
	_.extend(el.style, {
	backgroundImage: 'linear-gradient(to bottom, #000, #fff)',
	borderColor: '#000',
	borderRadius: w > h ? (h / 2) + 'px' : (w / 2) + 'px',
	borderStyle: 'solid',
	borderWidth: '3px',
	boxSizing: 'border-box',
	height: h + 'px',
	left: x + 'px',
	marginTop: '60px',
	opacity: '0.2',
	position: 'absolute',
	top: y + 'px',
	transitionDuration: '0.6s',
	transitionProperty: 'left, margin-top, opacity',
	width: w + 'px'
	});
	return el;
	};

	var main = function () {
	var space = global.Math.floor((global.innerWidth - (global.Math.floor(global.innerWidth / 100) * 100)) / 2);
	var randoms = function (start, stop) { return _.shuffle(_.range(start, stop, 100)); };

	var datas = _.map(randoms(0, 9000), function (y) {
	var x = space + (Math.floor(Math.random() * Math.floor(global.innerWidth / 100)) * 100);
	var w = Math.floor(Math.random() * 100);
	return [_.uniqueId('box'), x, y, w, w];
	});

	var frag = doc.createDocumentFragment();

	var positions = _.map(datas, function (data) { return position.apply(undefined, data); });
	var boxes = _.map(datas, function (data) { return box.apply(undefined, data); });

	_.each(boxes, function (el) { frag.appendChild(el); });

	// TODO: Support resize event
	Rx.Observable.merge.apply(undefined, positions).subscribe(function (data) {
	var el = doc.querySelector('#' + data.id);
	if (data.active) return _.extend(el.style, { left: data.x + 'px', marginTop: '0', opacity: '1' });
	_.extend(el.style, { left: data.x + 'px', marginTop: '60px', opacity: '0.2' });
	});

	ready()
	.subscribe(function () {
	doc.body.appendChild(frag);
	body();
	});
	};

	main();

	})(window, document, navigator, _, Rx);
	</script>

	</head>
	<body></body>
	</html>