JSFiddle - React, Tailwind, and code Playground

by adamschwartz

HTML

<script src="https://raw.github.com/blueimp/JavaScript-MD5/master/md5.js"></script>
<i></i>
<div></div>

CSS

</style>

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">

<style>
* {
    -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}

body {
    background: #eee;
}

i {
    position: absolute;
    left: 45%;
    top: 45%;
    display: block;
    background: #000 url(http://gravatar.com/avatar/0cf940de36795741cdf8df64a222e356?size=256);
    width: 128px;
    height: 128px;
    background-size: 128px 128px;
    -webkit-background-size: 128px 128px;
    -moz-background-size: 128px 128px;
    border-radius: 256px;

    -webkit-transform: rotateZ(0);
    -webkit-transition: box-shadow .1s ease-out;
}

i.bounced {
    box-shadow: 0 0 20px blue;            
}

i.static {
    box-shadow: inset 0 1px 4px rgba(0, 0, 0, .5), inset 0 0 10px rgba(0, 0, 0, .5), 0 0 0 1px rgba(0, 0, 0, .1), 0 -1px 2px 1px rgba(0, 0, 0, .25), 0 2px 2px 1px rgba(255, 255, 255, .75), 0 -2px 10px 2px rgba(255, 255, 255, .75), 0 2px 10px 2px rgba(0, 0, 0, .25);
}

JavaScript

var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;

function changePicToHash(){
    if (document.location.hash){
        $('i').css('background-image', 'url("http://gravatar.com/avatar/' + md5(document.location.hash.substr(1)) + '")');
    }
}

$(changePicToHash);
$(window).bind('hashchange', changePicToHash);
   

var x = 0,
    y = 0,
    r = 0,
    vx = 0,
    vy = 10,
    vr = 0,
    ax = 0,
    ay = 0;

var sphere = document.getElementsByTagName('i')[0]
    , $sphere = $(sphere)
    , sphereHeight = $sphere.height()
    , sphereWidth = $sphere.width();

function bounce(){
    if (window._timeout)
        clearTimeout(window._timeout);
    
    $sphere.addClass('bounced');
    window._timeout = setTimeout(function(){
        $sphere.removeClass('bounced');
    }, 100);        
}

if (true || window.DeviceMotionEvent !== undefined) {
    window.ondevicemotion = function (e) {
        ax = event.accelerationIncludingGravity.x * 5;
        ay = event.accelerationIncludingGravity.y * 5;
    };

    var last = +Date();
    step = function (time) {
        ms = time - last;

        ts = ms/25;
        if (isNaN(ts)) ts = 1;
        last = time;

        var landscapeOrientation = window.innerWidth / window.innerHeight > 1;
        if (landscapeOrientation) {
            vx = vx + ay;
            vy = vy + ax;
        } else {
            vy = vy - ay;
            vx = vx + ax;
        }
        vx = vx * 0.98;
        vy = vy * 0.98;
        r = parseInt(r + (vr*ts) / 50, 10);
        y = parseInt(y + (vy*ts) / 50, 10);
        x = parseInt(x + (vx*ts) / 50, 10);

        boundingBoxCheck();
        $sphere.css('-webkit-transform', 'rotate(' + r + 'deg)');
        console.log(y,vy,ay,ts);
        sphere.style.top = y + 'px';
        sphere.style.left = x + 'px';
        
        requestAnimationFrame(step);
    };
                
   ...