JSFiddle - React, Tailwind, and code Playground

by austegard

HTML

<script src="http://reactive-extensions.github.com/rxjs-html/rx.min.js"></script>
<script src="http://reactive-extensions.github.com/rxjs-html/rx.time.min.js"></script>
<script src="http://reactive-extensions.github.com/rxjs-html/rx.jquery.js"></script>

CSS

body {
                font-family: Consolas;
                padding: 0px;
            }
div {width: 100px; height: 15px; padding: 5px; }
            .mouse {
                position: absolute;
                background-color: black;
                color: white;
    width: 200px;
    height: 30px;
    padding: 40px;
    border-radius: 100px 80px 5px 10px;
            }
.tail, .ishappy {
    transition: top 0.25s;
    -moz-transition: top 0.25s;
    -webkit-transition: top 0.25s;
    -o-transition: top 0.25s;


}

            .tail {
                position: absolute;
                background-color: black;
                color: red;
    border-radius: 0 5px;
            }    
            .ishappy {
                position: absolute;
                background-color: blue;
                color: white;
    border-radius: 5px 20px 8px 0;
            }

JavaScript

var themouse = $('<div />', {
    text: 'the mouse'
}).addClass('mouse').appendTo('body'),
    thetail = $('<div />', {
        text: 'its tail'
    }).addClass('tail').appendTo('body'),
    ishappy = $('<div />', {
        text: 'is happy'
    }).addClass('ishappy').appendTo('body')

    ,
    mousemove = $(document).mousemoveAsObservable();

// Simply move the mouse
mousemove.subscribe(function(ev) {
    themouse.css({
        top: ev.clientY,
        left: ev.clientX
    });
});

// Add delay to the tail via transiion
mousemove.subscribe(function(ev) {
    var width = themouse.outerWidth();
    thetail.css({
        top: ev.clientY + 85,
        left: ev.clientX + width
    });
});

// Add further delay to the wag
mousemove.delay(450).subscribe(function(ev) {
    var tailwidth = thetail.outerWidth(),
        mousewidth = themouse.outerWidth();
    ishappy.css({
        top: thetail.offset().top,
        left: ev.clientX + tailwidth + mousewidth
    });
});

// Add wag up/down at 300 ms
Rx.Observable.interval(300).subscribe(function() {
    var top = thetail.offset().top;
    ishappy.css('top', top + Math.round(20 * Math.random() - 10));
});