Анимация: При скролле
В этой статье мы расскажем о настройках запуска анимации При скролле.
Элемент для триггера
Триггер — это элемент, при взаимодействии с которым запускается анимация.
По умолчанию триггером становится элемент с анимацией, но вы также можете назначить триггером любой другой элемент, секцию или свой класс.
В нашем примере анимированным элементом является синий квадрат, его линией пересечения служит центр экрана.
Если назначить триггером квадрат, то анимация квадрата запустится при пересечении квадратом центра экрана.
Если назначить триггером круг, то анимация квадрата запустится при пересечении кругом центра экрана.
В типе запуска При скролле можно назначить триггером только один элемент или одну секцию.
Линия пересечения
Линия пересечения — это горизонтальная линия на странице, при пересечении которой запускается анимация. Для запуска анимации элемент должен пересечь линию пересечения своей верхней границей.
Анимация запускается, когда элемент достигает верхнего края, центра или нижнего края. В режиме просмотра линия пересечения становится невидимой.
Отступ по линии пересечения нужен, чтобы более точно обозначить место на странице, когда запустится анимация. Отступ обозначается в процентах.
Например, у вас настроена линия пересечения — это центр экрана.
Если вы зададите отступ 20%, точка пересечения сместится на 20% вниз.
Если вы зададите минусовое значение: --20% — точка пересечения сместится на 20% вверх.
Например, у вас настроена линия пересечения в центре экрана.
Если вы зададите отступ 20%, линия пересечения сместится на 20% вниз.
Если вы зададите минусовое значение, например, --20%, то линия пересечения сместится на 20% вверх.
Если вы зададите отступ 20%, точка пересечения сместится на 20% вниз.
Если вы зададите минусовое значение: --20% — точка пересечения сместится на 20% вверх.
Например, у вас настроена линия пересечения в центре экрана.
Если вы зададите отступ 20%, линия пересечения сместится на 20% вниз.
Если вы зададите минусовое значение, например, --20%, то линия пересечения сместится на 20% вверх.
Тип воспроизведения
Синхронизация с прокруткой. После запуска анимация не проигрывается до конца автоматически, а напрямую зависит от положения скролла на странице.
Пошаговое проигрывание. Как только пользователь доходит до линии пересечения, анимация запускается и автоматически проигрывает шаги в зависимости от дистанций, настроенных в них.
Сглаживание при скролле
Эта настройка отвечает за плавность шагов анимации. Чем больше значение параметра сглаживания, тем плавнее проигрывается анимация
При высокой скорости сглаживания анимация проигрывается плавнее.
Фиксировать при прокрутке
Это опция для режима Синхронизация с прокруткой. При скролле элемент фиксируется в положении, в котором он был при пересечении линии, то есть в момент начала анимации.
Звонок по России бесплатный
8 (800) 555-45-12
© 2012 – 2025 ООО «Флексби»
