Живой первый экран сайта: анимация без программиста

Открываешь сайт мебельного цеха или студии маникюра, а первый экран стоит как фотография в рамке. Заголовок, картинка, кнопка. Всё правильно, и глаз скользит мимо. Хочется, чтобы заголовок мягко проявился, а кнопка тихонько подсветилась. Раньше за таким шли к программисту, сейчас кусок анимации пишет нейросеть.

Сложность в другом. На большом мониторе почти любая анимация гладкая. А клиент открывает сайт на телефоне, в очереди, по ссылке из переписки, и на старом телефоне лишнее движение превращается в дёрганую прокрутку. Поэтому в уроке две части: получить анимацию и проверить её на телефоне до того, как ставить на сайт.

Что получишь

• Первый экран с одной-двумя мягкими анимациями: заголовок, кнопка заявки
• Промпты, после которых нейросеть пишет лёгкий код без лишних библиотек
• Проверку на телефоне по списку: прокрутка, кнопка, чтение, режим уменьшения движения

Что нужно до старта

• Компьютер с браузером и текстовым редактором, чтобы сохранить файл
• Свой телефон и ещё один, постарше. Самая честная проверка идёт на слабом телефоне
• Нейросеть, которая пишет код. Из России по-русски работают Алиса AI от Яндекса и ГигаЧат от Сбера, регистрация на их официальных сайтах, условия смотри там на сегодня. Вторым путём подойдёт Claude, если он у тебя уже есть
• Текст первого экрана: кто ты, что делаешь, для кого, что нажать. Если сайта ещё нет, начни с урока по слову САЙТ

Сам урок денег не требует. Если сайт на конструкторе, вставка своего кода там может быть только на платном тарифе, это смотри в справке конструктора.

Шаги

1. Реши, что движется и зачем

Анимация на первом экране нужна, чтобы глаз зацепился и нашёл кнопку. Если двигается всё подряд, кнопка тонет.

Выбери одну главную вещь и максимум одну вторую:

• заголовок проявляется и чуть поднимается при открытии страницы
• кнопка заявки один раз мягко подсвечивается, когда всё уже на месте
• фото работы очень медленно приближается

Мастеру маникюра подойдёт плавное появление фото работы и кнопка «Записаться». Фирме, которая делает кухни на заказ, заголовок с городом и кнопка «Посчитать кухню». Запиши одной строкой: «двигается вот это, чтобы человек увидел вот это».

2. Попроси нейросеть написать первый экран

Вставь промпт целиком, замени квадратные скобки своим.

Сделай первый экран сайта одним файлом HTML со встроенным CSS.

Кто я: [мастер маникюра в Казани / мебельный цех / фрилансер-дизайнер].
Заголовок: [твой заголовок].
Строка под заголовком: [что ты делаешь и для кого].
Кнопка: [текст кнопки], ведёт на [ссылка на запись, бот или телефон].
Фон: [цвет или «место под фото, я вставлю сама»].

Анимация:
- заголовок мягко проявляется и чуть поднимается при открытии страницы
- кнопка один раз мягко подсвечивается после появления заголовка
- больше ничего не двигается

Требования к коду:
- только CSS, без JavaScript и без сторонних библиотек
- анимировать только прозрачность (opacity) и сдвиг/масштаб (transform)
- не анимировать ширину, высоту, отступы, top/left
- если в телефоне включено уменьшение движения, анимацию выключить через @media (prefers-reduced-motion: reduce), текст и кнопка при этом сразу видны
- текст и кнопка видны, даже если анимация не сработала
- вёрстка сначала под телефон, потом под компьютер
- кнопка крупная, по ней легко попасть пальцем

Дай весь файл целиком одним блоком и под ним коротко: что где менять, если захочу другой цвет или текст.

Почему так. Прозрачность и сдвиг браузер обычно рисует легко, а изменение размеров и отступов заставляет его пересчитывать страницу заново, на слабом телефоне от этого и подёргивания. Строка про уменьшение движения нужна людям, которые в настройках попросили телефон убрать анимации: сайт может это уважать. Как устроена эта настройка в CSS, описано в справочнике MDN, ссылка в источниках урока.

3. Сохрани и открой на компьютере

1. Скопируй весь код из ответа
2. Вставь в текстовый редактор, сохрани с именем ekran.html. В конце должно быть .html, а не .txt
3. Открой файл двойным щелчком, он откроется в браузере

Смотри: текст твой и без ошибок, анимации одна-две, кнопка ведёт куда надо. Если что-то не так, пиши в тот же чат простыми словами: «заголовок появляется слишком долго», «кнопка мигает три раза, нужно один». И каждый раз проси весь файл целиком.

