пять приёмов
Пять приёмов, вынутых из чужой спецификации и поставленных на нашу бумагу.
смотреть приёмыприёмы 2 и 4 — курсор-видоискатель и цветной тон
Наведи на фотографию: четыре уголка курсора раскрываются над ней, а тон наползает снизу через mix-blend-mode: color-burn тем же движением, каким плита раскрылась при появлении. На ширине 768 и уже наведение выключено целиком — так в спецификации.
приём 3 — 9 мс на знак, буквы ложатся строго в порядке чтения; подчёркивание дорисовывается в тот момент, когда фраза заканчивается
приём 5 — пружина вместо перехода
Три пресета из спецификации, взяты как есть. Карточки появляются на решателе с массой, натяжением и трением, а не на CSS-переходе: у каждой свой закон, задержка у всех одна — разницу видно в том, как они садятся.
-
springWeight
mass 2.4 · tension 120 · friction 34Основной закон страницы: тяжело, с высоким трением — набор и плиты садятся как дуб.
-
springWeightSoft
mass 1.4 · tension 170 · friction 30Тот же характер с меньшей массой — для мелкого набора и линеек.
-
springInk
mass 1 · tension 420 · friction 34Побуквенная пружина письма: резкая, почти без перелёта.