CODEWITHSUNDEEP
javascripthtml
Nicolas
Nicolas

Reputation: 33

move mouse but only on the width of the div

I just adapted this code to play a sequence of images when you move the mouse on the x axis. I have two questions about this code:

Thanks for your help.

Live: https://codepen.io/nicolastilly/pen/jOBKxKK

Code:

var blocWidth;
var imgblock = ['https://assets.codepen.io/265602/frame0.png', 
                'https://assets.codepen.io/265602/frame1.png',
                'https://assets.codepen.io/265602/frame2.png',
                'https://assets.codepen.io/265602/frame3.png',
                'https://assets.codepen.io/265602/frame4.png',
                'https://assets.codepen.io/265602/frame5.png',
                'https://assets.codepen.io/265602/frame6.png',
                'https://assets.codepen.io/265602/frame7.png',
                'https://assets.codepen.io/265602/frame8.png',
                'https://assets.codepen.io/265602/frame9.png',
                'https://assets.codepen.io/265602/frame10.png',
                'https://assets.codepen.io/265602/frame11.png',
                'https://assets.codepen.io/265602/frame12.png',
                'https://assets.codepen.io/265602/frame13.png',
                'https://assets.codepen.io/265602/frame14.png',
                'https://assets.codepen.io/265602/frame15.png',
                'https://assets.codepen.io/265602/frame16.png',
                'https://assets.codepen.io/265602/frame17.png',
                'https://assets.codepen.io/265602/frame18.png',
                'https://assets.codepen.io/265602/frame19.png',
                'https://assets.codepen.io/265602/frame20.png'];

function onMouseMove(e) {
    var x = e.pageX;
    var theimg = imgblock[parseInt(x / blocWidth * imgblock.length)];
    $('.bloc1').css("background-image", "url('" + theimg + "')");
}

function onResize() {
    blocWidth = $('.bloc1').width();
}

function onResize() {
    blocWidth = $(document).width();
}

$(window).on('mousemove', onMouseMove);
$(window).resize(onResize);
onResize();

Upvotes: 1

Views: 138

Answers (1)

Kinglish
Kinglish

Reputation: 23664

As for flickering, you can circumvent that by preloading the images

let loaded = 0 ;
imgblock.forEach(url => {
    let img=new Image();
    img.src=url;
    img.onload = onImgLoaded
})

function onImgLoaded() {
    loaded++;
    if (loaded == imgblock.length-1) console.log('all images have pre-loaded');
}

As for the sizing issue, you need to take into account if you're mousing over the target and accounting for the div's left value in your calculations. Get rid of both these:

function onResize() {
    blocWidth = $('.bloc1').width();
}

function onResize() {
    blocWidth = $(document).width();
}

replace with:

let blocStartX;
function onResize() {
    let pos = $(".bloc1")[0].getBoundingClientRect()
    console.log(pos)
    blocWidth = pos.width;
    blocStartX = pos.x 
}

Detect the mouseover:

let isOnDiv = false
$(".bloc1").mouseenter(function(){isOnDiv=true;});
$(".bloc1").mouseleave(function(){isOnDiv=false;});

and add this to the top of your mousemove function:

if (!isOnDiv) return
var x = e.pageX - blocStartX;

https://codepen.io/john-tyner/pen/wvJXXQZ

Upvotes: 1

Related Questions