Как записать плавное видео с прокруткой для шаблона Framer

1. 1

   Опубликуйте на публичном адресе

   Опубликуйте шаблон или его демо на адресе .framer.website или на своём домене. Он должен открываться в приватном окне без пароля.

2. 2

   Вставьте URL и выберите Живую съёмку

   Вставьте адрес на главной странице. В настройке «Движок» выберите «Живая съёмка». Она делает снимок страницы в каждом положении прокрутки, а не ведёт кадр по неподвижной картинке, поэтому эффекты появления, трансформации при прокрутке и закреплённые секции проигрываются ровно так, как в браузере.

3. 3

   Задайте темп

   Для главной страницы большинства шаблонов подходит двенадцать–двадцать секунд. «Плавное» — беспроигрышное движение, а «Импульс» идёт от секции к секции и замирает на каждой, что хорошо показывает структуру шаблона.

4. 4

   Остановитесь на том, что продаёт

   Щёлкните на странице там, где прокрутка должна остановиться: первый экран, бенто-сетка или сетка возможностей, отзывы, цены. До 6 пауз, от 0,5 до 5 секунд каждая. Включите «В обе стороны», если видео прокручивается обратно вверх.

5. 5

   Покажите состояния при наведении

   Включите курсор, добавьте наведение и щёлкните карточку или кнопку, на которой он должен остановиться. Курсор переместится туда, hover-эффект проиграется, и курсор задержится на 0,5–5 секунд, прежде чем двинуться дальше. Восемь стилей курсора, от macOS до простой точки.

6. 6

   Экспортируйте нужные версии

   MP4 16:9 в 1080p или 1440p для карточки шаблона, а затем переключите устройство на «Телефон» и экспортируйте версию 9:16 или 4:5 с мобильной вёрсткой для X, Instagram или TikTok.

Статичный сдвиг один раз читает страницу и ведёт по ней кадр сверху вниз. Это быстро и идеально ровно, но всё, что анимируется при прокрутке, застывает в том состоянии, в каком было в момент чтения страницы. Включите «Досматривать анимации», и эффекты появления сначала будут доведены до конечного состояния, так что ничего не попадёт в кадр наполовину проявленным. Живая съёмка проигрывает эффекты по-настоящему. Рендер с ней занимает заметно больше времени и добавляет к экспорту 13 кредитов.

• Выбирайте Живую съёмку, когда движение — часть того, что вы продаёте, а для большинства шаблонов Framer так и есть.
• Выбирайте Статичный сдвиг с «Досматривать анимации» для быстрых черновиков, для страниц, где анимации — это только появления, или для мобильной версии, где места на экране мало.

• Рамка браузера. Safari или Chrome, светлая или тёмная, чтобы с первого взгляда было понятно, что это сайт.
• Фон. Отступ вокруг окна с цветом, градиентом или одним из 36 готовых фонов. Скруглённые углы и мягкая тень превращают его из снимка экрана в предметную съёмку продукта.
• Светлая и тёмная тема. Если шаблон следует системной теме, выберите в «Цветовой схеме» «Светлая» или «Тёмная» и экспортируйте по видео для каждой.
• Чистый первый кадр. Задержитесь на секунду на первом экране, прежде чем начнётся прокрутка. Маркетплейсы и соцсети часто берут первый кадр как обложку.