Главная > CSS/Style Sheets > Руководство по применению маски CSS: вращающаяся галерея изображений

Руководство по применению маски CSS: вращающаяся галерея изображений


19 апреля 2012, 15:15. Разместил: Design FactoRy
Мы стараемся разрабатывать новые параметры масок на CSS, которые вы сможете использовать позже в своих проектах. С помощью CSS-маски вы можете маскировать или скреплять любой элемент любой страницы. Маска может быть как PNG-изображением, так и SVG-изображением. Мы соединили его с CSS-параметрами переходов и трансформаций, и получили привлекательный концепт галереи изображений.

Руководство по применению маски CSS: вращающаяся галерея изображений

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

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

HTML-код

<div id="gallery">
<div id="gallery-wheel">
<img class="active" src="pic1.png" alt="" />
<img src="pic2.png" alt="" />
<img src="pic3.png" alt="" />
<img src="pic4.png" alt="" />
<img src="pic5.png" alt="" />
<img src="pic6.png" alt="" />
</div>
</div>

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

Маска

<svg xmlns="http://www.w3.org/2000/svg" width="300" height="300">
<path d="M150,300 L25,83 A250,250 0 0,1 275,83 z"/>
</svg>

SVG-маска сохранена в отдельный .svg-файл, размер был подобран специально, чтобы быть идентичным размеру изображений, которые мы используем.

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

Почему вместо PNG мы выбираем SVG?

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

И что делать, если вам понадобится полноценная динамическая галерея? Бывают случаи, когда вы заранее не можете знать, сколько изображений будет в галерее. Наша SVG-маска может быть без труда создана и использована за счет DOM на коде javascript. Здесь мы сможем указать необходимое число изображений.

На данный момент единственный браузер, который поддерживает встроенные или строчные SVG-изображения и CSS-маски, это Firefox, который, как уже было сказано ранее, не может корректно вращать маскированные изображения.

CSS-код

#gallery {
margin: 0 auto;
position: relative;
background: white;
width: 520px;
height: 520px;
border-radius: 50%;
border: 5px solid white;
}

#gallery-wheel {
position: relative;
width: 100%;
height: 100%;
}

#gallery-wheel img {
position: absolute;
-webkit-mask-box-image: url("../mask.svg") round;
-webkit-transform-origin: 50% 100%;
padding: 5px;
top: 0;
margin-top: -50px;
left: 50%;
margin-left: -155px;
cursor: pointer;
}
#gallery-wheel img:hover { opacity: 0.5; }

#gallery-wheel img:nth-child(2) { -webkit-transform: rotate(60deg); }
#gallery-wheel img:nth-child(3) { -webkit-transform: rotate(120deg); }
#gallery-wheel img:nth-child(4) { -webkit-transform: rotate(180deg); }
#gallery-wheel img:nth-child(5) { -webkit-transform: rotate(240deg); }
#gallery-wheel img:nth-child(6) { -webkit-transform: rotate(300deg); }

#gallery-center {
position: absolute;
background-image: url("../pic1.png");
background-position: center;
top: 50%;
left: 50%;
margin-left: -160px;
margin-top: -160px;
width: 300px;
height: 300px;
border-radius: 50%;
border: 10px solid white;
}

.fade-overlay {
position: absolute;
background-position: center;
opacity: 0.0;
width: 100%;
height: 100%;
border-radius: 50%;
}

Все это оформлено простенькими стилями, поэтому давайте рассмотрим CSS-маску и области с трансформациями, которые мы выделяли ранее.

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

Следующая строка, -webkit-transform-origin: 50% 100%, устанавливает точку вращения в нижней центральной части CSS-маски. Это получится как раз центр окружной галереи.

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

Класс fade-overlay используется при помощи кода javascript, который мы объясним позже.

javascript-код

$(document).ready(init);

var galleryWheel;
var galleryCenter;
var galleryItems;
var animating;

function init() {
galleryWheel = $("#gallery-wheel");
galleryCenter = $("#gallery-center");
galleryItems = $("#gallery img");

galleryItems.click(clickImage);
}

function clickImage(e) {
var target = $(e.target);
if (!target.hasClass("active") && !animating) {
animating = true;
var activeElement = galleryWheel.find(".active");

// Calculate the number of elements between the active (top) image and the clicked
// one, and multiply that by the inner angle that each slice has.
var rotateBy = -360/galleryItems.length * (target.index() - activeElement.index());

// Make sure the shortest path is taken, the maximum length the wheel should spin
// is 180 degrees.
if (rotateBy >= 180) {
rotateBy -= 360;
} else if(rotateBy < -180) {
rotateBy += 360;
}

// Create a temporary overlay element that fades in over the center image.
// When the opacity is full, change the image of the center element behind,
// and remove the overlay.
$('<div class="fade-overlay">')
.css("backgroundImage", "url(" + target.attr("src") + ")")
.appendTo(galleryCenter).animate({opacity: 1.0}, 500, function() {
galleryCenter.css("backgroundImage", "url(" + target.attr("src") + ")");
$(this).remove();
});

activeElement.removeClass("active");
target.addClass("active");

galleryWheel.animate({rotate: "+=" + rotateBy + 'deg'}, 500, function() { animating = false; } );
}
}

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

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

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

Заключение

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

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

Данная галерея получилась с небольшими хитростями и недостатками, и мы сомневаемся, что ее много где можно будет использовать. Целью данного руководства, на самом деле, было показать возможности современных параметров CSS. Вероятно, у вас, посредством данной техники, получится разработать собственное превосходное меню. Хотя, учитывая сегодняшний уровень поддержки новых параметров современными браузерами, пока что временно можно забыть обо всех этих трюках. В любом случае, мы надеемся, что кто-либо вынес нечто полезное для себя из нашей сегодняшней статьи.

Ниже мы привели ссылку на итоговое демо нашей круговой галереи. Учтите, что она будет работать только в Chrome и последних выпусках браузеров семейства Webkit. Хотелось бы добавить в этот список и Firefox, но для начала разработчикам придется исправить нестыковку с поддержкой перевернутых масок.

* Смотреть демо
Вернуться назад