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

Question

У меня проблемы с голосом вокруг анимированного прокрутки Javascript.

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

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

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

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

Любая помощь от блестящих толпы источников умов Сети была бы оценена,

Cheers,

TN.

Answer 1

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

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

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

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