jQuery animieren nicht nehmen Beschleunigung

Question

Ich habe ein Problem beim Versuch, eine Skala Animation zu machen. Ich habe ein Videoelement als Hintergrund und habe es zu Beginn auf (1,1) skaliert. Ich habe die Mausbewegung in das Dokument gebunden, um die Position zu erhalten und das Video zu skalieren, wenn sich die Maus in Y-Achse bewegt, es skaliert entsprechend wie Zoom-In und -Out-Effekt. Allerdings habe ich versucht, die Beschleunigungsoption zu implementieren, aber es skaliert einfach ohne den Effekt. Hier ist mein Code

$(document).mousemove(function(event) { 
    var pos = (event.pageY/4000); 
    $("#bgvid").animate({ 
     transform: pos 
     }, 
     { step: function(now, fx) { 
       $(this).css('-webkit-transform', 'scale('+ (1+pos) +','+ (1+pos) +')'); 
     }, 
     duration: '100', 
     queue:false, 
     easing:'swing' 
    }); 
}); 

Also, was es tut, ist, wenn Cursor das Dokument und bewegt sich in der Y-Achse eintritt, beginnt es von 1 bis (1 + Wert) zu skalieren, wenn ich den Cursor nach unten/oben Skalierung des <video> Element. Aber es ist nicht die Lockerung.

Was ich versuche zu erreichen ist ähnlich dieser Website.

http://admirhadzic.com/#/project/kamui

Behelfslösung wie @ntgCleaner vorgeschlagen

meine Jquery

$(document).mousemove(function(event) { 
    var pos = (event.pageY/50); 
    var wid = 120+pos; 
    $('#bgvid').stop().animate({ 
     width : wid+'%', 
     left: -(pos/2)+'%' 
    }, 400,false,'swing'); 
}); 

Element css

video.fullscreen { 
      position: absolute; 
      top:0; 
      left: 0; 
      right:0; 
      bottom: 0; 
      width: 120%; 
      z-index:1; 
     } 

Answer 1

Also, ich habe eine fiddle for you here gemacht.

Was ich getan habe, ist ein Container für das Ding, das Sie skalieren möchten, dann habe ich CSS width verwendet, um den Container zu skalieren. Ich habe auch einen transition Effekt auf den Container, der animiert wird, hinzugefügt, so dass die Sache wie gewünscht abläuft.

html

<div class="box-container"> 
    <div class="box"></div> 
</div> 

js

$(document).on('mousemove', function(e){ 
    var mouseY = e.pageY; 
    $('.box-container').css({"width":mouseY+"px"}); 
}) 

css

.box-container { 
    width:200px; 
    position:relative; 
    transition:all 400ms ease-out; /* NOTE THIS LINE HERE FOR EASING */ 
} 
.box-container:after { 
    content:""; 
    display:block; 
    padding-top:100%; 
} 
.box { 
    position:absolute; 
}