Креативная библиотека и анимации
Готовые секции, шаблоны страниц и анимации, проверенные до того, как вы сможете их использовать, и студия анимации для вашей собственной анимации.
Эта страница переведена с английского. При любых расхождениях действует английская версия. Читать на английском
Креативная библиотека
Заголовок раздела «Креативная библиотека»Каталог охватывает семь категорий:
| Категория | Элементов |
|---|---|
| Hero-блоки | 30 |
| Карточки | 40 |
| Контентные секции | 45 |
| Навигация и обрамление | 15 |
| Анимация (Motion) | 35 |
| Анимация при прокрутке | 25 |
| Шаблоны страниц | 10 |
Каждый элемент проходит контрольный список проверки (отрисовка, адаптивная вёрстка, доступность, лицензирование и дубликаты), прежде чем появится в вашей библиотеке (Library) с отметкой Approved.
Использование элемента
Заголовок раздела «Использование элемента»Откройте Design → Library и выберите элемент. Сначала Preview показывает его. Затем:
- Use on a page: выберите Page и нажмите Add to page. Откроется редактор страницы, в который секции вставлены как несохранённые изменения, готовые к редактированию и сохранению.
- Add to website: если ваш сайт пока не может отобразить этот элемент, нажмите Propose the change. Atlas предлагает изменение настройки сайта и пишет Task for the website developer. Ваш разработчик добавляет компонент в код сайта; администратор сайта активирует изменение в разделе Site setup. Atlas никогда не устанавливает код на ваш сайт.
- Open in Animations: для анимационных элементов начните с него новую анимацию.
Студия анимации
Заголовок раздела «Студия анимации»Создавайте анимации с таймингом (появление, перемещение, масштабирование, поворот и раскрытие) для элементов вашего сайта, просматривайте их и сохраняйте каждое изменение как ревизию.
-
Откройте Design → Animations и нажмите New animation. Задайте Name и Key, выберите, с чего Start from (пустое появление или утверждённая анимация из библиотеки), и нажмите Create.
-
На Timeline задайте Duration in milliseconds, выберите Element to animate (Title, Image или Button) и нажмите Add track. Добавьте ключевые кадры и задайте для каждого Opacity, Move X, Move Y, Scale, Rotate и Reveal.
-
Используйте Play, Pause и Restart и переключайте Preview motion между Normal и Reduced, чтобы проверить, как это выглядит для посетителей, которые предпочитают меньше движения.
-
Нажмите Save new revision. Предыдущие ревизии остаются в разделе Revisions.
Воспроизведение на вашем сайте
Заголовок раздела «Воспроизведение на вашем сайте»Ваш разработчик отмечает анимируемые элементы атрибутом data-atlas-motion="title" (или media для изображения и action для кнопки) и запускает анимацию в клиентском компоненте. Таймлайны отдаёт Delivery API по адресу /motion. Карточка Add to your website в Studio показывает код. Production воспроизводит ревизию из своего действующего релиза.
Ограничения. От 80 мс до 60 с на анимацию, до 12 дорожек по 24 ключевых кадра. Воспроизведение начинается, когда его вызывает ваш сайт; воспроизведение по прокрутке не встроено.