CODEWITHSUNDEEP
javascripthtmlcssheader
Peter Van de Laar
Peter Van de Laar

Reputation: 399

Responsive header width two overlapping images

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,
    });
    });

Upvotes: 0

Views: 231

Answers (2)

Peter Van de Laar
Peter Van de Laar

Reputation: 399

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)');
    });
});

Upvotes: 1

ben.kaminski
ben.kaminski

Reputation: 976

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?

Upvotes: 0

Related Questions