01маска
МАСКА
Текст выезжает из-под маски
Строка живёт в контейнере с обрезанным низом. Движение только по Y, поэтому не дёргает раскладку.
пять приёмов движения
Демо-страница для заказчика: пять приёмов, которые копируются в проект куском кода. Кинетический шрифт, параллакс, пружина, морфинг, сцены на прокрутке. Ни одной библиотеки.
26 линий, 60 кадров в секунду
02параллакс
Слои идут с разной скоростью
Глубина читается только на разнице периодов: чем дальше слой, тем длиннее его путь.
03пружина
Пружина вместо кривой
Пружина перелетает цель и возвращается. На переключателе это физика, на тексте ошибка.
04морфинг
Форма переходит в форму
Круг в каплю, капля в квадрат. Работает, когда обе формы говорят на одном визуальном языке.
05скролл
прогресс 0%
Прокрутка ведёт сцену
Тайм-линия привязана к положению скролла, а не ко времени: человек сам решает темп.
Сцена слушается колеса
Чем ниже прокрутка, тем сильнее карточка уходит в глубину. Ни одного таймера: только прогресс и transform.
rotateY0°
сцена
на скролле
на скролле
transform onlyбез таймеров