Блог

У меня возникла проблема при попытке создать масштабную анимацию. У меня есть видеоэлемент в качестве фона, и я вначале увеличил его до (1,1). Я привязал перемещение мыши в документе, чтобы получить положение и масштабировать видео всякий раз, когда мышь перемещается по оси 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, он начинает масштабироваться от 1 до (1 значение) всякий раз, когда я перемещаю курсор вниз / вверх по масштабированию <video> элемента. Но это не требует смягчения.

То, чего я пытаюсь достичь, похоже на этот веб-сайт.

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

Итак, я приготовил для вас скрипку.

Что я сделал, так это создал контейнер для того, что вы хотите масштабировать, затем я использовал 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;
}