Как сделать анимацию в Readymag
Как я уже сказал выше, анимация в веб-проектах (особенно лонгридах) сейчас встречается достаточно часто. Разработчики стараются таким образом выделить определенный контент или просто реализовать эффектную подачу информации. Подобные фишки подойдут как онлайн-журналу, так и креативному дизайнерскому портфолио.
В Readymag анимация появилась относительно недавно. Я бы выделил 3 основных направления для нее:
- При загрузке страницы. Вы можете создавать последовательность всплывающих элементов на странице, будь то эффект плавного появления объекта или увеличение изображения. Такое часто можно увидеть в разных онлайн презентациях.
- При наведении. Отличный пример взаимодействия контента и посетителя — используйте вращающиеся блоки, масштабирование изображений и т.п. Сюда же, в принципе, можно отнести эффекты при клике. Все это добавляет сайту некой интерактивности.
- При прокрутке страницы. Наиболее необычный пример анимации на сайте, с помощью которого можно придумать весьма интересные решения (не только параллакс-эффект). На сайте readymag.com имеется отличный пример данного варианта.
Создание анимации на сайте, по сути, состоит из трех шагов:
- Определение условия для срабатывания (загрузка, наведение, клик, прокрутка);
- Выбор эффекта;
- Добавление шагов для более сложной анимации.
Например, я хочу добавить масштабирование фотографии на своей персональной странице при наведении. Для этого первым делом кликаю по соответствующему объекту.
Затем в меню инструментов справа выбираю триггер для запуска анимации (On hover — эффект при наведении). Далее потребуется задать тип эффекта и определить для него разные параметры. Для удобства здесь же располагается кнопка Preview с демонстрацией работы эффекта.
По следующему видео процесс создания анимации на сайте вам будет более понятен.
Главное, что при этом не используется никакого кодинга, все предельно просто и интуитивно понятно. Из эффектов здесь есть:
- move — перемещение;
- opacity — прозрачность;
- rotate — поворот;
- scale — масштабирование.
Также при создании анимации появляется блок предустановленных эффектов (Presets). В нем есть парочка заранее настроенных вариантов: затухание картинки, исчезновение и перемещение, мерцание.
Можете попробовать их установить и посмотреть, как именно эффекты будут проявляться на сайте. После этого просто меняете настройки на те, которые вам нужны.
В целом, добавление анимации на сайте с помощью Readymag — это реально что-то новое для подобных платформ. Однако и без нее у проекта есть ряд весьма уникальных фишек: поддержка Retina, совместная работа, анимация. Мне сервис понравился.
Я пробовал разные конструкторы сайтов: для обычных проектов, флешевых веб-страниц, специально заточенные под лонгриды и т.п. Выбирать тот или иной инструмент следует исходя из поставленных перед вами задач. Делать блог в Readymag определенно не стоит, а вот для онлайн-журналов, сайтов-портфолио или создания презентаций он идеально подходит. Наличие разных эффектов и той же анимации позволит подчеркнуть вашу индивидуальность и поразить посетителя нестандартным подходом.
Функции Readymag и пример использования
Управлять элементами в Readymag можно обычным перетаскиванием – drag and drop. Изменение размеров текста или блоков контента, выбор шрифтов, загрузка изображений, добавление видео, — все это делается достаточно легко и быстро. Вот, например, настройка адаптивного дизайна.
Созданная презентация или сайт будут отлично выглядеть на планшетах, смартфонах и корректно работать в современных браузерах.
Проект, созданный на readymag.com полностью соответствует всем требованиям поисковых систем и имеет необходимые функции:
- подключение собственного домена;
- отслеживание статистики через Google Analytics;
- SEO Friendly (добавление заголовка и описания, индексация всех текстов на сайте);
- размещение на собственных серверах сервиса (нет необходимости приобретать хостинг).
Меня лично больше заинтересовали функции, которые я не встречал у других платформ:
- Во-первых, это совместная работа над проектами. Вы можете приглашать других пользователей-коллег для участия в разработке сайта. Допустим, сотрудничаете с фотографом/дизайнером и открываете ему доступ для создания страницы портфолио и т.п.
- Во-вторых, поддержка Retina дисплеев. Кто сталкивался с версткой под ретину, наверняка оценит эту фишку.
- Вы можете встраивать проекты Readymag через Embed-код, например, в другие блоги. Выглядит весьма круто.
Чтобы начать работать в Readymag, нужно выбрать один из имеющихся шаблонов, либо открыть пустую страницу для редактирования. Для создания презентаций есть специальная категория макетов + допускается использование своих наработок.
В некоторые темы включены сразу несколько дизайнов страниц, например, отдельно страница с фотографиями, отдельно с текстами, контактами и т.п. Ненужные вы потом можете удалить. Советую выбирать вариант максимально приближенный к вашим требованиям/задачам, дабы потом меньше пришлось менять.
Интерфейс редактора для отдельной страницы выглядит приблизительно так:
В правом верхнем углу располагаются иконки просмотра и настройки проекта. В последних можете добавлять стрелочки навигации, менять метаданные, подключать свой домен и т.п. Снизу — элемент, позволяющий в один клик задать вопрос команде продукта, если возникнут какие-то вопросы.
В левом нижнем углу находятся основные элементы управления:
- настройки мобильных версий страницы;
- кнопка отмены/повтора действия;
- установка размеров страницы;
- вспомогательные линии: сетки и направляющие;
- работа с фоном (можете ставить картинки и видео);
- созданные элементы (в данном примере это форма, текст и фото).
Для создания нового объекта просто кликаете по иконке «+».
Вариантов добавляемого контента хватает. Кроме обычных картинок, форм и текстов можно вставлять на страницу аудио, слайдшоу, кнопки, карты, виджеты из соц.сетей, а также iframe коды виджетов сторонних сервисов (например, редакторов форм).
