CODEWITHSUNDEEP
javascriptcssanimation
LeeAlexander
LeeAlexander

Reputation: 49

Moving background image with mouse –CSS and JS – Multiple horizontal stacked DIVs

Hello need some help stacking multiple div tags inside single container div horizontally. Each with their own scrollable BKG image. The code attached with some simple CSS works great for 1st div. Prob is I can’t get other divs on the right to move correctly. The BKG image moves off screen and all over. CSS is using inline-block. The Divs stack nicely, move well with browser size changes.

$(".download_content_02").mousemove(function( event ) {

var containerWidth = $(this).innerWidth(),
    containerHeight = $(this).innerHeight(),
    mousePositionX = (event.pageX / containerWidth) * 100,
    mousePositionY = (event.pageY /containerHeight) * 100;

$(this).css('background-position', mousePositionX + '%' + ' ' + mousePositionY + '%');

});

Upvotes: 0

Views: 767

Answers (1)

Haizhou Liu
Haizhou Liu

Reputation: 491

that is because the mouse event attributes pageX and pageY are calculated from the edge of whole page. You need reduce the offset of the div.download_content_02

$(".download_content_02").mousemove(function(event) {
  var containerWidth = $(this).innerWidth(),
    containerHeight = $(this).innerHeight(),
    containerOffsetLeft = $(this).offset().left, // container left offset
    containerOffsetTop = $(this).offset().top, // container top offset
    mousePositionX = ((event.pageX - containerOffsetLeft) / containerWidth) * 100,
    mousePositionY = ((event.pageY - containerOffsetTop) / containerHeight) * 100;

  $(this).css('background-position', mousePositionX + '%' + ' ' + mousePositionY + '%');

})

Here is jsfiddle link.

Hope this is what you need.

Update

Add mouseleave event listener to reset background image position.

Upvotes: 3

Related Questions