Горизонтальная галерея в Редимаге

Вещает Дмитрий Герасимов

В Редимаге можно делать много интересных штук. Одна из них — прокручивающаяся вместе со скроллом галерея картинок. Вот пример на котиках:

Плюс: её не нужно листать. Читатель увидит все картинки без дополнительных кликов.

Как сделать?

1. Для начала собираем все картинки на странице. Их можно сделать одной высоты или выровнять по вертикали.

2. Расставляем картинки друг за другом справа. Это самый сложный этап, потому что всё не помещается на экране. Поэтому:

• Уменьшаем масштаб браузера до 50% кнопками [⌘—].

• Ставим две фотографии рядом, группируем их через [⌘G] и двигаем влево за пределы экрана. Дальше ставим справа третью фотку и группируем с первыми. Когда аналогично добавим в группу все фотографии, двигаем группу вправо, пока первая картинка не встанет на своё исходное место.

3. Время добавлять анимацию.

Сначала возвращаем нормальный масштаб кнопками [⌘0].

Добавляем группе анимацию move по скроллу.

Ставим старт поинт по центру. Это значит, анимация начнётся, когда верхний край картинки коснётся центра экрана. Чтобы перенести эту ось на центр картинки, задаём оффсет величиной в половину высоты вашей группы.

(Кстати, размер на маке просто померить стандартной скриншотилкой [⌘ Shift 4]. Просто рисуем прямоугольник, и рядом с курсором написан размер выделенной области. Не отпуская мыши нажмите [esc], чтобы не сохранять скриншот.)

Ставим скорость 2×.

Включаем превью. В анимации move cмещаем группу по X, пока не поставим по центру последнюю картинку.

Дальше магия. У нас получилось отрицательное число. Берём его без минуса и делим на 1,7287. Результат записываем в смещение по Y.

Включаем превью и проверяем анимацию. Картинки должны двигаться строго горизонтально. Если нет — проверьте настройки анимации ещё раз. Возможно, вы где-то ошиблись.

Как поменять картинку? Можно конечно разобрать всю конструкцию, поменять что нужно и собрать заново. А ещё можно зайти в слои, открыть группу, выбрать нужную картинку и заменить её. Ограничение — пропорции картинки таким способом поменять не получится.