Когда садишься создавать что-то новое для своего сайта, то задумываешься над вопросом, как бы в этот раз удивить посетителей, заворожить взгляд чем то новым и оригинальным. В данном моменте речь пойдет о галереи картинок, ведь их всегда достаточно много на сайте, и необходимо их красиво оформить, чтобы они придавали сайту единства. В данном уроке мы рассмотрим нечто новый подход к оформлении галереи, а именно создания круглой галереи используя при этом маски css.

С помощью таких масок и будет организована данная галерея. Мы совместили демо для Chrome и свежих версий браузеров семейства Webkit. Firefox также поддерживает параметр CSS mask, но вряд ли будет корректно отображать вращающиеся маскированные изображения, и поэтому в демо мы применили браузерный префикс –webkit.

Шаг 1. HTML

Давайте подробнее рассмотрим все этапы разработки нашего слайдера, а начнем с разметки HTML.

Структура вполне ясна. У нас есть оболочка, содержащая вращающееся внешнее колесо, а также центральная часть, которая остается неподвижной. Изображения были подобраны в сервисе Dribbble. Теперь рассмотрим построение маски:

SVG-маска сохранена в отдельный .svg-файл, размер был подобран специально, чтобы быть идентичным размеру изображений, которые мы используем. Так как в колесе у нас 6 изображений, наша маска будет 6-й в колесе. Мы реализуем это за счет применения тэга «path» для svg. Форма пути определяется атрибутом d, который требует некоторые опции. Давайте мы не будем вдаваться в подробности относительно значения каждого параметра, просто знайте, что здесь у нас получается сегмент, занимающий 60° окружности, с радиусом в 250 пикселей.

Почему вместо PNG мы выбираем SVG? Вероятно, вам кажется, что гораздо проще было бы нарисовать нужное изображение в редакторе, сохранить его в PNG-формат, и использовать вместо маски CSS. Может быть, это и так на самом деле, но что если вам захочется быстро изменить число изображений в окружности? Что если нам захочется сделать 12 изображений? Нам придется снова открывать редактор изображений и создавать новый PNG-файл. Ведь это гораздо мучительнее, чем просто изменить некоторые параметры в SVG.

Шаг 2. CSS

Все это оформлено простенькими стилями, поэтому давайте рассмотрим CSS-маску и области с трансформациями, которые мы выделяли ранее. Правило -webkit-mask-box-image: url(../mask.svg) на 19 строке устанавливает CSS-маску на SVG-файл, который мы создали, растягивая её по всему изображению.

Строки 30 и 34 вращают 5 остальных изображений в окружности. Каждому изображению мы добавили 60 градусов к вращению. Это поможет нам заполнить всю окружность отдельными «кусочками». Класс fade-overlay используется при помощи кода javascript, который мы объясним позже.

Шаг 3. JavaScript

Для того чтобы сделать так, чтобы наша галерея вращалась в соответствии с манипуляциями пользователей, мы используем jQuery с плагином jQuery 2D Transformation от Грэди Канлайна (Grady Kuhnline). Когда пользователь кликает по изображению в окружности, мы подсчитываем расстояние в градусах до следующего изображения. Мы можем быть уверенными в том, что окружность всегда будет вращаться максимально быстрым путем до новой позиции. Это реализуется за счет ограничения значения вращения между -180 и 180 градусами.

Когда окружность вращается к новой позиции, постепенно появляется новое изображение. Так как мы не можем затемнять фоновые изображения на отдельных элементах, нам нужно наложить временный элемент на центр окружности. Когда временное изображение имеет полноценную плотность отображения, мы переключаем изображение подлежащего центрального элемента и удаляем наложенный элемент. Это создает иллюзию бесконечного перехода между фоновыми изображениями.

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