Понимание значений данных Skrollr

Question

Я пытаюсь понять библиотеку скриптов Skrollr javascript, и мне трудно понять значения данных и как они отличаются между абсолютными и относительными.

У меня есть фоновое изображение на div (примерно на 2x выше div), который я бы прокрутил вниз, когда прокручиваю страницу вниз. Вот что я до сих пор.

<div id="jumbotron" data-top="background-position: right bottom;" data-bottom="background-position: right top;" > 

Что такое data-top и data-bottom? Насколько я могу понять из документации, data-top является вершиной div #jumbotron. Я хочу, чтобы, когда #jumbotron находится в верхней части окна просмотра, положение фона находится в правом нижнем углу. Затем, когда я прокручиваю, а нижняя часть #jumbotron достигает вершины окна просмотра, я хочу, чтобы фоновое изображение было справа. Этого не происходит. Что я делаю не так?

Answer 1

Библиотека skrollr будет переводить CSS на элемент на основе его элементов данных. Например, если у вас элемент следующим образом:

<div id="element" data-0="opacity: 1" data-100="opacity: 0"></div> 

В положении прокрутки 0 (пользователь не прокручивается), непрозрачность элемента будет 1. После того, как пользователь прокрутил 100px вниз страницы, элемент исчезла бы до непрозрачности 0. Вы можете добавить столько инкреций данных, сколько захотите.

Что касается данных верхом, риде на skrollr repo говорит следующее:

данные верхний: Когда вершина элемента выровнена с верхней частью видового

I однако не обращайте внимание на данные внизу в документах. Я вижу только:

данных сверху вниз: Когда в нижней части элемента находится в верхней части окна просмотра (это просто не видно).

Таким образом, вы можете попробовать:

<div id="jumbotron" data-top="background-position: right bottom;" data-top-bottom="background-position: right top;" > 

Просто обратите внимание, что первые данные вашей отправной точкой, а окончательные данные ваша отделка точка с таким количеством шагом по пути, как вам нужно.

Answer 2

Skrollr.js нуждается в атрибуте данных с двумя значениями. Первый описывает выравнивание к окну просмотра. Второй край (или центр) элемента. Это может быть немного запутанным, что оба названы так же (сверху, в центре или внизу).

Вы можете дополнительно позиционировать фон с процентными значениями. Таким образом skrollr может перейти между значениями.

См. Этот пример. https://jsfiddle.net/4frjantk/

<div class='section' 
    data-bottom-top="background-position: 50% 100%" 
    data-top-bottom="background-position: 50% 0%" > 
</div> 

PS: Пример содержит обходной путь для контейнеров с высоты 100%, как описано здесь https://github.com/Prinzhorn/skrollr/issues/347