根据滚动位置

Question

这是此问题的后续内容：Animation based on scroll position

目标是遍历每个元素，并根据用户滚动位置更改它的旋转和透视。我想从有机用户体验的角度来看，您希望浏览器窗口的顶部能够挤压＆＃39;最上面的项目，并平滑地向下翻转元素。

这是指导截图：

这是一个小提琴：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

我更新了你的小提琴：https://jsfiddle.net/0zpc2a76/1/

如果我正确地理解了你的问题，我认为你正试图将蓝框改为＆＃34;折叠＆＃34;好像它们被视口的顶部向下推。为此，您的计算似乎是错误的，因此我更新了一些变量赋值：

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