Javascript 基于滚动位置的动画

因此，我尝试根据元素的滚动位置（顺序和独立）设置元素的动画

目标是循环遍历每个元素，并根据用户的滚动位置更改其旋转。现在，每个项目的旋转总是相同的。如何做到这一点

这是一把小提琴：

这是循环函数：

var _items = function () {
    forEach(items, function(item) {
        var scrollTop = _scrollTop(),
            elementTop = item.offsetTop,
            documentHeight = _getDocumentHeight(),
            elementHeight = _getElementHeight(item),

            // Transform the item based on scroll
            rotation = (scrollTop / (documentHeight - windowHeight) * 360),
            transform = 'rotate(' + 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
        }
    });
};

---

我非常感谢您的建议

我认为这就是您正在寻找的解决方案：

我在您的旋转变量赋值上方添加了以下内容：

// Transform the item based on scroll
    rotationFactor =  Math.max(0, scrollTop - elementTop),
    rotation = ( rotationFactor / (documentHeight - windowHeight) * 360),

替换此后，它们各自获得相对偏移旋转：）

错误在于，唯一改变/影响旋转的变量是scrollTop，而这只是在文档级别上。

---

为了在元素级别上发挥作用，我们还希望包括这一差异：）

Brilliant，谢谢@Annihlator。我知道我在某种程度上使用了元素顶部偏移量（因此保留了var；），但我无法理解它。下面是@universitor建议的解决方案：