Mouse Move Effect Using JavaScript, Jquery by #BKTutorial

Source Code:

Note: Download jQuery v3.1.1 File

1) Index.html

<link href="style.css" rel="stylesheet" type="text/css"> <!-- CSS File -->

<script src="jQuery v3.1.1.js"></script> <!-- jQuery v3.1.1.js File -->

<script src="main.js"></script> <!-- main.js File-->

<div class="moving-zone">

    <div class="popup">

        <div class="popup-content">

            <div class="popup-text">

                BK Tutorial <b>WE INSPIRE NEW IDEAS !!</b><br/>

                Move your <b>MOUSE</b> Around<hr>

            </div>

        </div>

    </div>

</div>

2) Style.css

body {

    margin: 0;

    background:url("bkt.png");

    overflow: hidden;

font-family:Futura PT;

}

.moving-zone {

    position: absolute;

    top:50%; left:50%;

    width:300px; height:120px;

    margin: -60px 0 0 -150px;

    perspective: 800px;

}

.popup {

    position: absolute;

    width:350px;

    padding: 10px;

    box-sizing: border-box;

    border-radius: 20px 0 20px 0;

    cursor: pointer;

    transform-style: preserve-3d;

    background: linear-gradient(to bottom left, #f00 20%, #fff 80%);

}

/*.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: #2e2e2e;

    padding: 20px;

    box-sizing: border-box;

    border-radius: 10px 0 10px 0;

}

.popup-text {

    color: white;

    font-size: 20px;

    line-height: 30px;

    font-weight: 100;

    text-align: center;

    transform: translateZ(15px);

}

.popup-text b {

    color:yellow;

    font-weight: 300;

}

3) Main.js (JavaScript File)

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)');

});

Output: