javascript - 根据滚动位置翻转动画

Question

这是这个问题的后续问题:Animation based on scroll position

目标是遍历每个元素，并根据用户滚动位置改变它的旋转和视角。我想从有机的用户体验 Angular 来看，您会希望浏览器窗口的顶部“挤压”最上面的项目，然后顺畅地将元素向下翻转。

以下是指导截图:

这是一个 fiddle :https://jsfiddle.net/nfquerido/0zpc2a76/

循环函数:

var _items = function () {

  forEach(items, function (item) {

    var scrollTop = _scrollTop(),
      elementTop = item.offsetTop,
      documentHeight = _getDocumentHeight(),

      // Transform the item based on scroll
      rotationFactor =  Math.max(0, scrollTop - elementTop),
      perspectiveFactor =  Math.max(0, scrollTop - elementTop),
      rotation = (rotationFactor / (documentHeight - windowHeight) * 90),
      perspective = (perspectiveFactor / (documentHeight - windowHeight) * 2000),
      transform = 'perspective(' + perspective + ') rotateX(' + rotation + 'deg)';

    // Elements off the top edge.
    if(scrollTop > elementTop) {
      item.classList.add('scrolling');
      item.style.webkitTransform = transform;
    } else {
      item.classList.remove('scrolling');
      item.style.webkitTransform = null; // Reset the transform
    }

  });

};

Answer 1

我更新了你的 fiddle :https://jsfiddle.net/0zpc2a76/1/

如果我对您的问题的理解正确，我认为您是在尝试让蓝色框“折叠”起来，就好像它们被视口(viewport)顶部向下推一样。为此，你的计算似乎是错误的，所以我更新了一些变量赋值:

rotation = (rotationFactor / (item.offsetHeight) * 90),
perspective = 2000 - (perspectiveFactor / (item.offsetHeight) * 2000),