Параллакс Прокрутка в обоих направлениях

Question

Я пытаюсь создать сайт прокрутки параллакса с помощью Scrollorama Но я хочу использовать нестандартную анимацию. Эта анимация должна идти сверху вниз, а затем останавливается в середине страницы и возвращается (от середины к вершине). Автор Scrollorama сказал, что этот тип анимации не поддерживается scrollorama, ни его новый плагин SuperScrollorama. Возможно, кто-то может предложить мне еще один плагин с этой функцией.

Answer 1

Я никогда не видел Scrollorama раньше, и это заинтриговало меня, поэтому I built something to do what you're asking. Это не плагин; Я хотел, чтобы прокручиваемый код был простым и не загроможден кодом кода. Я думаю, что превращение его в плагин было бы довольно простым, поэтому я оставлю это вам (если вам не нужна какая-то помощь).

Объяснение Кодекса

JQuery имеет scrollTop() функцию, чтобы определить, как далеко от вершины прокручивается контейнер. Используя высоту элемента, который находится внутри области прокрутки и высоту контейнера, можно определить, какой процент контейнер прокручивается:

scrollAmount/(totalSize - visibleSize) 

(мы должны вычесть от высоты контейнера visibleSize в порядке чтобы получить правильные результаты. Так как scrollTop() возвращает количество пикселей от верхней части элемента, которые скрыты, прокрутка всего пути до дна даст нам totalSize - visibleSize, а не только totalSize)

Мы можем использовать этот процент, чтобы определить, когда двигаться вверх, вниз или оставаться в том же положении. Функция repositionBanner() принимает процент прокрутки и решает, что делать с анимированным элементом. В моем коде я решил, что элемент перемещается в позицию от 0 до 30%, удерживает свою позицию от 30-70% и возвращается в исходное положение с 70-100%.

(Весь мой код предполагает, что вы имеете дело с вертикальной прокруткой. Одни и те же понятия могут быть применены к горизонтальной прокрутке с помощью left и width вместо top и height)

Answer 2

Это даже не близко к тому, чтобы быть столь же изящным, как ответ RustyTheBoyRobot, но вы можете добиться этого, обернув элемент в другой прозрачный элемент контейнера. Затем вы можете анимировать контейнер и исходный элемент.

Пример:

//animate in 
scrollorama.animate('#elementToAnimateContainer',{ 
    delay: 0, 
    duration: 100, 
    property:'left', 
    start:-3000, 
    end: 0, 
    pin: true 
}); 

//animate out 
scrollorama.animate('#elementToAnimate',{ 
    delay: 500, 
    duration: 100, 
    property:'left', 
    start:0, 
    end: 3000, 
    pin: true 
}); 

Единственная проблема в том, что контейнер будет по-прежнему на экране, но если установлен прозрачный вы не увидите его. Вы всегда могли бы $('#elementToAnimateContainer').remove() позже или установить pointer-events:none; и т. Д.

Как я уже сказал, это некрасиво, но он будет делать то, что вы просили.