Как сделать анимацию картинок в редимаге и тест, которые сделают материал интерактивным.
Этот гайд пригодится как для курсовой работы, так и для многих заданий на второй ступени. Рассказываем, как сделать простую анимацию в редимаге: подвижные картинки добавят эмоций, а интерактивный тест поможет сделать вывод.
Картинка-открывашка
Сделаем меню, которое открывается при наведении курсора. Такую анимацию можно использовать для кнопок, чтобы они откликались на клик пользователя.
Нам понадобятся две картинки: открытое и закрытое меню.
Картинки приготовьте заранее
Сначала в редимаге добавляем изображение закрытого меню. На эту картинку накладываем открытое меню. Тот же фокус можно проделать с фотографиями.
Накладываем одну картинку на другую
Для открытого меню добавляем анимацию Hover → Fade in, длительность анимации (Durat.) на ноль. С длительностью 0 картинка будет сразу появляться при наведении.
Раскрывающаяся картинка
Такая картинка будет раскладываться при скролле. Эта анимация подойдёт для анимированной взрыв-схемы — можно легко показать части объекта.
Анимация показывает, какие ингредиенты есть в бургере
Заготовка: каждую часть бургера сохраняем отдельно
Сохраняем каждый ингредиент бургера отдельно, и собираем всё на страничке.
Так будет выглядеть бургер до скролла
Анимируем каждую часть кроме центральной. Задаем анимацию Scroll → Move. Настраиваем сдвиг от центра. Дальше всего должны сдвинуться булочки.
Чтобы сдвиг выглядел гармонично, противоположные части должны сдвигаться на одинаковое расстояние. Так верхняя булочка сдвигается от 0 до −120, а нижняя от 0 до 120. Чтобы анимация была плавная, скорость (Speed) лучше поставить на 0.25x.
Выставляем настройки для каждого ингредиента
Крутящаяся картинка
Анимация с крутящимся объектом. Подойдёт для всего круглого: колёс, планет, тарелок.
Голубая тарелка крутится
Добавляем две картинки и настраиваем анимацию на скролле Scroll → Rotate. Чтобы вращение не слишком отвлекало от чтения, выставляем параметры от 0 до 65. Параметр Speed ставим на 2.0.
Заготовка: две тарелки
Задаём старт анимации внизу Start Point — Bottom. Когда тарелки окажутся внизу страницы, они начнут крутиться.
Тест
Чтобы в конце статьи развлечь читателя, сделаем простенький интерактивный тест.
При выборе ответа будет выпадать картинка с результатом. Сначала нужно добавить вопрос и варианты ответов
Чтобы читатель понимал, что варианты кликабельные, нужно добавить отклик при наведении мыши. Мы сделаем так, чтобы для каждого ответа появлялась иконка бургера.
Добавляем иконки. Каждую иконку анимируем Scroll → Fade in, Durat. ставим на ноль. Добавляем триггер на соответствующий вариант.
Для каждого ответа настраиваем всё отдельно
Каждый вариант связан со своей иконкой
После иконок добавляем ответы на тест. Картинки с результатами накладываем поверх текста и иконок. Чтобы картинку можно было закрыть и пройти тест снова, добавляем кнопку. Кнопку группируем вместе с картинкой.
Настраиваем анимацию для всей группы Click → Fade in, Durat. на ноль. Триггер ставим на нужный вариант ответа и части кнопки.
Так будут располагаться слои для настроенного теста