Ілюстрація та рух
Приклад схеми з анімацією та файли для власних пояснень.
Документ проходить перевірку
Натисни «Відтворити» або переглядай кроки кнопкою «Далі».
Отримали документ. Передаємо його на перевірку.
- 1 · Вхід
- 2 · Перевірка
- 3 · Архів
Якщо анімацію вимкнено в налаштуваннях пристрою, кроки змінюються без руху.
Кроки процесу
- Отримали документ. Передаємо його на перевірку.
- Перевіряємо, чи є всі дані. Якщо чогось бракує, повертаємо документ автору.
- Усі дані на місці. Зберігаємо документ і результат перевірки в архіві.
Спрайти й персонажі
Розмір іконки - 24 × 24 px. Збільшуй її вдвічі, втричі або вчетверо, щоб пікселі лишалися чіткими.
Для схем використовуй іконки без тіні. Для інших ілюстрацій можна додати тінь.
Переглянути іконки й персонажівРучні примітки
Додавай, коли автор попросить.
До трьох приміток на екран. Залиш навколо них місце. У формальних документах рукописних приміток немає.
Завантажити hand.cssФайли й приклади
- Програвач дротів
Код цієї анімації: відтворення, пауза й переходи між кроками.
- Cinema
Бібліотека для складніших анімованих сцен.
- Попередні сцени
Приклади сцен із плеєром і всередині статті.
Підключення в коді
const player = PixelKitWires.mount(container, {
captions: ['Документ надійшов.', 'Перевіряємо.', 'Архівуємо.']
});
// Під час видалення сцени:
player.destroy();Контейнер має містити SVG із cable та data-cargo і кнопки з data-wire атрибутами. Приклад розмітки є в коді цієї сторінки.