Большая подборка ссылок о галереях и всем, что с ними связанно

Дадли Стори, автор «Pro CSS3 Animation», представил подборку своих статей с сайта demosthenes.info о галереях на сайтах и всем, что с ними связано. Решения используют HTML, CSS и PHP в различных комбинациях, текст статей на английском языке. В начале каждой статьи представлена демонстрация эффекта, о котором говорит автор.

Подписи

Анимированные подписи с фильтрами и трансформацией:

• Создание подписей с помощью CSS-переходов
• 3D-«домино» с подписью
• Анимированная вставка подписи с фильтрацией фона
• Появляющаяся подпись с фильтрацией и использованием свойства clip
• Появление различных подписей при наведении на разные части одного изображения

On-hover галереи

Галереи изображений с большими изображениями, раскрывающимися по наведению/касанию на миниатюру. По сути, простейшие типы галерей.

• Простая галерея на CSS
• Анимированная галерея со слайд-шоу и эффектом затенения на CSS3
• Простая галерея с эффектом веера на CSS
• Разворачивающиеся миниатюры с использованием свойства object-fit

On-click галереи

Галереи изображений с большими изображениями, раскрывающимися по клику по на миниатюре.

• Анимированная галерея с постоянным (изображение, развернутая версия которого, открывается при загрузке страницы) изображением
• Галерея с постоянным изображением. Часть 2
• Простая галерея на PHP
• Еще одна простенькая галерея
• Галерея с четырьмя блоками

Flexbox-галереи

Галереи, которые используют элемент Flexbox

• Отзывчивая галерея на основе Flexbox
• Современная плитка с Flexbox

Лайтбоксы

Галереи с изображениями, отображение полного размера которых ограничивает функционал страницы.

• Лайтбокс на чистом CSS
• Лайтбокс в 12 строк JS

Слайдеры и карусели

• Анимированный слайдер
• Отзывчивый слайдер
• Отзывчивый слайдер с подписями
• CSSslidy: генерирующийся отзывчивый слайдер
• CSSslidy 2.0

3D галереи и эффекты

• Оригами: CSS3D складывающаяся галерея
• ImgDex: галлерея на HTML5 имитирующая вращающийся каталог с карточками
• Простая 3D карусель на CSS
• Продвинутая 3D карусель на CSS
• Вращающиеся изображения с динамическими тенями

Фильтры содержимого

Удобные для пользователя фильтрация и сортировка картинок

• Автофильтрация галереи
• Визуальная база данных на чистом CSS
• Сортировка изображений с помощью JS
• Flexbox и фильтрация

Изменение изображений

Техника для создания простых вариантов «до и после» для демонстрации исходника и результата работы.

• «До и после», преобразование изображений
• «До и после» для мобильных сайтов

Сеточные системы

Решения для отображения изображений в виде сетки

• Pinterest-Style макет на чистом CSS
• Простая плитка с Flexbox
• Простая отзывчивая сетка с Flexbox

Рандомизация изображений

Изображения, которые появляются в случайном порядке при каждой загрузке страницы.

• Рандомизация с помощью Flexbox и JS
• Рандомизация с помощью PHP

Использование эффекта Кена Бернса

Полноразмерные изображения, которые приближаются с помощью зума, останавливаются и исчезают.

• Случайный эффект Кена Бернса
• BurnsBox

Последовательное появление

Решения для организации появления изображений одного за другим

• С помощью JQuery и CSS
• С помощью JS и CSS

Генерация подписей

Автоматическая генерация подписей к изображениям с использование JavaScript & PHP.

• Автогенерация подписей на основе названия файла
• Автогенерация подписей с помощью GET
• Автогенерация подписей с помощью JS

Полезные решения Paysto для читателей Хабра:

→ Получите оплату банковской картой прямо сейчас. Без сайта, ИП и ООО.
→ Принимайте оплату от компаний через Интернет. Без сайта, ИП и ООО.
→ Приём платежей от компаний для Вашего сайта. С документооборотом и обменом оригиналами.
→ Автоматизация продаж и обслуживание сделок с юр.лицами. Без посредника в расчетах.