Переместить элемент на прокрутке 2 плюс пиксели за каждый 1 прокручиваемый пиксель, как только элемент отображается - PullRequest
Новая
       8

Переместить элемент на прокрутке 2 плюс пиксели за каждый 1 прокручиваемый пиксель, как только элемент отображается

0 голосов
/ 11 февраля 2020

Мне нужно переместить несколько элементов вдоль оси Y примерно на 2 пикселя для каждого прокручиваемого 1 пикселя НО только после того, как элемент появился в поле зрения И элементы могут быть относительными или абсолютными ,

Моя цель - создать эффект параллакса с несколькими элементами, основанными на классе.

Вот код, который проверяет, отображается ли элемент 

function isInViewport(node) {
      var rect = node.getBoundingClientRect()
      return (
        (rect.height > 0 || rect.width > 0) &&
        rect.bottom >= 0 &&
        rect.right >= 0 &&
        rect.top <= (window.innerHeight || document.documentElement.clientHeight) &&
        rect.left <= (window.innerWidth || document.documentElement.clientWidth)
      )
}

Далее идет код, который проходит через каждый элемент с указанным c классом 

$(window).scroll(function() {

    var scrolled = $(window).scrollTop()

    $('.parallax').each(function(index, element) {
        // Check if the element is in the viewport.
        var visible = isInViewport(this)

        if(visible) {
            // Move element up or down (depending on the scroll) by twice as many pixels as being scrolled
        } else {
            // Reset to original position
        }
    })
})

Отсюда я заблудился. Я испробовал много разных подходов, но ни один из них не сработал.

Пример: как только elementA появляется в поле зрения (делая это отправной точкой), позиция Top элемента должна меняться на каждый прокручиваемый пиксель плюс 2. Таким образом, как только элемент виден, мы начинаем с 0, и с этой точки для каждого прокручиваемого пикселя мы добавляем к нему 2 и перемещаем элемент на много пикселей от его начальной позиции.

...