javascript - 基于滚动位置的动画

Question

因此，我正在尝试根据元素的滚动位置(顺序地和独立地)为元素设置动画。

目标是遍历每个元素，并根据用户的滚动位置改变它的旋转。现在，每个项目的旋转总是相同的。如何实现？

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

这是循环函数:

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
        }
    });
};

我很感激 vanilla JavaScript 的建议!

Answer 1

我认为这是您正在寻找的修复方法:

我在您分配的旋转变量上方添加了这个:

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

替换后，他们每个人都得到他们的相对偏移旋转:)

错误是唯一改变/影响旋转的变量是您的 scrollTop，而这仅在文档级别。为了在元素级别上产生影响，我们还希望包括该差异:)