Generated with Avocode. Generated with Avocode. Generated with Avocode. Group 15 close hat Generated with Avocode. Generated with Avocode. Generated with Avocode. Generated with Avocode. Generated with Avocode. Generated with Avocode. path40

Ваш первый анимированный сайт в Readymag: пошаговая инструкция

Readymag — очень простой в освоении инструмент, в котором удобно создавать анимацию. Рассказываем о главных настройках.

Создание проекта

Запустите Readymag, зайдите в свой профиль и создайте новую папку, назовите ее Projects.

Перейдите в эту папку и внизу нажмите на иконку карандаша (Create), затем, нажав на плюс, выберите R/m Templates, чтобы выбрать предустановленный шаблон.

Степан Степанов

Автор статей по дизайну. В веб-дизайн пришел в 2013 году, осознанно начал заниматься с 2015 года. Параллельно освоил верстку. Время от времени публикую переводы на хабре.


Настройка шаблона Sleek

Readymag предлагает несколько готовых стартовых шаблонов — в будущем можете воспользоваться фильтром справа и подобрать для себя подходящий. Выберите шаблон Sleek.

Выберите первую страницу, Main Page, нажав на иконку «плюс» рядом с эскизом, и перейдите в рабочее пространство проекта — просто кликните в любом месте вне диалогового окна.

Вы увидите две страницы проекта — чистую страницу и Main Page шаблона Sleek. Удалите чистую страницу, она не понадобится.

Нажмите на «шестеренку» и назовите свой проект.

Подготовительная часть закончена. Перейдите в режим редактирования, нажав на иконку карандаша (Edit).

Вы увидите такой шаблон с подсказками на полях к каждому блоку.

Чтобы подсказки не мешали, их можно удалить или скрыть. Второй вариант предпочтительнее: перейдите на основную панель управления и нажмите на иконке Widgets (Layers) или используйте горячую клавишу Q. Откроется список всех слоев проекта, найдите группу Group в самом низу и нажмите на иконку глаза, чтобы отключить видимость. Вот так:

Подсказки скрыты. Теперь посмотрим, из каких элементов состоит макет.

Элементы шаблона

Перейдите в режим просмотра проекта, щелкнув на иконку глаза на панели просмотра в правом углу экрана, пролистайте и посмотрите, как ведут себя элементы.

Обратите внимание, что меню при прокрутке не фиксируется сверху, а проматывается и становится недоступным.

Давайте сделаем первую настройку макета под себя — зафиксируйте меню в верхней части экрана при скролле. Для этого выберите все элементы шапки — логотип и пункты меню, затем нажмите на иконку Position справа и выберите положение Fix по центру сверху, а затем сдвиньте шапку чуть ниже, как показано на гифке.

Пример фиксации меню в верхней части на всех страницах

Все, теперь меню всегда видимо. Теперь перейдем к настройке непосредственно анимации. Проскролльте чуть ниже до первой фотографии проекта. Выберите ее и нажмите на иконку Animation справа.

Настройки анимации

Анимацию можно включить для любого из четырех состояний — при загрузке, скролле, клике и наведении.

Эффекты анимации

Вы можете также выбрать эффекты анимации — движение (Move), прозрачность (Opacity), вращение (Rotate) и масштаб (Scale). Выберите On Scroll, Move и посмотрите, какие дополнительные настройки у вас появились.

Вы можете настроить скорость появления элемента (Speed), характер перемещения (Move) и степень прозрачности (Opacity), а также ускорение (Acceleration) — чтобы элемент изменял скорость в начале или в конце анимации. Обратите внимание на Add Effect внизу, там можно выбрать любой незадействованный эффект, в вашем случае это Rotate и Scale, так как Move и Opacity уже активны.

Для первой, самой верхней фотографии выставьте такие параметры.

Лайфхак: для того чтобы удалить эффект анимации, раскройте Select с выбором состояний анимаций и нажмите None, а затем Reset — ссылка появится ниже. Не совсем очевидно, многие не сразу понимают, где искать.

Еще один совет: для того чтобы каждый раз не переходить в режим просмотра, когда вы хотите проверить ту или иную настройку анимации, нажмите Preview в нижней части окна — анимация будет выводиться прямо в рабочей области.

Работает только тогда, когда вы занимаетесь одним элементом. Если хотите оценить анимацию и для фото, и для текста, придется включать полноценный режим просмотра.

Теперь удалите анимацию с картинки и поменяйте значения — например, на такие, как на этой гифке. Перейдите в режим предпросмотра и оцените, как изменился эффект.

Теперь создайте анимацию вращения: сделайте так, чтобы при прокрутке страницы текстовый блок рядом с фотографией вставал вертикально. Для этого вам понадобится параметр Rotate — с его помощью вы можете задать начальный и конечный угол поворота элемента.

Многие параметры указываются в двух значениях — в начале и в конце анимации. Учитывайте это, когда будете создавать эффект.

  • Speed — скорость появления элемента: чем больше значение, тем выше скорость.
  • Move — перемещение элемента, регулируется двумя параметрами: слева значение по горизонтали, справа — по вертикали.
  • Opacity — прозрачность. Например, чтобы при прокрутке картинка исчезала, значение слева установите 100, справа — 0.
  • Rotate — вращение. Значения — это угол поворота относительно текущего состояния. Например, 90 будет означать, что объект повернется на прямой угол по часовой стрелке, а значение –90 — против часовой.
  • Acceleration — ускорение. Объекту можно сделать более плавное появление, торможение или и то, и другое.

Любой эффект можно добавить, удалить или заменить один на другой.

Посмотрите, что получилось, в режиме предпросмотра.

Фотография и текст появляются плавно, а последний еще и поворачивается при скролле.

Элементы при скролле могут двигаться не только вертикально, но и горизонтально или с эффектом увеличения — поэкспериментируйте с анимацией, меняйте значения Move, Rotate, Scale, Opacity, Speed.

Заключение

Readymag помогает создавать эффектные готовые сайты, бизнес-презентации и слайды для докладов без знаний верстки или JavaScript. Получите самые актуальные знания об инструменте на курсе Skillbox и начните применять его в работе. Если почувствовали, что вам интересно создавать сайты и работать над визуалом и анимацией, — получите продвинутые знания на нашем курсе.

Курс

Веб-дизайн с 0 до PRO


Годовой практический курс для тех, кто хочет освоить веб-дизайн с самого начала с индивидуальным наставником, сделать отличное портфолио и получить первые заказы или стажировку в студии.

Хочешь получать персональную подборку статей по дизайну?
Подпишись на рассылку Skillbox