Question

当我滚动页面时，汽车的行驶和延迟依次行驶汽车，我正在使用滚动魔术库请帮助修复错误

  var svg = $('#vector'),
  circle = $('#circle'),
  circleInner = $('#circle'),
  pathString = $("#vector-path").attr('d'),
  scrollPath = Snap.path.toCubic(pathString),
  arrayPath = [];
$('#circle').css('opacity', '0');

var controller = new ScrollMagic.Controller({
  globalSceneOptions: {
    offset: 0
  }
});



function calcOffset() {
  var center = $(window).scrollTop() + window.innerHeight / 2 - circle.height() / 2,
    offset = circle.position().top,
    distance = center - offset;
}

function setUpPoint(segment) {
  for (var i = 0; i < segment.length; i += 2) {
    if (window.CP.shouldStopExecution(0)) break;
    //create a new object for the point so it can be passed to the bezier plugin
    var point = {};
    point.x = segment[i];
    point.y = segment[i + 1];
    //add the point to the array
    arrayPath.push(point);
  } //loop end
  window.CP.exitedLoop(0);
}

// loop through the curves collection
for (var i = 0; i < scrollPath.length; i++) {
  if (window.CP.shouldStopExecution(1)) break;
  var segment = scrollPath[i],
    point;
  // the first element returned in the array is a letter, remove it
  segment.shift();
  //call the function to set up the points based on the segment returned
  point = setUpPoint(segment);
} window.CP.exitedLoop(1);

var tween1 = new TimelineMax().
  add(TweenMax.to(circle, 1, {
    bezier: {
      values: arrayPath,
      type: "cubic",
      autoRotate: true
    },

    ease: Linear.easeNone,
    onUpdate: calcOffset
  }));


// build scene
var scene = new ScrollMagic.Scene({
  triggerElement: ".bezier-wrap",
  duration: svg.height()
}).

  setTween(tween1).
  addTo(controller).
  on("update", function (e) {
    var stDiv = $("#scrollDirection"),
      st = e.target.controller().info("scrollDirection");
    stDiv.text(st);
    if (st === 'FORWARD') {
      circleInner.css('transform', 'rotate(-90deg)');
      circleInner.css('opacity', '1');
    } else if (st === 'REVERSE') {
      circleInner.css('transform', 'rotate(-270deg)');
      circleInner.css('opacity', '1');
    };
  });

css代码：

#circle {
width: 207px;
height: 70px;
position: absolute;
z-index: 10;
left: -106px;
top: -27px;
z-index: 3;
background: url('../img/car.png');
background-size: cover;
background-position: center;
}

请访问网站，查看此问题和项目 https://1gs.ir/test

请检查手机！!!!

///////////////////////////////////////////////// ///////////////////////////////////////////////////// ///////////////////////////////////////////////////// ///////////////////////////////////////////////////// /////////////////////////////

移动项目时如何避免滚动滞后

0 个答案: