Группа из 4-х секций
Группа из 4-х секций, каждая из которых раскрывается в их контейнере
Небольшой код на JavaScript (1 кб. без сжатия), который позволяет открывать одну секцию из группы поверх остальных и выводить дополнительную информацию.
Простые решения по работе с фото, аудио и видео
Перейти в разделВыделение лиц на фотографии
Увеличение и выделение лиц и других объектов на фотографии
Решение на jQuery для выделения и увеличения объектов на фотографии при заходе на них курсора мыши или нажатии в мобильном варианте.
Данным способом можно понятно и красиво выделить людей на групповом фото или, например, отметить элементы какого-нибудь строения.
Секция-галерея на GSAP
Блок или секция с меняющимися мышкой фотографиями
Решение выполнено на JavaScript c использованием библиотеки GSAP и рассчитано на несколько фотографий.
Колода фотографий
Тасующиеся по клику фотографии как колода карт
Решение выполнено на jQuery, и может работать на всех экранах и с любым количеством фотографий
Вертикальный аккордеон для фотографий
Вертикальный аккордеон с раскрывающимися по клику фотографиями
Для реализации этого аккордеона, который на малых экранах переходит в табы, используется небольшой код на JavaScript.
Замена блока на фотографию при наведении курсора
Красивая замена блока на фотографию при наведении и движении курсора мыши
Ховер-эффект реализован с использованием SVG, JS и CSS-переходов.
Перелистывающиеся страницы с фотографиями
Эффект перелистывания страниц с фотографиями на CSS
Решение сделано на чистом CSS для 5-ти страниц (фотографий)
Секция с заголовком и фотографией
Красивое оформление секции с фотографией и заголовком, который частично заполнен ей
Часть текста заголовка, наложенного на фотографию имеет заданный цвет, а выходящая за нее — её фон. Данное наложение происходит автоматически в зависимости от количества текста и размера букв, это можно проверить сузив окно браузера.
Постер из разных фотографий на CSS
Создание одного постера из 9-ти разных фотографий на примере обложки игры GTA 5
Решение выполнено с использованием css-свойств display: grid; и clip-path
