Курс по веб-дизайну · Урок 2 из 24
Пошаговая анимация на Тильде
Автор курса — Данил Фимушкин.
Выпуск запланирован · 16.11.2026 · 19:00 МСК
Видео будет добавлено после подготовки выпуска. Ниже — программа и задания для самостоятельной работы.
Программа урока
Теория
- Основы передачи цвета на дисплеях
- Базовые цвета в веб-дизайне
- В чем измеряется интенсивность цвета в RGB?
- Что такое пиксель и зачем нужно знать это при создании сайтов?
- Разрешение экранов дисплеев разных устройств
- Как узнать какого размера картинка в Windows и Mac?
- Типы файлов и их характеристики: jpg, png и gif
- Размеры файлов для создания сайтов
Делаем вместе (по видео)
- Трюк с регистрацией новых аккаунтов в Тильде
- Как подключить стандартную шрифтовую пару на всем сайте?
- Как задать размер рабочего поля в Zero-блоке в пикселях?
- Что такое сетка и зачем она нужна?
- Как дублировать готовые текстовые блоки в Тильде?
- Что такое иерархия заголовков в сайтах?
- Как добавить пошаговую анимацию в Zero Block?
- События для запуска пошаговой анимации
- Условия срабатывания (Start trigger) для анимации
- Подробный разбор настроек пошаговой анимации
- Создание вертикального parallax-эффекта
- Правила работы со слоями в Zero Block
- Как сделать горизонтальную анимацию на сайте?
- Создание псевдо3D-эффекта на одностраничном сайте
- Как зациклить фоновую текстуру (бесшовная текстура)?
- Как уменьшить расстоянием между строками текста?
- Базовое, продвинутое и лидерское задание для самостоятельного выполнения
Практика после урока
Базовое: собрать страницу с авто в Zero Block; показать её на экранах от 1200 px, а на меньших экранах — отдельный блок «Привет»; опубликовать учебную страницу.
Продвинутое: добавить кнопку «На Марс!», создать вторую страницу про космос с текстом от 2000 символов и связать страницы.
Дополнительное: сделать три первых экрана 1200×700 px для проката велосипедов, услуг садовника и турнира по шахматам. Фон JPEG, объект PNG с прозрачностью, заголовок, текст и кнопка. Разместить на одной странице.
По желанию: записать короткую демонстрацию своих работ с объяснением решений.
Это самостоятельная практика; проверка работ и сопровождение не обещаны.
Тильда для практики курса · партнёрская ссылка
Материалы курса в Telegram
