Дадли Стори, автор «Pro CSS3 Animation», представил подборку своих статей с сайта demosthenes.info/ о галереях на сайтах и всем, что с ними связано. Решения используют HTML, CSS и PHP в различных комбинациях, текст статей на английском языке. В начале каждой статьи представлена демонстрация эффекта, о котором говорит автор.
Подписи
Анимированные подписи с фильтрами и трансформацией:
- Создание подписей с помощью CSS-переходов
- 3D-«домино» с подписью
- Анимированная вставка подписи с фильтрацией фона
- Появляющаяся подпись с фильтрацией и использованием свойства clip
- Появление различных подписей при наведении на разные части одного изображения
On-hover галереи
Галереи изображений с большими изображениями, раскрывающимися по наведению/касанию на миниатюру. По сути, простейшие типы галерей.
- Простая галерея на CSS
- Анимированная галерея со слайд-шоу и эффектом затенения на CSS3
- Простая галерея с эффектом веера на CSS
- Разворачивающиеся миниатюры с использованием свойства object-fit
On-click галереи
Галереи изображений с большими изображениями, раскрывающимися по клику по на миниатюре.
- Анимированная галерея с постоянным (изображение, развернутая версия которого, открывается при загрузке страницы) изображением
- Галерея с постоянным изображением. Часть 2
- Простая галерея на PHP
- Еще одна простенькая галерея
- Галерея с четырьмя блоками
Flexbox-галереи
Галереи, которые используют элемент Flexbox
Лайтбоксы
Галереи с изображениями, отображение полного размера которых ограничивает функционал страницы.
Слайдеры и карусели
- Анимированный слайдер
- Отзывчивый слайдер
- Отзывчивый слайдер с подписями
- CSSslidy: генерирующийся отзывчивый слайдер
- CSSslidy 2.0
3D галереи и эффекты
- Оригами: CSS3D складывающаяся галерея
- ImgDex: галлерея на HTML5 имитирующая вращающийся каталог с карточками
- Простая 3D карусель на CSS
- Продвинутая 3D карусель на CSS
- Вращающиеся изображения с динамическими тенями
Фильтры содержимого
Удобные для пользователя фильтрация и сортировка картинок
- Автофильтрация галереи
- Визуальная база данных на чистом CSS
- Сортировка изображений с помощью JS
- Flexbox и фильтрация
Изменение изображений
Техника для создания простых вариантов «до и после» для демонстрации исходника и результата работы.
Сеточные системы
Решения для отображения изображений в виде сетки
Рандомизация изображений
Изображения, которые появляются в случайном порядке при каждой загрузке страницы.
Использование эффекта Кена Бернса
Полноразмерные изображения, которые приближаются с помощью зума, останавливаются и исчезают.
Последовательное появление
Решения для организации появления изображений одного за другим
Генерация подписей
Автоматическая генерация подписей к изображениям с использование JavaScript & PHP.
- Автогенерация подписей на основе названия файла
- Автогенерация подписей с помощью GET
- Автогенерация подписей с помощью JS
Автор: Irina_Ua
