1. Basic Concepts

Refreshing QQ space dynamic, found an advertisement, with the user sliding up and down dynamic list, it will automatically switch the advertising picture, such effect on the mobile terminal is not small screen, is undoubtedly a very subtle consideration, how to achieve such effect?

You can click here: QQ space advertising demo

Next, let’s talk about how to achieve this effect:

  1. Stack the two pictures together relative to the picture container by positioning;
  2. Select a circle center in the upper left or lower right corner of the picture container, draw a circle, increasing the radius of the circle to display the second picture;
  3. When pulling up and down, the radius of the circle is dynamically changed according to the sliding speed;
  4. When the distance between the image container and the top or bottom of the screen is 0, the stacking sequence and center position of the image will be changed accordingly.

Why does drawing a circle on an image show the second image? Today, clip-path is the main character of the world.

The clip-path attribute creates a clipping region where only part of the element can be displayed. The part inside the region is displayed, and the part outside the region is hidden. Clipping areas are referred to inline URL defined paths or external SVG paths, or as a shape such as circle(). The clip-path property replaces the now deprecated clip-path property.

Clip-path means clipping a path, clipping a portion of the area that needs to be reserved by specifying a closed path or shape, even the shape defined by the clipPath tag in SVG, so that the layout of a web page can be varied.

Before clip-path, the clipping property in CSS2.1 also had the effect of clipping, but it only supported rectangles and only applied to positions: Absolute or position:fixed.

clip: rect(60px, 60px, 60px, 60px); Clip: rect(60px 60px 60px 60px 60px); // Compatible with Internet Explorer and FirefoxCopy the code

Note: Rect parameters are in the order of top, right, botton, and left

All major browsers support the clip property, and it still has a place in CSS Sprite displays. However, due to the limitations of the clip property, it has been replaced by clip-path. In normal development, we can use attributes like border and border-radius to create simple patterns such as triangles, circles and rounded rectangles. Clip-path gives us more possibilities to create interesting patterns using SVG’s path, animate and other tags.

Second, usage practice

The clip-path property can crop many shapes, circle, Ellipse, polygon, inset, as well as animation and SVG clipPath tags.

  • Circle circle
clip-path: circle(25% at 50% 50%);
Copy the code
  • Ellipse of the ellipse
clip-path: ellipse(25% 25% at 50% 50%);
Copy the code
  • inset
clip-path: inset(35% 35% 35% 35% round 0 70% 0 70%);
Copy the code
  • Polygon polygon
clip-path: polygon(50% 0, 25% 50% ,75% 50%);
Copy the code

You can click here: clip-path for demo

  • url
<section class="container">
  <img src="img01.jpg" class="contract">
  <img src="img02.jpg">
</section>
<svg height="0" width="0">
  <clipPath id="clip02">
    <circle cx="400" cy="210" r="0">
      <animate
        attributeType="CSS"
        attributeName="r"
        values="0; 480; 0"
        dur="9s"
        repeatCount="2"
      />
    </circle>
  </clipPath>
</svg>
Copy the code
.contract {
  clip-path: url(#clip02);
  z-index:1;
}
Copy the code

The SVG clipPath tag wraps around animate, where an attributeName sets the radius of the circle, values sets the frame of the animation, and dur sets the duration of the animation. RepeatCount refers to the number of times the animation is performed.

compatibility

Neither IE nor Edge currently supports this property. Firefox only partially supports clip-path, and partially supports SVG syntax that only supports shapes and urls (#path) inlining. Chrome, Safari, and Opera require compatibility with this property using the -webkit- prefix. External SVG shapes are not supported. For more compatibility information, click here to view the clip-Path browser compatibility.

Third, experience summary

Using the URL(#path) inline SVG, we can easily trim out complex shapes and include some vivid animations, such as a fan mask on the countdown to poker bets, or a rectangle edge with countdown progress, loading animation, etc. The clip-path property can be skillfully implemented, and the relative units can be flexibly used when the clip-path property can be used to crop graphs.

4. Reference links

  • clip-path

  • species-in-pieces

  • CSS3/SVG clip-path Overview of path clipping mask properties

    Pay attention to wechat public number: KnownsecFED, code to get more quality dry goods!