Анимация появления текста
Создаём эффект появление текста при скролле страницы в Zero Block через пошаговую анимацию
КАК СДЕЛАТЬ
ЧТОБЫ ТЕКСТ
ПОЯВЛЯЛСЯ
ПО МЕРЕ
ПРОКРУТКИ
СТРАНИЦЫ
Реализация
1. Расставляем текстовые блоки и добавляем над каждым текстом элемент Shape. Уменьшаем непрозрачность Shape до 90%.
2. В пошаговой анимации выставляем Event (событие) — on Scroll (при скролле), Start Trigger (начало триггера анимации) — on Window Top (от верхнего края экрана), Trigger Offset (отступ, задержка) — 200 пикселей. В первом шаге при дистанции 10 пикселей выставляем смещение вниз на 90 пикселей, чтобы полупрозрачный шейп перестал перекрывать текстовый блок.
3. Для следующих элементов выставляйте такие же настройки. Если вы хотите, чтобы следующий текстовый блок показывался быстрее, увеличьте значение Trigger Offset.
4. Чтобы при смещении вниз шейпы не перекрывали нижние элементы, откройте слои (ctrl (command) + L) и разместить верхние элементы под нижними.
Нейлоновый
провод
провод