I have a pretty simple page.

<div id="index">
    <img />
</div>

the styling is pretty simple too.

#index {position:relative;}
#index img {position:absolute; bottom:10%; right:10%; width:100%;}

I use % so the image can be resized proportionally if the browser window resizes. Never mind that.

The problem is, I'm trying to emulate the effect on this flash site : / So the image is in the bottom right of the screen. When I move my mouse to top left, the image will slightly move a bit more to the right bottom. When I move my mouse to center, the image will revert back to its original position. So it's kinda like I'm giving a shadow/lighting effect where the mouse is the lighting and the image is the object, except I only need the moving animation.

my code is like this

$(document).ready(function($){
    $('#index').mousemove(
        function(e){
            $(this).children('img').each(
                function(){
                    var totalWidth = $(window).width();
                    var totalHeight = $(window).height();
                    var centerX = $(window).width() / 2;
                    var centerY = $(window).height() / 2;

                    var mouseX = e.pageX;
                    var mouseY = e.pageY;

                    var current_top = $(this).offset().top;
                    var current_left = $(this).offset().left;

                    var myX =  (centerX-mouseX)/centerX;
                    var myY =  (centerY-mouseY)/centerY;
                    var cssObj = {
                        'left': current_left + myX + 'px'
                        'top': current_top + myY + 'px'
                    }
                    $(this).css(cssObj);
                }
            );

        }
    );
});

so if I move the mouse in relation to the center of the screen. So basically it's like this:

centerX = 700 (i use resolution 1400);
currentLeft = ~200 (the offset left of my image)

So if my mouse position is at 700-1400, then the myX will be 700(centerX) - 900(mouse position) = -200 / 700 = ~ -0.3. Add it into the css calculation, the left will be current_left(200) + myX(-0.3) px = 197.7px.

then i realizes if i move my mouse from the center to the right (700-1400 range), the image will slightly move to the left, but when I move my mouse from the right to the center, the image still moves to the left! It should move to the right to its original position, but it doesn't because the web doesn't know whether the mouse moves from right to center or from center to right.

Any help?

I have a pretty simple page.

<div id="index">
    <img />
</div>

the styling is pretty simple too.

#index {position:relative;}
#index img {position:absolute; bottom:10%; right:10%; width:100%;}

I use % so the image can be resized proportionally if the browser window resizes. Never mind that.

The problem is, I'm trying to emulate the effect on this flash site : http://www.tatogomez./ So the image is in the bottom right of the screen. When I move my mouse to top left, the image will slightly move a bit more to the right bottom. When I move my mouse to center, the image will revert back to its original position. So it's kinda like I'm giving a shadow/lighting effect where the mouse is the lighting and the image is the object, except I only need the moving animation.

my code is like this

$(document).ready(function($){
    $('#index').mousemove(
        function(e){
            $(this).children('img').each(
                function(){
                    var totalWidth = $(window).width();
                    var totalHeight = $(window).height();
                    var centerX = $(window).width() / 2;
                    var centerY = $(window).height() / 2;

                    var mouseX = e.pageX;
                    var mouseY = e.pageY;

                    var current_top = $(this).offset().top;
                    var current_left = $(this).offset().left;

                    var myX =  (centerX-mouseX)/centerX;
                    var myY =  (centerY-mouseY)/centerY;
                    var cssObj = {
                        'left': current_left + myX + 'px'
                        'top': current_top + myY + 'px'
                    }
                    $(this).css(cssObj);
                }
            );

        }
    );
});

so if I move the mouse in relation to the center of the screen. So basically it's like this:

centerX = 700 (i use resolution 1400);
currentLeft = ~200 (the offset left of my image)

So if my mouse position is at 700-1400, then the myX will be 700(centerX) - 900(mouse position) = -200 / 700 = ~ -0.3. Add it into the css calculation, the left will be current_left(200) + myX(-0.3) px = 197.7px.

then i realizes if i move my mouse from the center to the right (700-1400 range), the image will slightly move to the left, but when I move my mouse from the right to the center, the image still moves to the left! It should move to the right to its original position, but it doesn't because the web doesn't know whether the mouse moves from right to center or from center to right.

Any help?

• javascript
• jquery

1 Answer 1

I toyed with it quickly, it's lacking the looping through images with .each but might help you with the mouse movement calculations. Rather than being hardcoded, the movement divider should probably be based on the z-index, since lower z-index items move more.

In this demo, initial placement is incorrect until you mouse over.

Demo here: http://jquerydoodles./stack_question.html

Hope that helps!

CSS:

    #index { position: relative; border: 2px solid #ccc; height: 400px; }
    #index img { position: absolute; background-color: #fff; border: 1px solid #666; padding: 6px; }
    #image1 { z-index: 3; }
    #image2 { z-index: 2; width: 150px; left: 200px; }
    #image3 { z-index: 1; width: 100px; left: 300px; }
    #image4 { z-index: 2; width: 150px; left: -200px; }
    #image5 { z-index: 1; width: 100px; left: -300px; }

HTML

<div id="index"> <img src="http://farm6.static.flickr./5138/5421580531_424e84d4cf_m.jpg" id="image1" alt="" /> <img src="http://farm6.static.flickr./5138/5421580531_424e84d4cf_m.jpg" id="image2" alt="" /> <img src="http://farm6.static.flickr./5138/5421580531_424e84d4cf_m.jpg" id="image3" alt="" /> <img src="http://farm6.static.flickr./5138/5421580531_424e84d4cf_m.jpg" id="image4" alt="" /> <img src="http://farm6.static.flickr./5138/5421580531_424e84d4cf_m.jpg" id="image5" alt="" /> </div>

JQUERY:

$(document).ready(function($){
            $("#index").mousemove(function(e){
                var mouseX = e.pageX - $('#index').offset().left;
                var mouseY = e.pageY - $('#index').offset().top;
                var totalX = $('#index').width();
                var totalY = $('#index').height();
                var centerX = totalX / 2;
                var centerY = totalY / 2;
                var shiftX = centerX - mouseX;
                var shiftY = centerY - mouseY;

                var startX = ($('#index').width() / 2) - ($('#image1').width() / 2);
                var startY = ($('#index').height() / 2) - ($('#image1').height() / 2);

                $('#image1').css('z-index') ;
                $('#image1').css({ 'left': startX + (shiftX/10) + 'px', 'top': startY + (shiftY/10) + 'px' });
                $('#image2').css({ 'left': startX + 220 + (shiftX/8) + 'px', 'top': startY + 50 + (shiftY/8) + 'px' });
                $('#image3').css({ 'left': startX + 370 + (shiftX/6) + 'px', 'top': startY + 60 + (shiftY/6) + 'px' });
                $('#image4').css({ 'left': startX - 100 + (shiftX/8) + 'px', 'top': startY + 50 + (shiftY/8) + 'px' });
                $('#image5').css({ 'left': startX - 150 + (shiftX/6) + 'px', 'top': startY + 60 + (shiftY/6) + 'px' });
            });
        });