响应头宽度两个重叠的图像

Question

I am creating a responsive header with two overlapping images. A div can be larger or smaller, based on the current mouse position. The problem is to create this header responsive. The center of both images should be in the center of the webpage. This is hard to achieve as the div's that contain the images are not in the center of the document. You can see my current progress here . Whenever the browser is around 1200 pixels it looks fine (the image width is 1280 px). However, when i resize the browser to a smaller size the effect is not how it is meant to be.

HTML

<div class="header">
<div class="headerleft"><img src="images/rick.png" width="1280" height="200" id="rick" alt="rick" align="middle"></div>
<div class="headerright"><img src="images/peter.png" width="1280" height="200" id="peter" alt="peter" align="right"></div>
</div>

CSS

    .header{
        height: 200px;
        width: 100%;
        background-size: 50%;
        background-position: center;
        background-repeat: no-repeat;
    }

    .headerleft{
        background-color: red;
        width: 100%;
        height: 100%;
        float: left;
        margin: 0;
        padding: 0;
        overflow:hidden;
        background-image: url('images/rick.png');
        background-position: left;
    }

    .headerright{
        background-color: blue;
        width: 50%;
        height: 100%;
        float: right;
        margin: 0;
        padding: 0;
        overflow:hidden;
        /*background-image: url('images/peter.png');*/
        background-position: right;
    }

Javascript

$(document).on('mousemove', function(e){
    page = $( document ).width();
    pagecrop = page/2;  
    $('.headerright').css({
       width:  e.pageX/2+pagecrop/2,
    });
    });

    $(document).on('mousemove', function(e){
    page = $( document ).width();
    pagecrop = page/2;
    $('.headerleft').css({
       width:  pagecrop-e.pageX/2+pagecrop/2,
    });
    });

Answer 1

Got it working with the CSS transform translate property, and change that value with jquery. Thank you docodemore!

$(document).ready(function() { 
    var $winwidth = $(window).width();
    var width2 = 1280-$winwidth
    var width3 = width2/2
        $('#peter').css('transform', 'translate(' + width3  + 'px)');
        $('#rick').css('transform', 'translate(-' + width3  + 'px)');
    $(window).bind("resize", function(){ 
        var $winwidth = $(window).width();
        var width2 = 1280-$winwidth
        var width3 = width2/2
            $('#peter').css('transform', 'translate(' + width3 + 'px)');
            $('#rick').css('transform', 'translate(-' + width3  + 'px)');
    });
});

Answer 2

Have you tried removing the fixed pixel size of the images in the HTML and replacing with CSS or changing the 1280px value to 100% as such:

<div class="header">
<div class="headerleft"><img src="images/rick.png" width="100%" height="200" id="rick" alt="rick"  align="middle"></div>
<div class="headerright"><img src="images/peter.png" width="100%" height="200" id="peter" alt="peter" align="right"></div>
</div>

Not sure if that's the desired effect you're after but worth a shot perhaps?