1

Есть шаблон hey, в котором анимация реализована через библиотеки ScrollMagic и TweenMax. Заказчик хочет сделать более плавную прокрутку, чтобы анимация при прокрутке дива до конца воспроизводилась сама, как это сделано в верхнем меню.

Я нашел в коде функцию которая отвечает за скролл в верхнем меню:

function scrollTo(event) {
   var target = $(this).attr('href').split('#');

   controller.scrollTo('#' + target[target.length - 1]);
   event.preventDefault();
}

Как бы мне теперь ее видоизменить чтобы она вызывалась когда основной див секции заканчивался?

1

1 ответ 1

1

В ScrollMagic длительность анимации задается свойством duration. Например, в вашем коде:

var scene = new ScrollScene({
                    triggerElement: section,
                    triggerHook: 1,
                    duration: settings.height
                })

Если выставить duration: 0, анимация будет воспроизводится, когда сработает триггер triggerElement.

Чтобы увидеть метки триггеров, добавьте к каждой сцене .addIndicators(), пример:

var scene = new ScrollScene({
                        triggerElement: section,
                        triggerHook: 1,
                        duration: settings.height
                    })
                   .addIndicators()

И подключите скрипт http://scrollmagic.io/scrollmagic/uncompressed/plugins/debug.addIndicators.js Можете почитать про ScrollMagic на русском ScrollMagic – Создание анимации при прокрутке страницы

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.