ScrollMagic - это библиотека взаимодействия с прокруткой, это означает, что с помощью этой библиотеки мы можем выполнять разные действия в разных местах нашей веб-страницы во время прокрутки. Прежде чем начать, давайте взглянем на некоторые демонстрационные сайты ScrollMagic.
После просмотра демоверсий вы, должно быть, имеете представление о том, что вы можете делать с помощью ScrollMagic. Вы, должно быть, сомневаетесь: «Подходит ли вам ScrollMagic библиотека?»
ScrollMagic использует объектно-ориентированный подход с использованием контроллера для каждого контейнера прокрутки и присоединения нескольких сцен, определяющих, что должно происходить в какой части страницы. Хотя это дает большой контроль, это может немного сбивать с толку, особенно если вы только начинаете работать с javascript.
Как использовать ScrollMagic на нашем веб-сайте?
Чтобы использовать ScrollMagic, просто включите основную библиотеку в свой HTML-файл.
В ScrollMagic есть плагин, который используется для отладки триггерной точки во время прокрутки, которую вы можете вставить в свой HTML.
Теперь давайте напишем первую сцену ScrollMagic.
Рассмотрим пример добавления класса постепенного появления в элемент с идентификатором Element_ ID. Первое, что нам нужно сделать, это Init ScrollMagic, мы можем сделать это, создав контроллер var, которым будет new ScrollMagic.Controller (). Это указывает браузеру запускать анимацию с помощью полосы прокрутки.
Анимация, которую мы выполняем, всегда определяется в сцене, поэтому следующим шагом будет построение сцены. В ScrollMagic.scene () мы добавляем элемент триггера, к которому нам нужно добавить анимацию. Мы определяем .setToggleClass () для добавления класса 'fade-in' в элемент, а затем добавляем его в контроллер с помощью .addTo () функция.
Вы можете добавить в Scrollmagic.Scene () дополнительные функции, например reverse: ’false’, при котором анимация перестает разворачиваться при прокрутке веб-страницы.
Добавление индикаторов
Здесь мы видим, что мы вставляем функцию .addIndicator () перед добавлением в контроллер. Это поможет увидеть на веб-страницах триггер, который поможет нам отлаживать программы. Мы можем изменить цвет триггера с помощью colorTrigger: ’any_color’. Имя триггера также можно изменить с помощью name: ’trigger_name’. Все это добавлено в функцию .addIndicator ().
Для более глубокого изучения библиотеки вы можете обратиться по ссылке:
