Секция-галерея на GSAP
Блок или секция с меняющимися мышкой фотографиями
Решение выполнено на JavaScript c использованием библиотеки GSAP и рассчитано на несколько фотографий.
Секция с фотографиями и раскрывающимся их описанием
Секция на три блока с фотографиями и раскрывающимся при за ходе на них курсора описанием
Изначально секция рассчитана на три блока, но по аналогии их можно легко увеличить или уменьшить.
Для плавности раскрытия описания фотографии используется коротенький JavaScript.
Блок-секция с мороженным
Анимированный фон для блока или секций с размахивающим руками мороженным
Решение выполнено с использованием SVG анимации
Секция-слайдер с четырьмя фотографиями
Секция-слайдер, в которой каждый слайд состоит из четырех фотографий.
Кроме 4-х фотографий каждый слайд имеет фоновое изображение, заголовок и описание. И все это анимируется движком anime.js
Новогодняя секция
Новогодняя блок-секция с поздравлением
Всех с наступающим Новым Годом!
В преддверии этого праздника, я собрал небольшую блок-секцию с параллакс-эффектом, падающим снегом и поздравительным текстом.
Секция с заголовком и фотографией
Красивое оформление секции с фотографией и заголовком, который частично заполнен ей
Часть текста заголовка, наложенного на фотографию имеет заданный цвет, а выходящая за нее — её фон. Данное наложение происходит автоматически в зависимости от количества текста и размера букв, это можно проверить сузив окно браузера.
Секция с овалом
Овальное разделение текста в секции от фотографии
Для создания овала используется небольшой код на JavaScript
Разделители для разноцветных секций
Сборник разделителей для перехода между секциями разного цвета.
Все примеры в данной теме представлены в виде 3-х секций, центральная из которых — темная.
Между этими секциями установлены разделители, которые украшают переход между ними .
Секция с шестиугольными фотографиями
Вариант оформления блока с шестиугольными фотографиями разного размера
Данное решение можно использовать как вспомогательный блок к какой-либо текстовой информации, или, увеличив масштаб, как самостоятельную секцию.
Также на фотографии можно установить ссылки или появляющийся поясняющий текст
