Галерея с нестандартным переключением изображений
Разберёмся как сделать галерею изображений. При клике на изображение будет показываться увеличенная версия.
Создадим базовую HTML-структуру, необходимую для любой веб-страницы.
Добавим декларацию DOCTYPE, корневой элемент <html> с атрибутом языка, секцию <head> с мета-тегом для кодировки, заголовком страницы и ссылкой на CSS-файл, а также секцию <body>.
Добавим div с классом frame для расположения на странице. Будем центрировать галерею для наглядности.
Создадим разметку галереи изображений:
<div class="gallery"> для галереи;<div class="picture pic-N"> — обёртка для изображений;<img class="picture__image"> — изображение.
Центрируем .frame и зададим для наглядности обводку тенями.
У .gallery удалим стандартную стилизацию списка и установим свои стили. Сделаем сетку из картинок 3 x 3.
Каждой картинке, .picture, укажем конкретные размеры, это облегчит работу с анимацией.
Чтобы изображения не искажались, укажем object-fit: cover. Добавим переход для плавного изменения прозрачности.
Добавим анимацию small, которая будет срабатывать при загрузке страницы. В начале анимации контейнеры отмасштабированы в 3.0625 раза (чтобы закрывать весь контейнер) с помощью scale, в конце анимации они уменьшаются до обычного размера.
Зададим каждому контейнеру собственный transform-origin, чтобы изображения уменьшались каждый в направлении своего расположения в галерее.
Временно отключим анимацию появления и начнём писать JavaScript.
Подключим к HTML-странице файл script.js.
Найдём все элементы .picture на HTML-странице.
Повесим на каждый элемент .picture обработчик события клика.
Внутри обработчика клика добавляем всем элементам .picture класс away.
Элементу, на который кликнули, переключаем класс active и убираем класс away.
Обработчик уже работает, но ничего не происходит, так как надо добавить дополнительные стили.
Добавляем анимацию big для активного элемента, причем задаём animation-fill-mode со значением both. Благодаря этому состояние элемента сохраняется после проигрывания анимации.
Теперь переключение изображений при щелчке работает.
Добавляем стили, которые делают изображения внутри неактивных элементов полностью прозрачными.
Добавляем плавный переход для свойства opacity, чтобы изображения при переключении появлялись и исчезали плавно.
Теперь сделаем, чтобы класс away удалялся со всех изображений, когда происходит повторный клик по активному изображению.
На этом демонстрация завершена.
