This is the fourth day of my participation in Gwen Challenge

Clip – path attribute

Clip - path attributeisClip propertiesAn upgraded version of.
Clip - path attributeUse clipping to create a displayable area for the element. The part inside the region is displayed, and the part outside the region is hidden.
Clip propertiesApplies only to elements whose position is absolute and fixed and the clipping area must be square.
The first kind of valuebasic-shapeA shape drawn by different functions.
The second category of valueclip-source 用 <url>In the manner of referenceSVG 的 <clipPath>As a clipping path.
The third type of valuegeometry-boxIt will provide the corresponding reference box for the basic shape. Use the defined box edges to include any shape of the corner (e.g., byborder-radiusDefined clipping path). This property is not supported by most browsers.

basic-shape

Inset (top, right, bottom, left, Round RADIUS) rectangle

You can pass in five parameters, one for eachtop,right,bottom,leftThe clipping position of,round radius(Optional, rounded corner).

<! DOCTYPEhtml>
<html lang="en">
  <style>
    .img {
      margin-left: 50px;
    }
    .img1 {
      clip-path: inset(10px 20px);
    }
    .img2 {
      clip-path: inset(2em 1em 30% 20%);
    }
    .img3 {
      clip-path: inset(10px 20px 10% 20% round 50px);
    }
    .img4 {
      clip-path: inset(10px 20px 10% 20% round 40%);
    }
  </style>
  <body>
    <img src="./1.jpg" />
    <img class="img1" src="./1.jpg" />
    <img class="img2" src="./1.jpg" />
    <img class="img3" src="./1.jpg" />
    <img class="img4" src="./1.jpg" />
  </body>
</html>
Copy the code

Circle circle (radius, at the position)

Two arguments are passed:

radiusThe radius of the circle. The default element width is shorter than or equal to the diameter. Percentage is supported. When you use percentageCircle radius = (SQRT (width^2+height^2)/ SQRT (2)) * percentage.Width, height,Respectively are the width and height of the cropped element.
at positionCenter position, default is element center.

<! DOCTYPEhtml>
<html lang="en">
  <style>
    .img {
      margin-left: 50px;
    }
    .img1 {
      clip-path: circle(100px);
    }
    .img2 {
      clip-path: circle(100px at 50px 100px);
    }
    .img3 {
      clip-path: circle(at center);
    }
    .img4 {
      clip-path: circle(20% at center);
    }
  </style>
  <body>
    <img src="./1.jpg" />
    <img class="img1" src="./1.jpg" />
    <img class="img2" src="./1.jpg" />
    <img class="img3" src="./1.jpg" />
    <img class="img4" src="./1.jpg" />
  </body>
</html>
Copy the code

Ellipse (radius-x, radius-y, at position) ellipse

Three optional parameters can be passed on:

radius-xThe X-axis radius of the ellipse, which defaults to half the width, supports percentages.
radius-yThe Y-axis radius of the ellipse, default is half of the height, percentage supported.
at positionCenter position of the ellipse. Default is the center point of the element.

<! DOCTYPEhtml>
<html lang="en">
  <style>
    .img {
      margin-left: 50px;
    }
    .img1 {
      clip-path: ellipse(50px 100px at 50% 50%);
    }
    .img2 {
      clip-path: ellipse(45% 30% at 100px 50px);
    }
    .img3 {
      clip-path: ellipse(40% 30%);
    }
    .img4 {
      clip-path: ellipse(at 50% 50%);
    }
  </style>
  <body>
    <img src="./1.jpg" />
    <img class="img1" src="./1.jpg" />
    <img class="img2" src="./1.jpg" />
    <img class="img3" src="./1.jpg" />
    <img class="img4" src="./1.jpg" />
  </body>
</html>
Copy the code

polygon( `[<fill-rule>,]? [<shape-arg> <shape-arg>]#`) a polygon

Two types of values can be passed in:

<fill-rule>Represents the fill rule (optional). That is, how to fill the polygon. Optional value isnonzero 和 evenodd. The default value isnonzero.
<shape-arg> <shape-arg>Multiple groups, each pair of arguments in the list representing the coordinates of the vertices of the polygon.

