D3 Examples - Document // source https://jsbin.com/zugoqo

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
​
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" type="" href="app.css">
    <title>Document</title>
<style id="jsbin-css">
body {
    overflow: hidden;
    background-color: darkgray;
    width: 100%;
    height: 100vh;
    -moz-transform: perspective(1000px);
    -moz-transform-style: preserve-3d;
    -webkit-perspective: 1000px;
    display: flex;
    align-items: center;
    justify-content: center;
}
​
#container {
    outline: 1px solid transparent;
    width: 800px;
    height: 600px;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
    background: url('https://apps.wpsites05.ft.com/wp-content/uploads/sites/6/2014/07/ipad_homepage_p_ipadmini_white_angle1-1030x533.png') no-repeat;
    background-size: contain;
}
​
.figure {
    outline: 1px solid transparent;
    width: 142px;
    height: 483px;
    /*background: url('https://zadesigns.com/tron/tron.png') no-repeat;*/
    position: absolute;
    transform: translateZ(120px);
    -moz-transform: translateZ(120px);
    -webkit-transform: translateZ(120px);
    bottom: 0px;
    left: 50%;
    margin-left: -71px;
}
​
.gsap {
    outline: 1px solid transparent;
    width: 396px;
    height: 128px;
    /*background: url('https://zadesigns.com/tron/GSAP.png') no-repeat;*/
    position: absolute;
    transform: translateZ(60px);
    -moz-transform: translateZ(60px);
    -webkit-transform: translateZ(60px);
    top: 30px;
    left: 50%;
    margin-left: -198px;
}
​
.tagline {
    width: 500px;
    outline: 1px solid transparent;
    position: absolute;
    transform: translateZ(80px);
    -moz-transform: translateZ(80px);
    -webkit-transform: translateZ(80px);
    bottom: 0px;
    left: 50%;
    margin-left: -280px;
    padding-left: 30px;
    padding-right: 30px;
    background: rgba(0, 0, 0, 0.6);
    font-family: Arial, Helvetica, "Helvetica-Neue", san-serif;
    color: #FFF;
    font-size: 30px;
    line-height: 60px;
    text-align: center;
    color: #F9E48B;
    text-transform: uppercase;
}
</style>
</head>
​
<body>
​
    <div id="container">
        <div class="gsap"></div>
        <div class="figure"></div>
        <div class="tagline">
            GSAP 3D Parallax Demo
        </div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/tweenlite.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/plugins/cssplugin.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/plugins/scrolltoplugin.min.js"></script>
    <script src="app.js"></script>
