ВёрсткаHTML, SCSS и Gulp · 2023
Первозданная Россия
Сайт Общероссийского фестиваля природы: самая большая в Европе выставка фотографий дикой природы, лекции, кино и детская программа
Я сверстал десять страниц по готовому дизайну: главную с видоискателем, программу, покупку билета в три шага, магазин альбомов, корзину и заказ. Потом по этой вёрстке сайт собрали на 1С-Битрикс, и он до сих пор работает: сейчас на нём анонс XIII фестиваля.
- 10
- страниц: от главной до оформления заказа
- 29
- компонентов, у каждого свой файл стилей
- 3
- шага покупки билета: дата, время, вид
- 13
- номер фестиваля, который сейчас анонсирует сайт на этой вёрстке
Первый экран
Сайт смотрит на природу через видоискатель
Поверх слайдов лежит интерфейс камеры: шкала экспозиции, уровни звука, сетка, рамка фокуса, гистограмма. При смене слайда экран на миг гаснет, как при спуске затвора, рамка вспыхивает и звучит щелчок. При первом входе из кадра уходит фотограф, и становится видно, что он снимал.
Эффект не вмешивается в слайдер: MutationObserver следит за классами слайдов и запускает затвор, когда Swiper меняет активный слайд. Поэтому слайдер можно было заменить или обновить, не трогая эффект.
// js/promo.js, упрощённо
const observer = new MutationObserver(() => {
sound.play()
flash.classList.add('active')
viewfinder.classList.add('active')
setTimeout(() => flash.classList.remove('active'), 1100)
setTimeout(() => viewfinder.classList.remove('active'), 1500)
})
slides.forEach(slide => observer.observe(slide, { attributeFilter: ['class'] }))Программа
Неделя фестиваля на одной ленте
Дни идут лентой, которую можно тянуть мышью или пальцем. У каждого дня своя тема и организатор, события фильтруются по площадкам. Ниже интерфейс вёрстки в работе: выберите день и площадку. События условные, интерфейс как на сайте.
Тема дняЗаповедная наука27 марта, понедельник
- 11:00–11:30
#Главная_сценаОткрытие дняВедущие рассказывают, что ждёт гостей сегодня, и представляют авторов выставки. - 11:30–12:15
#Малый_лекторийПрирода всех объединитЧтения, викторина о природе и конкурс детских рисунков «Мы рисуем птиц». - 12:30–13:30
#Малый_лекторийВолшебный арктический калейдоскопМузыкальная экологическая постановка для детей. - 13:00–14:00
#Зона_мастер-классовМакросъёмка без штативаМастер-класс фотографа: свет, фокус и терпение. - 14:30–16:00#Кинозал_фестиваляДокументальный фильм о КомандорахПоказ и разговор с авторами фильма.
- 16:30–17:15#ЭкскурсииЭкскурсия по выставкеАвторы снимков ведут по залам и рассказывают истории кадров.
На этой площадке сегодня событий нет. Выберите другую.
Билет
Билет в три шага, корзина в шапке
Дата, время, вид билета: каждый шаг открывается после предыдущего, а выбранное сразу видно в шапке сайта. Цены и варианты взяты из вёрстки 2023 года. Попробуйте купить билет.
Шаг 1 из 3Выберите дату
Шаг 2 из 3Время посещения
Шаг 3 из 3Вид билета
ПолныйПосещение фестиваля для одного человека.
450 .-ЛьготныйДля льготных категорий по условиям посещения.
250 .-СемейныйДвое взрослых и двое детей до 17 лет.
1 200 .-Полный + альбомБилет и альбом избранных фотографий фестиваля.
1 500 .-
Корзина
Страницы
Десять страниц, одна система
Тёмный фон, большая фотография наверху каждой страницы с подписью автора, красные кнопки, синий цвет выбора. Страницы собраны из общих блоков, поэтому магазин и программа выглядят частью одного сайта.
Слайдер с видоискателем и затвором, программа на неделю, фотогалерея, новости, архив фестивалей и подписка.
История фестиваля, большие снимки с подписью автора и блоки о программе.
Лента дней с перетаскиванием, тема дня, фильтр по площадкам и карточки событий.
Покупка в три шага: дата, время, вид билета. Билет сразу попадает в корзину в шапке.
Альбомы лучших снимков с доставкой по России и СНГ.
Карточка альбома: галерея, характеристики, цена и покупка.
Билеты и альбомы в одной корзине, с количеством и суммой по строкам.
Оформление: контакты с маской телефона и способ получения.
Новости и пресс-релизы карточками.
Адрес, телефон, почта и карта.
Как сделано
Каждая страница тянет только свои стили
Сборка на Gulp. Шапка, подвал и общие части подключаются в страницы как фрагменты, SCSS разложен по компонентам. В начале каждой страницы перечислены нужные ей компоненты, и в head попадают только их стили. Главной нужны десять компонентов, корзине несколько.
Библиотеки собираются в отдельные libs.css и libs.js: Swiper и Slick для слайдеров, Fancybox для фото, маска телефона, блокировка прокрутки под меню, GSAP для анимаций.
<!-- src/index.html -->
@@include('inc/doc-start.html', {
"title": "Fotocult",
"components_css": {
"header": "css/components/header.css",
"promo": "css/components/promo.css",
"program": "css/components/program.css",
"gallery": "css/components/gallery.css",
…
}
})- src/*.html + inc/страницы и общие фрагменты
- scss/components/29 компонентов, по файлу на блок
- gulpfile-include, Sass, Autoprefixer, Babel, Terser
- docs/готовая вёрстка для переноса на CMS
Сайт сейчас
Вёрстка 2023 года, фестиваль 2026-го
Сайт собрали на 1С-Битрикс по этой вёрстке, CMS подключал не я. Классы блоков и эффект видоискателя на живом сайте те же. Потяните ползунок: слева вёрстка с анонсом IX фестиваля, справа fotocult.ru с анонсом XIII в октябре 2026.
Что я вынес из проекта
Сайт фестиваля: fotocult.ru. Фотографии на этой странице взяты из вёрстки сайта фестиваля.
- Вёрстка живёт дольше дизайна недели.Если блоки независимы, по ним годами собирают новые анонсы, не трогая разметку.
- Эффект отдельно от библиотеки.Затвор подписан на изменения слайдов, а не встроен в слайдер, поэтому его не сломает обновление.
- Стили по требованию.Когда каждая страница перечисляет свои компоненты, CMS-разработчику сразу видно, что откуда берётся.
Давайте знакомиться
Хорошие проекты
начинаются
с разговора.
Нужен технический партнёр, помощь команде или решение для рабочего процесса? Расскажите, что хотите изменить — обсудим, чем я могу помочь.
@work_ilyaЛично мне в Telegram