JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://reactive-extensions.github.com/rxjs-html/rx.min.js"></script>
<script src="http://reactive-extensions.github.com/rxjs-html/rx.jquery.js"></script>
<script src="http://reactive-extensions.github.com/rxjs-html/rx.time.min.js"></script>
<div id="container"></div>
CSS
body {
font-family: Consolas, monospace; overflow: hidden;
}
JavaScript
var text = 'time flies like an arrow',
container = $('#container'),
doc = $(document),
mouseMove = doc.bindAsObservable('mousemove'),
mouseMoveOffset = mouseMove.select(function(value) {
var offset = container.offset();
return {
offsetX: value.clientX - offset.left + doc.scrollLeft(),
offsetY: value.clientY - offset.top + doc.scrollTop()
};
});
for (var i = 0, len = text.length; i < len; i++) {
(function(i) {
var s = $('<span/>', {
text: text[i],
css: {
position: 'absolute'
}
}).appendTo(container);
mouseMoveOffset.delay(i * 100).subscribe(function(mouseEvent) {
s.css({
top: mouseEvent.offsetY + 'px',
left: mouseEvent.offsetX + i * 10 + 15 + 'px'
});
});
})(i);
}