JSFiddle - React, Tailwind, and code Playground

by shirfy

HTML

<div id="wrapper">
    <div id="div1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nec nulla mollis, porta lacus a, pulvinar justo. Etiam gravida ante quis erat fermentum ultrices. Donec lacinia ipsum vel tortor consectetur, ut venenatis felis tempor. Curabitur porttitor dictum cursus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse sodales dapibus arcu vel interdum. Etiam non tristique velit, id ullamcorper mauris.</div>
    <div id="div2">
        <img style='height:150px; width: 180px' src='http://mvvm.azurewebsites.net/Content/images/jsfiddle-logo.png' />
    </div>
</div>
<p id='text'></p>

CSS

#div1 {
    position:fixed;
    top:50%;
    left:25%;
    margin-top:-170px;
    height:170px;
    width:360px;
    ;
    background-color:red;
}
#div2 {
    position:fixed;
    top:50%;
    left:37.5%;
    width:180px;
    height:150px;
    background-color:black;
    color:white;
    transform: rotate3d(0,0,0,0deg);
}

JavaScript

$(document).ready(function () {
    var $one = $('#div1'),
        $two = $('#div2'),
        mousemoveEventTimeout = 50, // mousemove event every N miliseconds
        transitionSteps = 5, // number of steps between the old and new mouse positions
        transitionStepDuration = Math.floor(mousemoveEventTimeout / transitionSteps),
        browserPrefix = "",
        cx = Math.ceil(window.innerWidth / 2.0),
        cy = Math.ceil(window.innerHeight / 2.0),
        oldMousePositionX = cx,
        oldMousePositionY = cy,
        usrAg = navigator.userAgent;
    if(usrAg.indexOf("Chrome") > -1 || usrAg.indexOf("Safari") > -1) {
        browserPrefix = "-webkit-";
    } else if (usrAg.indexOf("Opera") > -1) {
        browserPrefix = "-o";
    } else if (usrAg.indexOf("Firefox") > -1) {
        browserPrefix = "-moz-";
    } else if (usrAg.indexOf("MSIE") > -1) {
        browserPrefix = "-ms-";
    }
    
    function calculateChanges(dx, dy) {
        var tiltx = (dy / cy),
            tilty = - (dx / cx),
            radius = Math.sqrt(Math.pow(tiltx, 2) + Math.pow(tilty, 2)),
            degree = (radius * 15),
            shadx = degree*tiltx,   /*horizontal shadow*/
            shady = degree*tilty,   /*vertical shadow*/
            changes = Object.create(null);
        changes.degree = degree;
        changes.tiltx = tiltx;
        changes.tilty = tilty;
        changes.shadx = shadx;
        changes.shady = shady;
        return changes;
    }
    
    var wait = false;
    $(document).mousemove(function (event) {
        var newMousePositionX = event.pageX,
            newMousePositionY = event.pageY;

        if(!wait){
            var distanceX = Math.round((oldMousePositionX - newMousePositionX) / transitionSteps),
                distanceY = Math.round((oldMousePositionY - newMousePositionY) / transitionSteps),

                dx = oldMousePositionX - cx - distanceX,
                dy = oldMousePositionY - cy - distanceY,
                i = 1;

      ...