- PVSM.RU - https://www.pvsm.ru -

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

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

Подписи

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

On-hover галереи

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

On-click галереи

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

Flexbox-галереи

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

Лайтбоксы

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Автор: Irina_Ua

Источник [49]

Сайт-источник PVSM.RU: https://www.pvsm.ru

Путь до страницы источника: https://www.pvsm.ru/javascript/85056

Ссылки в тексте:

[1] demosthenes.info/: http://demosthenes.info/

[2] Создание подписей с помощью CSS-переходов: http://demosthenes.info/blog/448/HTML5-Image-Captions-With-CSS-Transition-Effects

[3] 3D-«домино» с подписью: http://demosthenes.info/blog/830/CSS-3D-Captioned-Domino-Image

[4] Анимированная вставка подписи с фильтрацией фона: http://demosthenes.info/blog/665/Animated-Inset-Captions-With-Filtered-Backgrounds

[5] Появляющаяся подпись с фильтрацией и использованием свойства clip: http://demosthenes.info/blog/674/Filtered-HTML5-Image-Caption-With-Dynamic-Clip

[6] Появление различных подписей при наведении на разные части одного изображения: http://demosthenes.info/blog/639/Hover-Effect-on-Images-From-Different-Directions-Using-Pure-CSS

[7] Простая галерея на CSS: http://demosthenes.info/blog/58/Simple-CSS-Roll-over-Image-Gallery

[8] Анимированная галерея со слайд-шоу и эффектом затенения на CSS3 : http://demosthenes.info/blog/288/CSS3-Animated-Image-Galleries-Cross-fade-and-Slideshow-Effects

[9] Простая галерея с эффектом веера на CSS: http://demosthenes.info/blog/425/Card-Fan-CSS3-Gallery-Reveal-In-Four-Lines-of-Code

[10] Разворачивающиеся миниатюры с использованием свойства object-fit: http://demosthenes.info/blog/968/A-CSS-Object-Fit-Gallery

[11] Анимированная галерея с постоянным (изображение, развернутая версия которого, открывается при загрузке страницы) изображением: http://demosthenes.info/blog/643/Create-A-CSS3-Animated-Gallery-With-Persistent-Images

[12] Галерея с постоянным изображением. Часть 2: http://demosthenes.info/blog/647/CSS-Animated-Gallery-With-Persistent-Images-Part-Two

[13] Простая галерея на PHP: http://demosthenes.info/blog/196/A-Simple-PHP-Image-Gallery

[14] Еще одна простенькая галерея: http://demosthenes.info/blog/959/An-Accessible-Image-Gallery-With-Progressive-JavaScript

[15] Галерея с четырьмя блоками : http://demosthenes.info/blog/846/Quad-Image-Gallery

[16] Отзывчивая галерея на основе Flexbox: http://demosthenes.info/blog/891/Crafting-Better-Responsive-Image-Galleries-With-Flexbox

[17] Современная плитка с Flexbox: http://demosthenes.info/blog/929/Modern-Masonry-with-Flexbox-and-JavaScript

[18] Лайтбокс на чистом CSS: http://demosthenes.info/blog/563/Lightbox-Image-Gallery-In-Pure-CSS

[19] Лайтбокс в 12 строк JS: http://demosthenes.info/blog/962/A-HTML5-Lightbox-in-12-Lines-of-JS

[20] Анимированный слайдер: http://demosthenes.info/blog/495/Make-A-CSS3-Animated-Image-Slider

[21] Отзывчивый слайдер: http://demosthenes.info/blog/627/Make-A-Responsive-CSS3-Image-Slider

[22] Отзывчивый слайдер с подписями: http://demosthenes.info/blog/831/HTML5-Responsive-Image-Slider-With-Captions

[23] CSSslidy: генерирующийся отзывчивый слайдер: http://demosthenes.info/blog/838/CSSslidy-An-Auto-Generated-Responsive-CSS3-Image-Slider

[24] CSSslidy 2.0: http://demosthenes.info/blog/871/CSS-Slidy-20-Captions--more

[25] Оригами: CSS3D складывающаяся галерея: http://demosthenes.info/blog/671/Origami-A-CSS-3D-Foldout-Image-Gallery

[26] ImgDex: галлерея на HTML5 имитирующая вращающийся каталог с карточками: http://demosthenes.info/blog/655/ImgDex-An-HTML5-Rolodex-Style-3D-Image-Gallery

[27] Простая 3D карусель на CSS: http://demosthenes.info/blog/690/Simple-CSS-3D-Carousel-Gallery

[28] Продвинутая 3D карусель на CSS: http://demosthenes.info/blog/736/Advanced-CSS-3D-Carousel

[29] Вращающиеся изображения с динамическими тенями: http://demosthenes.info/blog/726/CSS-3D-Image-Flip-Gallery-With-Dynamic-Shadows

[30] Автофильтрация галереи: http://demosthenes.info/blog/843/An-Auto-Filter-Image-Gallery

[31] Визуальная база данных на чистом CSS: http://demosthenes.info/blog/625/A-Visual-Database-Gallery-In-Pure-CSS

[32] Сортировка изображений с помощью JS: http://demosthenes.info/blog/905/Sorting-Page-Content-With-JavaScript

[33] Flexbox и фильтрация: http://demosthenes.info/blog/945/Filtered-Flexbox-A-Dynamic-Image-Gallery

[34] «До и после», преобразование изображений: http://demosthenes.info/blog/819/A-Before-And-After-Image-Comparison-Slide-Control-in-HTML5

[35] «До и после» для мобильных сайтов: http://demosthenes.info/blog/842/A-Mobile-Ready-Before-And-After-Image-Comparison-UI

[36] Pinterest-Style макет на чистом CSS: http://demosthenes.info/blog/825/Pinterest-Style-Column-Layout-In-Pure-CSS

[37] Простая плитка с Flexbox: http://demosthenes.info/blog/844/Easy-Masonry-Layout-With-Flexbox

[38] Простая отзывчивая сетка с Flexbox: http://demosthenes.info/blog/854/Easy-Responsive-Grid-Layout-With-Flexbox

[39] Рандомизация с помощью Flexbox и JS: http://demosthenes.info/blog/926/Random-Images-With-Flexbox-amp-JavaScript

[40] Рандомизация с помощью PHP: http://demosthenes.info/blog/205/Generate-random-images-with-PHP

[41] эффекта Кена Бернса: http://en.wikipedia.org/wiki/Ken_Burns_effect

[42] Случайный эффект Кена Бернса : http://demosthenes.info/blog/761/Create-A-Random-Ken-Burns-Effect-For-Images-With-CSS-amp-JavaScript

[43] BurnsBox: http://demosthenes.info/blog/965/BurnsBox-Beta-A-Simple-HTML5-Multimedia-Presentation-App

[44] С помощью JQuery и CSS: http://demosthenes.info/blog/630/Fade-In-Elements-Sequentially-With-JQuery-and-CSS

[45] С помощью JS и CSS: http://demosthenes.info/blog/841/Create-a-Sequential-Image-Fade-In-With-JavaScript-and-CSS

[46] Автогенерация подписей на основе названия файла: http://demosthenes.info/blog/409/Automatic-Captioning-of-Portfolio-Images-with-Filenames

[47] Автогенерация подписей с помощью GET: http://demosthenes.info/blog/404/Captioning-of-Portfolio-Images-With-GET

[48] Автогенерация подписей с помощью JS: http://demosthenes.info/blog/834/Auto-Generate-Image-Captions-With-Progressive-JavaScript

[49] Источник: http://habrahabr.ru/post/252397/