CODEWITHSUNDEEP
csscss-transitionscss-transforms
Brooklyn Nicholson
Brooklyn Nicholson

Reputation: 646

Make background follow the cursor

I'm trying to make the background-position follow the cursor within the relative dimensions of the 'figure'. JSFiddle here: http://jsfiddle.net/LJCkj/

It's off by a few pixels and I'm not sure how to take the scale into account.

The figure has an initial 180% background size and then on hover a 115% background size.

jQuery(function($) {
    toScale = 1.15; // The 115% on hover

    $('figure').on('mousemove', function(e) {
        el = $(this);

        w = el.width() * toScale;
        h = el.height() * toScale;

        x = e.pageX - el.offset().left - w / 2;
        y = e.pageY - el.offset().top - h / 2;

        if ((x >= toScale && x <= w) && (y >= toScale && y <= h))
            el.css({
                backgroundPosition: x+'px '+y+'px'
            });
    });
});

is what I've figured so far. But it's off by a good amount. Any ideas?

Upvotes: 0

Views: 1181

Answers (1)

GolezTrol
GolezTrol

Reputation: 116110

I think you are doing the multiplication by toScale at the wrong time. Also, you are checking if x and y are greater than toScale, which is 1.15, so you can never move the picture back into the corner again. Thirdly, because you are checking if both x and y are valid, it is very hard to move it back to the corner, because as soon as any of the values if out of bounds, you stop moving.

Your adjusted javascript could look like this: 

function Between(a, min, max)
{
    // return a, but bound by min and max.
    return a<min?min:a>max?max:a;
}

jQuery(function($) {
    toScale = 1.15; // The 115% on hover

    $('figure').on('mousemove', function(e) {
        el = $(this);

        w = el.width();
        h = el.height();

        x = (e.pageX - el.offset().left - w / 2) * toScale;
        y = (e.pageY - el.offset().top - h / 2) * toScale;

        x = Between(x, 0, w);
        y = Between(y, 0, h);

        el.css({
            backgroundPosition: x+'px '+y+'px'
        });

        $('span').text(x + ',' + y);
    });
});

Your fiddle. Note I've added a span to view the coordinates. It might help you as well in the further development of your code. http://jsfiddle.net/LJCkj/2

Upvotes: 2

Related Questions