Основные

Особенности

На этой странице реализовал некоторые решения, которые в той или иной вариации подойдут для множества задач верстки. Акцент сделан на JS-решениях. Поскольку не дизайнер и нет цели показать мои способности в дизайнерской фантазии, то выполнено условно схематично.

В каждой карточке можно размещать множество слайдеров, например, для разных вариантов одного товара
Цвет каждого переключателя можно задавать отдельно через специальный произвольный атрибут
При наведении на слайдер появляется облако курсора мыши, которое передвигается за ним даже при перетаскивании изображения
Кнопки навигации меняют свой вид при приближении к ним курсора и возвращаются в исходное состояние при его отдалении
Попап по двойному клику на слайдер с большим изображением, кроме области кнопок навигации, только на изображении
На мобильных устройствах при альбомной ориентации попап не запускается, вместо этого карточки расширяются, так что он просто не нужен

Работа попапа продемонстрирована на примере слайдера и срабатывает по двойному клику на слайдер с большим изображением
При появлении задний фон блокируется
Открывается на том изображении, на котором был вызван
Закрывается по клику за пределами тела попапа, по специальной кнопке внутри тела попапа и кнопкой ESC
После закрытия слайдер попапа очищается и готов к новому применению

По нажатию на кнопки меню происходит переход к соответствующему блоку
Во время перехода или при простом скролле страницы, по изменению цвета пункта меню можно определить, какой блок сейчас мы видим
Можно регулировать скорость перехода индивидуально для каждого блока

Плавно открываются
Плавно закрываются )))
Закрываются по нажатию по шапке и за пределами блока спойлеров
Разные варианты индикаторов открытия и закрытия

Эффект параллакса фонового изображения при скролле
Эффект параллакса при движении мышкой
Параллакс элементов блока

Используются единицы измерения em и rem
Меню хедера разное, в зависимости от того, какое устройство: тачскрин или обычный ПК
На небольших мобильных устройствах при альбомной ориентации попап не запускается, вместо этого карточки расширяются, так что он просто не нужен
Стрелки слайдеров разные, в зависимости от того, какое устройство: тачскрин или обычный ПК

Карточки с несколькими слайдерами

Параллакс Фон

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Praesentium minima recusandae velit? Exercitationem sequi et voluptate, iusto, repellendus nihil hic corrupti molestiae velit, dolorem animi accusantium consequatur culpa aut nisi.

Спойлеры

Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum pariatur voluptatibus, temporibus velit nulla earum fugiat, autem obcaecati laudantium, dignissimos corporis! Praesentium eveniet at optio omnis eius cupiditate repudiandae ea.

Особенности

Карточки с несколькими слайдерами

Параллакс Фон

Спойлеры

Обычный параллакс