javascript - jQuery 动画不放松变换

Question

我在尝试制作比例动画时遇到问题。我有一个视频元素作为背景，并在开始时将其缩放为 (1,1)。我在文档中绑定(bind)了鼠标移动以获取位置并在鼠标沿 Y 轴移动时缩放视频，它会相应地缩放，如放大和缩小效果。但是，我一直在尝试为此实现缓动选项，但它只是在没有效果的情况下进行缩放。这是我的代码

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

所以它所做的是每当光标进入文档并在 Y 轴上移动时，每当我向下/向上移动光标缩放 <video> 时它开始从 1 缩放到(1+值)。元素。但它并没有采取宽松措施。

我想要实现的与这个网站类似。

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

@ntgCleaner 建议的解决方法

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

元素CSS

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

Answer 1

所以，我做了一个 fiddle for you here .

我所做的是为你想要缩放的东西制作一个容器，然后我使用 CSS width 来缩放容器。我还在正在动画的容器上添加了一个 transition 效果，这样事情就会根据你的需要缓和。

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