<! DOCTYPEhtml>
<html lang="en">
  <style>
    .img {
      margin-left: 50px;
    }
    .img1 {
      clip-path: polygon(0% 100%.50% 0%.100% 100%);
    }
    .img2 {
      clip-path: polygon(5% 5%.100% 0%.100% 75%.75% 75%.75% 100%.50% 75%.0% 75%);
    }
    .img3 {
      clip-path: polygon(0% 38.31%.50% 0%.100% 38.31%.80.86% 100%.19.14% 100%);
    }
    .img4 {
      clip-path: polygon(50% 0.65% 40%.100% 40%.72% 60%.85% 100%.50% 75%.15% 100%.28% 60%.0 40%.35% 40%);
    }
  </style>
  <body>
    <img src="./1.jpg" />
    <img class="img1" src="./1.jpg" />
    <img class="img2" src="./1.jpg" />
    <img class="img3" src="./1.jpg" />
    <img class="img4" src="./1.jpg" />
  </body>
</html>
Copy the code

path( `[<fill-rule>,]? <string>`SVG Path draws graphics

Two arguments can be passed:

<fill-rule>Represents the fill rule (optional). That is, how to fill the polygon. Optional value isnonzero 和 evenodd. The default value isnonzero.
<string> SVG PathA string.
Modified properties are currently experimental properties, some browsers do not support them.

<! DOCTYPEhtml>
<html lang="en">
  <style>
    body {
      background-color: black;
    }
    .img {
      margin-left: 50px;
    }
    .img1 {
      clip-path: path('M 0 200 L 0 75 A 5,5,0, 0,1 150,75 L 100 100 z');
    }
    .img2 {
      clip-path: path(M 10,30 A 20,20,0,1 50,30 A 20,20 0,0,1 90,30 Q 90,60 50,90 Q 10,60 10,30 z');
    }
    .img3 {
      clip-path: path('M0 31c109.323 19.23 189.323 28.845 240 28.845 50.677 0 130.677-9.615 240-28.845v100H0V31z');
    }
    .img4 {
      clip-path: path('M0 31.398C109.323 10.466 189.323 0 240 0c50.677 0 130.677 10.466 240 31.398 v131.52h0v31.398z ');
    }
  </style>
  <body>
    <img src="./1.jpg" />
    <img class="img1" src="./1.jpg" />
    <img class="img2" src="./1.jpg" />
    <img class="img3" src="./1.jpg" />
    <img class="img4" src="./1.jpg" />
  </body>
</html>
Copy the code

clip-source

Gets an SVG contour clipping image.

<! DOCTYPEhtml>
<html lang="en">
  <style>
    body {
      background-color: black;
    }
    .img {
      margin-left: 50px;
    }
    .img1 {
      clip-path: url(#myPath);
    }
  </style>
  <body>
    <svg>
      <clipPath id="myPath" clipPathUnits="objectBoundingBox">
        <path
          d=",0,0.7 M0.5, 0.5 1 C, 1, 0,0.3 A 0.25, 0.25, 1,1,1,0.5, 0.3 A, 0.25, 0.25, 1,1,1,1,0.3,0.7 C 1, 0.5, 1,0.5, 1 Z"
        />
      </clipPath>
    </svg>
    <img src="./1.jpg" />
    <img class="img1" src="./1.jpg" />
  </body>
</html>
Copy the code

Commonly used way

Implement image loading from top to bottom

<! DOCTYPEhtml>
<html lang="en">
  <style>
    body {
      background-color: black;
    }
    .img {
      width: 280px;
      height: 180px;
    }
    img {
      overflow: hidden;
      -webkit-clip-path: polygon(0 0.0 0.100% 0.100% 0);
      clip-path: polygon(0 0.0 0.100% 0.100% 0);
      opacity: 0;
      transition: clip-path 1.1 s ease-in, opacity 1.1 s ease 167ms, -webkit-clip-path 1.1 s cubic-bezier(0.19.1.0.22.1);
    }
    .img:hover img {
      opacity: 1;
      -webkit-clip-path: polygon(0 0.0 100%.100% 100%.100% 0);
      clip-path: polygon(0 0.0 100%.100% 100%.100% 0);
    }
  </style>
  <body>
    <div class="img">
      <img src="./1.jpg" />
    </div>
  </body>
</html>
Copy the code

Start by setting the image clipping (clip-path: polygon(0 0, 0 0, 100% 0, 100% 0)) and transparency (opacity: 0) to 0.
throughtransitionAutomatic tween animation, from top to bottom gradually increase the shear area, to achieve the effect

Switch pictures according to scrolling

<! DOCTYPEhtml>
<html lang="en">
  <style>
    body {
      background-color: black;
    }

    .home {
      margin-top: 100px;
      width: 100%;
      /* Test adding scroll bar */
      padding-bottom: 56.25%;
      position: relative;
    }

    .top..bottom {
      width: 100%;
      height: 200px;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
    }

    .top {
      z-index: 1;
      background: url(./4.jpg) no-repeat center center;
      background-size: cover;
    }

    .bottom {
      z-index: 2;
      background: url(./3.jpg) no-repeat center center;
      background-size: cover;
    }
  </style>
  <body>
    <div class="home">
      <div class="top"></div>
      <div class="bottom"></div>
    </div>
  </body>
  <script type="text/javascript">
    var percentage
    var direction = 0 // 0: forward, 1: reverse

    var scrollTem = 0 // Roll height
    function update() {
      const home = document.querySelector('.home')
      const top = document.querySelector('.top') / / the upper
      const bottom = document.querySelector('.bottom') / / below

      // Operation top clipping implement alternately change top on top and set clipping area to 0
      top.style.zIndex = '2'
      bottom.style.zIndex = '1'

      if (direction == 0) {
        / / is
        scrollTem = window.scrollY
      }
      // Initialize forward scrolling
      if (window.scrollY === 0) {
        direction = 0
      }
      // Reverse scroll
      if (window.scrollY < scrollTem && direction ! = =1) {
        direction = 1
      }
      if (direction === 1) {
        / / reverse
        percentage = 1 - window.scrollY
      } else if (direction === 0) {
        / / is
        percentage = window.scrollY
      }
      var radius = percentage * Math.sqrt(top.clientWidth * 2 + top.clientHeight * 2)
      if (direction === 0) {
        top.style['clip-path'] = `circle(${radius + 'px'} at 0% 0%)`
      } else if (direction === 1) {
        top.style['clip-path'] = `circle(${radius + 'px'} at 0% 0%)`}}window.onscroll = update
  </script>
</html>
Copy the code

The easiest way to do this is to first absolutely locate the image to switch according to the hierarchy. Then through the height of the scroll bar on the upper picture clipping, to achieve the effect.

Draw the cilp – path species – in – pieces

mo4tech.com (Moment For Technology) is a global community with thousands techies from across the global hang out!Passionate technologists, be it gadget freaks, tech enthusiasts, coders, technopreneurs, or CIOs, you would find them all here.

Learn clip-path attributes and common methods

Clip – path attribute

basic-shape

Inset (top, right, bottom, left, Round RADIUS) rectangle

Circle circle (radius, at the position)

Ellipse (radius-x, radius-y, at position) ellipse

polygon( `[<fill-rule>,]? [<shape-arg> <shape-arg>]#`) a polygon

path( `[<fill-rule>,]? <string>`SVG Path draws graphics

clip-source

Commonly used way

Implement image loading from top to bottom

Switch pictures according to scrolling

Related articles

Learn clip-path attributes and common methods

Clip – path attribute

basic-shape

Inset (top, right, bottom, left, Round RADIUS) rectangle

Circle circle (radius, at the position)

Ellipse (radius-x, radius-y, at position) ellipse

polygon( [<fill-rule>,]? [<shape-arg> <shape-arg>]#) a polygon

path( [<fill-rule>,]? <string>SVG Path draws graphics

clip-source

Commonly used way

Implement image loading from top to bottom

Switch pictures according to scrolling

Related articles

Related Posts

[JavaScript] Use of arguments in functions

Talk about taking private jobs (personal experience, how to avoid being cheated)

Webpack basic configuration (2) – URL and Babel

polygon( `[<fill-rule>,]? [<shape-arg> <shape-arg>]#`) a polygon

path( `[<fill-rule>,]? <string>`SVG Path draws graphics