Как в бумажном журнале
На сайтах фотографов, книгоделов и дизайнеров иногда используется такой приём: можно полистать картинки, которые как будто напечатаны в журнале. Выглядит примерно так:
Сегодня сделаем то же самое и заодно посмотрим, как оно устроено изнутри.
Логика работы
Внутри у таких проектов много невидимой глазу работы:
- сразу загрузить все картинки;
- те развороты, которые листаем, — виртуально повернуть и временно скрыть, чтобы развернуть в нужный момент;
- настроить анимацию листания туда и обратно;
- продумать механизм листания — кнопками или по клику.
Чтобы это сделать, нам понадобится HTML-страница; скрипт, который обработает переворачивание; и стили, где мы распишем всю внешнюю красоту. Начнём со страницы.
Готовим страницу
Чтобы результат выглядел одинаково во всех браузерах, кроме своих стилей мы подключим нормализатор CSS — он сгладит все различия браузеров.
На странице сделаем два раздела — один с картинкой, второй с пояснительной надписью, как этим управлять.
Мы сделаем пример с двумя картинками, а каждую картинку нам нужно будет разбить пополам, для листания. Из-за этого в основном разделе будет четыре блока: две половинки первой картинки и две второй.
В самом конце страницы подключим скрипт — с его помощью мы будем управлять листанием.
Пишем скрипт
Задача такая: если это первый разворот (первая картинка), то перевернуть на второй, а если мы кликнули по второму развороту — вернуть назад первый.
Чтобы это сделать, используем приём с переключателем классов в JavaScript. Для этого используется команда classList.toggle, и работает она так:
- если у заданного элемента нет указанного класса, то ему добавляется этот класс;
- если у элемента этот класс есть, то он убирается.
Например, если мы напишем classList.toggle("flip"), то если у элемента не было класса flip, то он ему добавится, а если был — то он исчезнет.
Мы будем использовать этот класс как признак того, что нужно перевернуть страницу. Для этого чуть позже в стилях пропишем две ситуации — когда этот класс применяется к первому развороту и когда ко второму.
Сам скрипт состоит из двух этапов: получаем доступ к разделу со всеми разворотами, а потом делаем обработчик клика по картинке. В конце мы ещё убираем надпись после первого клика — читатель понял, как управлять листанием, и подсказку можно больше не показывать.
Настраиваем стили
Прежде всего зададим глобальные переменные, чтобы можно было управлять всем из одного раздела: настройки времени анимации и адреса картинок. Для простоты мы используем картинки из бесплатного фотохостинга Unsplash, но их можно заменить на свои, указав другой путь к файлу.
Теперь укажем общие настройки для всей страницы и настроим внешний вид раздела с виртуальным журналом. Чтобы всё выглядело красиво, мы скруглим углы и добавим тень внизу — как будто журнал лежит на какой-то плоскости. Заодно настроим внешний вид текста внизу: добавим нужные отступы и выровняем по центру:
Добавляем картинки
Мы выше описали переменные с картинками, теперь будем их использовать:
/* показываем текущий разворот */
.current {
background-image: var(--image-current);
}
/* сразу заряжаем для показа следующий разворот */
.next {
background-image: var(--image-next);
}
Так как каждый разворот состоит из двух половинок, настроим сначала общие параметры каждой части, а потом отдельно левую и правую часть:
У нас появилась первая картинка, но на самом деле на странице их уже две — мы просто не видим вторую, потому что она лежит под первой. Клик по картинке тоже пока не даёт результата: класс с переворачиванием добавляется, но он пустой — мы ещё его даже не создали. Исправим это и добавим стили с классом flip:
У нас заработала анимация, но наполовину: видно, что страница начинает переворачиваться туда и обратно, но всё стопорится на середине. А всё потому, что мы предусмотрели обработку разворотов с классом flip, но не сделали возврат назад, когда этот класс у блока исчезает. Исправим это и добавим два новых блока:
Теперь всё в порядке и работает так:
- По клику мы добавляем класс flip к правой части первой картинки и левой части второй картинки.
- Это даёт нам анимацию листания до середины страницы.
- Как только мы добавили к ним класс flip, то тут же перестали действовать два других блока, где этого класса нет, — .next.left и .current.right.
- Из-за этого отменились все действия, которые были в них прописаны — а это как раз та самая вторая часть листания от середины, которой нам не хватало
- Так как анимация происходит по очереди, нам кажется, что страница просто переворачивается туда и обратно, а на самом деле мы управляем половинками картинок.
Посмотреть анимацию на странице проекта.
Больше готового кода смотрите по ссылке в статье.