基于光标位置的移动元素

Question

I am working on an animation that slides a container based on the position of the mouse.

Basically looks like this:

|--------------| <-- viewport
||-------------|--------| <- Image(
||             |        | 
||-------------|--------|
|--------------|

I'm listening to the window for a mousemove event and then translating the image -viewport.pageX. Everything works and the image moves correctly, however, I seem to have a 'dead zone' on the image where the the mousemove event does nothing. It seems like the dead zone is exactly the amount of the image that doesn't show. I'm assuming there is some math to do with dividing that space in half and subtracting it from the amount I'm moving the image or something, but I can't quite figure it out.

Here is the code that captures the mouse position:

$(window).on('mousemove', function(e) {
    globals.curPosX = (e.pageX).clamp(0, $('.home-wrapper .bg').width() - window.innerWidth);
    globals.curPosY = (e.pageY).clamp(0, $('.home-wrapper .bg').height() - window.innerHeight);
});

And the code that actually moves the image:

draw: {
    start: function() {
        window.anim = requestAnimationFrame(draw.start);

        var content = document.getElementById('content');

        globals.tempPosX += (globals.curPosX - Mitek.home.globals.tempPosX) * 0.075;
        Mitek.home.globals.tempPosY += (globals.curPosY - globals.tempPosY) * 0.015;

        if ( has3d ) {
            content.style.WebkitTransform = 'translate3d(' + -globals.tempPosX + 'px, 0px, 0)';
            content.style.MozTransform = 'translate3d(' + -.globals.tempPosX + 'px, 0px, 0)';
            content.style.transform = 'translate3d(' + -.globals.tempPosX + 'px, 0px, 0)';
        } else {
            content.style.left = -globals.curPosX + 'px';
        }
    },
    stop: function() {
        cancelAnimationFrame(anim)
    }
}

Like I said, this all works well and looks good, I just can't figure out how to account for the extra space on the side. Any suggestions?

Answer 1

Without a fiddle it's a bit difficult to improve your existing code, but I think there are more ways than one to achieve this effect.

I worked on a project where we used CSS and jQuery to build a draggable viewport that revealed a portion of an image behind it. We used a non-jQueryUI drags() function found here on CSS-Tricks , but you could easily replace that with jQueryUI's draggable() . You could also use mousemove to animate the movement of the slider instead of dragging, even lock its location to the cursor's location so the cursor is always hovering over the visible portion. You could also adapt this to work for vertical sliding, using blinders on the top and bottom and a bigger wrapper.

Here's a fiddle demonstrating a slider that drags overtop an image, and reveals a section of it. It's a little hacky because you have to make sure the size of the blinders are large enough to obscure the image when the viewport is dragged to the left/right extremes, and the offset of the slider itself depends on the width of the blinders. This means it's good for a one-off solution or batch of images that are similarly sized, but as a dynamic solution for many image-size scenarios, this may not be what you need.

I think this achieves the effect you're looking for with the above description though, LMK if this helps, and good luck.