Анимация: При скролле
В этой статье мы расскажем о настройках запуска анимации При скролле.
Элемент для триггера
Триггер — это элемент, при взаимодействии с которым запускается анимация.
По умолчанию триггером становится элемент с анимацией, но вы также можете назначить триггером любой другой элемент, секцию или свой класс.
В нашем примере анимированным элементом является синий квадрат, его линией пересечения выбран/служит центр экрана.
Если назначить триггером квадрат, то анимация квадрата запустится при пересечении квадратом центра экрана.
Если назначить триггером круг, то анимация квадрата запустится при пересечении кругом центра экрана.
В типе запуска При скролле можно назначить триггером только один элемент или одну секцию.
Линия пересечения
Линия пересечения — это горизонтальная линия на странице, при пересечении которой запускается анимация. Для запуска анимации элемент должен пересечь линию пересечения своей верхней границей.
Анимация запускается, когда элемент достигает верхнего края, центра или нижнего края. В режиме просмотра линия пересечения становится невидимой.
Отступ по линии пересечения нужен, чтобы более точно обозначить место на странице, когда запустится анимация. Отступ обозначается в процентах.
Например, у вас настроена линия пересечения — это центр экрана.
Если вы зададите отступ 20%, точка пересечения сместится на 20% вниз.
Если вы зададите минусовое значение: --20% — точка пересечения сместится на 20% вверх.
Например, у вас настроена линия пересечения в центре экрана.
Если вы зададите отступ 20%, линия пересечения сместится на 20% вниз.
Если вы зададите минусовое значение, например, --20%, то линия пересечения сместится на 20% вверх.
Если вы зададите отступ 20%, точка пересечения сместится на 20% вниз.
Если вы зададите минусовое значение: --20% — точка пересечения сместится на 20% вверх.
Например, у вас настроена линия пересечения в центре экрана.
Если вы зададите отступ 20%, линия пересечения сместится на 20% вниз.
Если вы зададите минусовое значение, например, --20%, то линия пересечения сместится на 20% вверх.
Тип воспроизведения
Синхронизация с прокруткой. После запуска анимация не проигрывается до конца автоматически, а напрямую зависит от положения скролла на странице.
Пошаговое проигрывание. Как только пользователь доходит до линии пересечения, анимация запускается и автоматически проигрывает шаги взависимости от дистаниций, настроенных в них.
