logo DevAnswer - Developers Answer

Popup with 3D Movement

11th February

Preview


Source Code
                            <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from www.devanswer.com -->


<style>
html, body {
    height: 100%;
}

body {
    margin: 0;
    background: radial-gradient(#666, #222);
    overflow: hidden;
}

.moving-zone {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 300px;
    height: 120px;
    margin: -60px 0 0 -150px;
    perspective: 800px;
}

.popup {
    position: absolute;
    width: 300px;
    padding: 10px;
    box-sizing: border-box;
    border-radius: 20px 0 20px 0;
    cursor: pointer;
    transform-style: preserve-3d;
    background: -webkit-linear-gradient(top left, white 50%, coral 50%);
    background: -moz-linear-gradient(top left, white 50%, coral 50%);
    background: -ms-linear-gradient(top left, white 50%, coral 50%);
    background: -o-linear-gradient(top left, white 50%, coral 50%);
    background: linear-gradient(top left, white 50%, coral 50%);
}

    .popup:before {
        content: '';
        position: absolute;
        left: 5%;
        top: 5%;
        width: 90%;
        height: 90%;
        border-radius: inherit;
        background: rgba(0,0,0,.1);
        box-shadow: 0 0 40px 20px rgba(0,0,0,.1);
        transform: translateZ(-100px);
    }

.popup-content {
    background: #444;
    padding: 20px;
    box-sizing: border-box;
    border-radius: 10px 0 10px 0;
}

.popup-text {
    color: white;
    font-family: 'Roboto', sans-serif;
    font-size: 20px;
    line-height: 30px;
    font-weight: 100;
    text-align: center;
    transform: translateZ(15px);
}

    .popup-text b {
        color: coral;
        font-weight: 300;
    }
</style>

</head>
<body>
<head>
<link href='https://fonts.googleapis.com/css?family=Roboto:400,500,700,300,100,900' rel='stylesheet' type='text/css'>
</head>
<div class="moving-zone">
    <div class="popup">
        <div class="popup-content">
            <div class="popup-text">
                I'm a new kind of <b>popup</b>.<br/>
                Move your <b>mouse</b> around !
            </div>
        </div>
    </div>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Developers Answer</a></div>
<script>
 var moveForce = 30; // max popup movement in pixels
var rotateForce = 20; // max popup rotation in deg

$(document).mousemove(function (e) {
    var docX = $(document).width();
    var docY = $(document).height();

    var moveX = (e.pageX - docX / 2) / (docX / 2) * -moveForce;
    var moveY = (e.pageY - docY / 2) / (docY / 2) * -moveForce;

    var rotateY = (e.pageX / docX * rotateForce * 2) - rotateForce;
    var rotateX = -((e.pageY / docY * rotateForce * 2) - rotateForce);

    $('.popup')
        .css('left', moveX + 'px')
        .css('top', moveY + 'px')
        .css('transform', 'rotateX(' + rotateX + 'deg) rotateY(' + rotateY + 'deg)');
});
</script>

</body>
</html>                        



Other Codes