时间戳

首页 > 解决方案 > 如何为视差添加平滑运动？

javascript - 如何为视差添加平滑运动？

问题描述

我是 Parallax 的忠实粉丝，我看到这段代码非常棒，但关键是我们如何才能为它添加平滑的效果，就像我停止鼠标时它不会突然停止一样。 这是代码笔

谢谢

一些代码

$(function() {
  var isMobile = window.matchMedia("only screen and (max-width: 768px)");
  var moveForce = 30; // max popup movement in pixels
  var rotateForce = 5; // max popup rotation in deg
  $(".wrap").mousemove(function(e) {
    var docX = $(this).outerWidth();
    var docY = $(this).outerHeight();

    var moveX = (e.pageX - docX / 2) / (docX / 2) * -moveForce;
    var moveY = (e.pageY - docY / 2) / (docY / 2) * -moveForce;

    var rotateY = (e.pageX / docX * rotateForce * 2) - rotateForce;
    var rotateX = -((e.pageY / docY * rotateForce * 2) - rotateForce);

    $('.wrap').css({
      '-moz-transform': 'rotateX(' + rotateX + 'deg' + ') rotateY(' + rotateY + 'deg' + ') translateZ(0)',
      '-webkit-transform': 'rotateX(' + rotateX + 'deg' + ') rotateY(' + rotateY + 'deg' + ') translateZ(0)',
      '-ms-transform': 'rotateX(' + rotateX + 'deg' + ') rotateY(' + rotateY + 'deg' + ') translateZ(0)',
      '-o-transform': 'rotateX(' + rotateX + 'deg' + ') rotateY(' + rotateY + 'deg' + ') translateZ(0)',
      'transform': 'rotateX(' + rotateX + 'deg' + ') rotateY(' + rotateY + 'deg' + ') translateZ(0)',
    });
  });
  if (isMobile.matches) {
    function onDeviceMotion(event) {
      rotateForce = 10; // max popup rotation in deg
      var accel = event.accelerationIncludingGravity;

      var docX = $(this).outerWidth();
      var docY = $(this).outerHeight();

      var accelX = ((accel.x + 10) / 20) * docX;
      var accelY = ((accel.y + 10) / 20) * docY;

      var moveX = (accelX - docX) / (docX) * -moveForce;
      var moveY = (accelY - docY) / (docY) * -moveForce;

      var rotateY = -((accelX / docX * rotateForce * 2) - rotateForce);
      var rotateX = -((accelY / docY * rotateForce * 2) - rotateForce);

      $('.').css({
        '-moz-transform': 'rotateX(' + rotateX + 'deg' + ') rotateY(' + rotateY + 'deg' + ') translateZ(0)',
        '-webkit-transform': 'rotateX(' + rotateX + 'deg' + ') rotateY(' + rotateY + 'deg' + ') translateZ(0)',
        '-ms-transform': 'rotateX(' + rotateX + 'deg' + ') rotateY(' + rotateY + 'deg' + ') translateZ(0)',
        '-o-transform': 'rotateX(' + rotateX + 'deg' + ') rotateY(' + rotateY + 'deg' + ') translateZ(0)',
        'transform': 'rotateX(' + rotateX + 'deg' + ') rotateY(' + rotateY + 'deg' + ') translateZ(0)',
      });
    };
    window.addEventListener("devicemotion", onDeviceMotion, false);
  }
});

标签： javascriptjquerycss

解决方案

我很高兴能提供帮助。

CSS - 过渡属性：https ://developer.mozilla.org/ko/docs/Web/CSS/transition

推荐阅读