CODEWITHSUNDEEP
jqueryhtmlcss
FGDeveloper
FGDeveloper

Reputation: 1050

Animation with mouse x move

I want a animation. I am a back-end developer,but i have to create animation using jquery.

That animate, background and element position change on mouse move.

Similar to http://www.kennedyandoswald.com/#!/premiere-screen

Thank you for help.

Upvotes: 0

Views: 1061

Answers (1)

Federico
Federico

Reputation: 3920

If you want to move the lazy div:

<div id="container">
    <div id="lazy"></div>
</div>

Use this code:

var div = document.getElementById('lazy');
var container = document.getElementById('container');

var me = function(event) {
    var x = event.clientX, //mouse position
        w = div.offsetWidth, //width of the lazy div
        m = 30, //multiplier
        square = div.getBoundingClientRect(),
        pxToBox = (x - (w/2 - square.left)), //how far is the mouse from the box?
        left =  m * pxToBox/this.offsetWidth;
    div.style.left = left + 'px'; //sets the left attribute
};

container.addEventListener('mousemove', me, false);

Parent of the lazy div must be relative to position it absolutely:

#container {
    position:relative;   
    width:600px;
    height:400px;
}

#lazy {
    background-color:green;
    position:absolute;
    top:0;
    left:40;
    width:100px; height:100px;
}

Here is the fiddle http://jsfiddle.net/b42a3fhk/

Upvotes: 1

Related Questions