4. Проверь код до телефона

Минутное дело. Найди поиском по тексту в редакторе:

• prefers-reduced-motion должно быть. Если нет, анимация будет и у тех, кто попросил телефон её убрать
• animation или transition рядом со словами width, height, margin, top, left быть не должно, это тяжёлый вариант
• <script быть не должно, мы просили только CSS
• infinite значит бесконечную анимацию. На первом экране она почти всегда лишняя

Если что-то не сходится, отдай нейросети второй промпт:

Проверь этот код по списку и исправь, если надо:
1. Анимируются только opacity и transform.
2. Есть блок @media (prefers-reduced-motion: reduce), и в нём текст и кнопка сразу видны.
3. Нет JavaScript и сторонних библиотек.
4. Нет бесконечных анимаций.
5. Если анимация не сработала, текст и кнопка всё равно видны.

Сначала по каждому пункту «да» или «нет и почему». Потом исправленный файл целиком.

5. Проверь на телефоне

Главный шаг урока. Компьютер показывает, как задумано, телефон показывает правду.

Файл лучше смотреть уже опубликованным. Если сайт есть, попроси того, кто его ведёт, выложить первый экран на тестовую страницу, которую не видят клиенты. Если сайта нет, тестовую страницу можно опубликовать, как в уроке по слову САЙТ.

Открыла на телефоне. Проходи по списку:

1. Первое открытие. Телефон не на зарядке, в браузере открыто много вкладок, как в жизни. Заголовок появился плавно или сначала пустой экран, а потом рывок?
2. Прокрутка. Листни вниз, пока анимация ещё идёт. Страница едет ровно?
3. Кнопка. Нажми пальцем, не целясь. Попала с первого раза? Кнопка не уезжает, пока подсвечивается?
4. Чтение. Заголовок успеваешь прочитать, пока он двигается? Если нет, анимация слишком долгая
5. Уменьшение движения. В настройках телефона, в разделе специальных возможностей, есть пункт про уменьшение движения или отключение анимаций. Название у разных телефонов разное, найди поиском по настройкам. Включи, обнови страницу: текст и кнопка должны стоять сразу
6. Слабый телефон. Повтори пункты 1-3 на самом старом телефоне, какой найдёшь у коллеги или знакомых. Если там дёргается, у части клиентов тоже

Не прошёл пункт - пиши нейросети, что увидела глазами: «на телефоне при прокрутке подёргивается заголовок», «на старом телефоне сначала пустой экран». Это работает лучше, чем «сделай получше». После правки проходи список заново, целиком.

6. Поставь на сайт

Сайт собран нейросетью из файлов. Попроси: «вот мой текущий файл сайта, вот новый первый экран, встрой его вместо старого и больше ничего не трогай, дай файл целиком».

Сайт на конструкторе. У многих конструкторов есть блок для своего кода, где он и на каком тарифе, смотри в справке своего конструктора. Если такого блока нет, у конструктора обычно есть свои анимации в редакторе, и правило из шага 1 работает и там.

После установки ещё раз пройди проверку на телефоне, уже на живом сайте: рядом с остальной страницей анимация может вести себя иначе.

Где обычно ломается

Двигается всё. Заголовок выезжает, картинка крутится, кнопка прыгает, и человек не понимает, куда нажимать. Промпт: «оставь только появление заголовка и подсветку кнопки, остальное сделай неподвижным».

Пустой экран до анимации. Текст изначально спрятан и появляется только по команде. Если что-то пошло не так, человек видит пустоту. Чаще всего так бывает, когда нейросеть всё-таки добавила скрипт. Лечится строкой «текст и кнопка видны и без анимации» и проверкой с включённым уменьшением движения.

Кнопка убегает из-под пальца. Пульсирует или двигается, попасть трудно. Кнопке заявки хватает одной мягкой подсветки, дальше она стоит на месте.

Проверили только на компьютере. Самая частая история. Шаг 5 пропускать нельзя, даже когда очень хочется уже поставить.

Дальше

Здесь нейросеть пишет кусочек кода, а ты его проверяешь. Если хочется так же спокойно собирать и править сайт целиком, просить код, понимать, что в нём, и не теряться, когда что-то сломалось, это курс «Claude с нуля, 7 уроков». Катерина программированию не училась. За июль и август 2026 года она собрала с Claude несколько сайтов с приёмом оплат, и курс про этот путь по шагам.

Источники

1. https://developer.mozilla.org/docs/Web/CSS/Reference/At-rules/@media/prefers-reduced-motion
2. https://caniuse.com/mdn-css_at-rules_media_prefers-reduced-motion

Ещё уроки