Анимированная прокрутка с SuperScrollorama + Greensocks

У меня возникла небольшая проблема с проблемой анимированной прокрутки Javascript.

Я использую плагин SuperScrollorama Jquery, созданный поверх библиотеки твининга Greensock JS.

Фундаментальный эффект, которого я добиваюсь, заключается в том, чтобы «закрепить» раздел вниз, затем использовать вертикальную прокрутку для расширения некоторого контента, а затем «открепить» раздел после того, как контент будет полностью расширен, чтобы пользователь мог прокручивать дальше, т.е. http://blueribbondesign.com.au/example/

Но когда я пытаюсь применить этот же эффект к нескольким разделам один за другим, все ломается: «незакрепленный» контент под закрепленным элементом выталкивается за пределы экрана, и кажется, что высота элемента неправильно вычисляется при выполнении анимации. в обратном порядке (т.е. прокручивая страницу вверх). – например, http://blueribbondesign.com.au/example2/

Я бесконечно возился с div «position:fixed» и «pin-spacer» и пытался подключить плагин Superscrollorama к различным содержащим элементам, но до сих пор не могу понять, как заставить его работать.

Любая помощь от блестящих краудсорсинговых умов Интернета будет высоко оценена,

Ваше здоровье,

TN.


javascript scroll jquery gsap vertical-scrolling
person ThomasNorth    schedule 28.05.2012    source источник

Ответы (1)


arrow_upward
4
arrow_downward

Я сам работал с этим вопросом. Что происходит, так это пустой разделитель div, помещенный над закрепляемым разделом с высотой, которую вы определили в функции pin(). Во-вторых, закрепленный элемент получает присвоенную ему позицию position:fixed. Обе эти вещи позволяют полосе прокрутки двигаться вниз по странице, в то время как элемент остается прикрепленным. В свою очередь, все, что у вас было ниже этой секции, сбрасывается из-за высоты этого разделителя.

Если ваш закрепленный элемент центрирован по горизонтали, сначала задайте для него значение left:50%, margin-left:-{width/2}px, чтобы зафиксировать его от смещения к левому краю.

Затем вам нужно будет обнаружить события закрепления/открепления (которые предлагаются плагином в качестве дополнительных параметров к «анимации») и изменить раздел внизу, чтобы также переключать фиксированное/относительное положение. Когда вы изменяете этот базовый раздел, чтобы он находился в фиксированном положении, обязательно установите его свойство «top» на любую высоту закрепленного элемента. Как только закрепленный элемент открепится, верните его в относительное положение. Имеет ли это хоть какой-то смысл?

Кажется, что разные методы потребуют разных исправлений, но именно на эти вещи я бы обратил внимание... фиксированное позиционирование, а затем использование событий закрепления/открепления для настройки.

person daleyjem    schedule 30.06.2012