How to create a Mouse Interaction using Java script ?

Mouse action

Mouse Interact

This demo will describe about Mouse Interaction. Mouse Interaction is nothing but Animate a Container on Mouse Over Using Perspective and Transform. (or)
if you wanted to move the background-image on an element as you mouse over it. The container will animate or move

To achieve this we are using CSS and java script. The JavaScript language was initially created for web browsers. While as CSS language for describing the presentation of a document written in a markup language like HTML.

HTML

<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>

In this demo we created class like .moving-zone, .popup, .popup-content, .popup-text.

CSS

.moving-zone {<br>
    position: absolute;<br>
    top:50%; left:50%;<br>
    width:300px; height:120px;<br>
    margin: -60px 0 0 -150px;<br>
    perspective: 800px;<br>
}<br>
.popup {<br>
    position: absolute;<br>
    width:300px;<br>
    padding:2px;<br>
    box-sizing: border-box;<br>
    cursor: pointer;<br>
    transform-style: preserve-3d;<br>
    background: -webkit-linear-gradient(top left, white 50%, #bccbff 50%);<br>
    background:    -moz-linear-gradient(top left, white 50%, #bccbff 50%);<br>
    background:     -ms-linear-gradient(top left, white 50%, #bccbff 50%);<br>
    background:      -o-linear-gradient(top left, white 50%, #bccbff 50%);<br>
    background:         linear-gradient(top left, white 50%, #bccbff 50%);<br>
}<br>
.popup:before {<br>
    content: '';<br>
    position: absolute;<br>
    left:5%; top:5%;<br>
    width:90%; height:90%;<br>
    border-radius: inherit;<br>
    background: rgba(0,0,0,.2);<br>
    box-shadow: 0 0 40px 20px rgba(0,0,0,.2);<br>
    transform: translateZ(-100px);<br>
}<br>
.popup-content {<br>
    background: #586697;<br>
    padding: 20px;<br>
    box-sizing: border-box;<br>
}<br>
.popup-text {<br>
    color: white;<br>
    font-family: 'Roboto', sans-serif;<br>
    font-size: 20px;<br>
    line-height: 30px;<br>
    font-weight: 100;<br>
    text-align: center;<br>
    transform: translateZ(15px);<br>
}<br>
.popup-text b {<br>
    color:#bccbff;<br>
    font-weight: 300;<br>
}

In .moving-zone class we defined properties like top, width, margin, perspective, height. The position is absolute for both class moving-zone and popup. Those classes are used to create a box which is in the middle of the demo.

Handler Functions

These functions handle the events as they happen. We want to decide what happens when the cursor enters, moves over, and leaves the container, so each of those has a handler.

Event

This is a JavaScript object that describes the event that occurred.

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

If you do not interact with the iframe, you will see only a box on the screen. As soon as you start moving your mouse or your finger, you can see the animation.
finally,
In this demo we uses an box / container to animate, but this can be used for other things besides container including forms, modals, images.

Leave a Reply

Your email address will not be published. Required fields are marked *