<script id="jsbin-javascript">
$(document).ready(function() {
​
    var request = null;
    var mouse = {
        x: 0,
        y: 0
    };
    var cx = $('#container').width() / 2;
    var cy = $('#container').height() / 2;
​
    $('#container').mousemove(function(event) {
        mouse.x = event.pageX - this.offsetLeft;
        mouse.y = event.pageY - this.offsetTop;
​
        //console.log(mouse, event.pageX, this.offsetLeft);
        console.log(mouse, event.pageY, this.offsetTop);
​
        cancelAnimationFrame(request);
        request = requestAnimationFrame(update);
    });
​
    function update() {
​
        // dx = mouse.x - cx;
        // dy = mouse.y - cy;
​
        dx = cx - mouse.x;
        dy = cy - mouse.y;
​
        tiltx = (dy / cy);
        tilty = -(dx / cx);
        radius = Math.sqrt(Math.pow(tiltx, 2) + Math.pow(tilty, 2));
        degree = (radius * 10);
        TweenLite.to("#container", 1, {
            transform: 'translate3d(' + dx / 10 + 'px,' + dy / 10 + 'px, 0px)',
            //transform: 'rotate3d(' + tiltx / 2 + ', ' + tilty / 2 + ', 0, ' + degree + 'deg)',
            ease: Power2.easeOut
        });
​
        //console.log('translateX(-' + dx / 4 + 'px) translateY(-' + dy / 2 + 'px)', );
    }
​
    $(window).resize(function() {
        cx = window.innerWidth / 2;
        cy = window.innerHeight / 2;
    });
});
</script>
​
​
<script id="jsbin-source-css" type="text/css">body {
    overflow: hidden;
    background-color: darkgray;
    width: 100%;
    height: 100vh;
    -moz-transform: perspective(1000px);
    -moz-transform-style: preserve-3d;
    -webkit-perspective: 1000px;
    display: flex;
    align-items: center;
    justify-content: center;
}
​
#container {
    outline: 1px solid transparent;
    width: 800px;
    height: 600px;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
    background: url('https://apps.wpsites05.ft.com/wp-content/uploads/sites/6/2014/07/ipad_homepage_p_ipadmini_white_angle1-1030x533.png') no-repeat;
    background-size: contain;
}
​
.figure {
    outline: 1px solid transparent;
    width: 142px;
    height: 483px;
    /*background: url('https://zadesigns.com/tron/tron.png') no-repeat;*/
    position: absolute;
    transform: translateZ(120px);
    -moz-transform: translateZ(120px);
    -webkit-transform: translateZ(120px);
    bottom: 0px;
    left: 50%;
    margin-left: -71px;
}
​
.gsap {
    outline: 1px solid transparent;
    width: 396px;
    height: 128px;
    /*background: url('https://zadesigns.com/tron/GSAP.png') no-repeat;*/
    position: absolute;
    transform: translateZ(60px);
    -moz-transform: translateZ(60px);
    -webkit-transform: translateZ(60px);
    top: 30px;
    left: 50%;
    margin-left: -198px;
}
​
.tagline {
    width: 500px;
    outline: 1px solid transparent;
    position: absolute;
    transform: translateZ(80px);
    -moz-transform: translateZ(80px);
    -webkit-transform: translateZ(80px);
    bottom: 0px;
    left: 50%;
    margin-left: -280px;
    padding-left: 30px;
    padding-right: 30px;
    background: rgba(0, 0, 0, 0.6);
    font-family: Arial, Helvetica, "Helvetica-Neue", san-serif;
    color: #FFF;
    font-size: 30px;
    line-height: 60px;
    text-align: center;
    color: #F9E48B;
    text-transform: uppercase;
}</script>
​
<script id="jsbin-source-javascript" type="text/javascript">$(document).ready(function() {
​
    var request = null;
    var mouse = {
        x: 0,
        y: 0
    };
    var cx = $('#container').width() / 2;
    var cy = $('#container').height() / 2;
​
    $('#container').mousemove(function(event) {
        mouse.x = event.pageX - this.offsetLeft;
        mouse.y = event.pageY - this.offsetTop;
​
        //console.log(mouse, event.pageX, this.offsetLeft);
        console.log(mouse, event.pageY, this.offsetTop);
​
        cancelAnimationFrame(request);
        request = requestAnimationFrame(update);
    });
​
    function update() {
​
        // dx = mouse.x - cx;
        // dy = mouse.y - cy;
​
        dx = cx - mouse.x;
        dy = cy - mouse.y;
​
        tiltx = (dy / cy);
        tilty = -(dx / cx);
        radius = Math.sqrt(Math.pow(tiltx, 2) + Math.pow(tilty, 2));
        degree = (radius * 10);
        TweenLite.to("#container", 1, {
            transform: 'translate3d(' + dx / 10 + 'px,' + dy / 10 + 'px, 0px)',
            //transform: 'rotate3d(' + tiltx / 2 + ', ' + tilty / 2 + ', 0, ' + degree + 'deg)',
            ease: Power2.easeOut
        });
​
        //console.log('translateX(-' + dx / 4 + 'px) translateY(-' + dy / 2 + 'px)', );
    }
​
    $(window).resize(function() {
        cx = window.innerWidth / 2;
        cy = window.innerHeight / 2;
    });
});</script></body>
​
</html>
    