Guidance on the use of masks CSS: rotating image gallery

We try to develop new options of masks in CSS, you can use later in their projects. With CSS-masks, you can mask or attach any item of any page. The mask can be either a PNG-image, and SVG-image. We combined it with the CSS-parameters of transitions and transformations, and have an attractive concept image gallery.

We combined the demo for Chrome and the latest versions of browsers family Webkit. Firefox also supports a CSS mask, but is unlikely to correctly display rotating images masked, and therefore we used in the demo browser prefix-webkit.

Let's take a closer look at all the stages of our development of a slider, and start with HTML.

HTML-code

<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>

The structure is quite clear. We have a shell, containing a rotating outer wheel and the central part, which remains stationary. The images were picked up in the service Dribbble .

Mask

<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-mask is stored in a separate. Svg-file size was chosen specifically to be identical to the size of the images that we use.

Since the wheel we have 6 images, our mask will be the 6th in the wheel. We implement this by using the tag «path» to svg. The form of the path attribute is defined by d, which requires some options. Let us not go into details about the value of each option, just know that here we have obtained the segment, which occupies 60 ° of the circle with a radius of 250 pixels. In this article, the process is well described by the notation "pie slices" in SVG-images.

Why did we choose instead of PNG SVG?

You probably think that it would be much easier to draw an image in the editor, save it in PNG-format and use a mask instead of CSS. Perhaps this is because in reality, but what if you want to quickly change the number of images in a circle? What if we want to make the 12 images? We have to re-open the image editor and create a new PNG-file. After all, it's much more painful than just changing some settings in the SVG.

And what if you need a full-fledged dynamic gallery? There are times when you can not know in advance how many images will be in the gallery. Our SVG-mask can be easily created and used by the DOM code javascript. Here we can specify the required number of images.

Currently the only browser that supports embedded or small SVG-images and CSS-masks, it is Firefox, which, as mentioned earlier, can not properly rotate the masked image.

CSS-code

#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%;
}

All styles are decorated simple, so let's look at CSS-mask and the field of transformations, which we isolated previously.

The rule-webkit-mask-box-image: url (.. / Mask.svg) 19 line sets the mask on the CSS-SVG-file that we created, stretching it over the image.

The next line,-webkit-transform-origin: 50% 100% sets a rotation in the lower central part of the CSS-masks. It will turn out just the center of the gallery district.

Lines 30 and 34 rotate the remaining five images in a circle. Each image, we added 60 degrees of rotation. This will help us fill the entire circumference of the individual "slices."

Class fade-overlay is used by code javascript, which we will explain later.

javascript-code

$(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 clicked the
      / / one, and multiply That by the inner angle That Has Each slice.
      var rotateBy = - 360 / galleryItems.length * (target.index () - activeElement.index ());

      / / Make sure the Shortest path is Taken, the length Maximum Spin the Wheel Should
      / / 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,
      / / Remove and the overlay.
      $ ( '<div class = "fade-overlay '>' )
          . CSS ( "backgroundImage" , "url (" + target.attr ( "src" ) + ")" )target.attr ( "src" ) + ")" );
                   $ ( this ). Remove ();
               });

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

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

In order to make our gallery rotated in accordance with the manipulation of users, we use jQuery with plugin jQuery 2D Transformation of Kanlayna Grady (Grady Kuhnline).

When the user clicks on the image in a circle, we calculate the distance in degrees to the next image. We can be sure that the circle will always rotate as fast as possible through to the new position. This is accomplished by limiting the rotation values ​​between -180 and 180 degrees.

When the circle is rotated to a new position, gradually acquiring a new image. Since we can not darken the background image on the individual elements, we need to impose a temporary element in the center of the circle. When the image has a temporary full-density maps, we switch the image to be the central element and remove overlapping items. This creates the illusion of infinite transition between the background images.

Conclusion

The end result can be annoying by the fact that the bounding box overlaps the image of the central events when the mouse cursor on the image beneath it.

Also worth noting is the fact that the guidance on the central part can also confuse you as well as areas that respond to hover over the images overlap slightly incorrect way.

This gallery has turned out with a few tricks and disadvantages, and we doubt that in many places it can be used. The purpose of this guide, in fact, was to show the capabilities of today's options CSS. You probably have, through this technology, it will develop its own excellent menu. Although, given the current level of support for new options with modern browsers, so far you can temporarily forget about all these tricks. In any event, we hope that someone made something useful for ourselves in our today's article.

We've included a link to the final round of our demo gallery. Keep in mind that it will only work in Chrome browser and the latest editions of the family of Webkit. I would like to add to this list and Firefox, but developers will have to start to fix inconsistency with the support of the inverted mask. *

See the demo