使用jQuery onresize更改div的位置

Question

I'm currently working on a web project for my company and I'm in trouble. I have code like so:

//CSS
.home-panel{
   z-index: 0;
   width: 1800px;
   height: 2100px;
   background: gray;
   transform: skew(0deg,-55deg) translateY(-1920px);
}
.ultimate-hero{
   height:100vh;
   overflow:hidden;
}


  //HTML
  <div class="ultimate-hero">
    <div class="home-panel">
    </div>
  </div>


 //JS
 $(window).resize(function() {
    //get dimensions
    var height = $(window).height();
    var width = $(window).width();
    $('.home-panel').css({
   'transform' : 'skew(0deg,-55deg) translateY(-'+width+'px)'
     });
  });

I want to move .home-panel when the browser is resizing, but that code apparently does the reverse from what I expected. So how do I fix that?

Thank you.

I should mention this earlier, i want something like .home-panel from this website http://espn.com/espn/feature/story/_/id/19742921/espn-body-issue-2017 or at least closer. If you have better way to do that, please help me.

Answer 1

.home-panel{
   z-index: 0;
   width: 1800px;
   height: 2100px;
   background: gray;
   /*transform: skew(0deg,-55deg) translateY(-1920px);*/
}

Try to remove transform: skew(0deg,-55deg) translateY(-1920px);

 //JS
 $(document).ready(function(){
    var height = $(window).height();
    var width = $(window).width();
    $('.home-panel').css({
   'transform' : 'skew(0deg,-55deg) translateY(-'+width+'px)'
     });

 });

 $(window).resize(function() {
    //get dimensions
    var height = $(window).height();
    var width = $(window).width();
    $('.home-panel').css({
   'transform' : 'skew(0deg,-55deg) translateY(-'+width+'px)'
     });
  });

Answer 2

Try this:

$('.home-panel').css({
    'transform': 'skew(0deg,-55deg) translateY(-'+(1920+1800- width)+'px)'
});