JS uses clip-path to implement dynamic area clipping function

background

Today, I was browsing CodePen and saw a very interesting effect:

CodePen Demo -- Material Design Menu By Bennett Feely

There are still some points worth exploring and learning about this effect. Let’s take a look at it below.

How to achieve a similar effect?

First of all, think about it, if you were asked to achieve the above effect, what would you do?

Here I briefly list some possible solutions:

• box-shadow
• radial-gradient
• Scaling transform: scale()

Go through them one by one quickly.

Using box-shadow

If you use box-shadow , the code is roughly as follows:

<div class="g-container">
    <div class="g-item"></div>
</div>

.g-container {
    position: relative;
    width: 400px;
    height: 300px;
    overflow: hidden;
}

.g-item {
    position: absolute;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #fff;
    top: 20px;
    left: 20px;
    box-shadow: 0 0 0 0 #fff;
    transition: box-shadow .3s linear;
    
    &:hover {
        box-shadow: 0 0 0 420px #fff;
    }
}

The core is:

• The outer layer is a mask with overflow: hideen set
• When the inner element is hovered, a change is realized box-shadow: 0 0 0 0 #fff to box-shadow: 0 0 0 420px #fff

The effect is as follows:

The overall animation is simulated, but it has two fatal problems:

• When our mouse leaves the circle, the entire animation starts to reverse and the white area starts to disappear. If we want to perform button operations, it will not be completed.
• Elements hidden in the rectangle after the animation is expanded are not easy to place

So, although box-shadow looks good, we have to give it up. CodePen Demo -- box-shadow zoom in animation

Use radial-gradient to achieve

Next, we can use radial-gradient plus CSS @property to restore the above effect:

<div class="g-container"></div>

@property --size {
  syntax: '<length>';
  inherits: false;
  initial-value: 24px;
}

.g-container {
    position: relative;
    width: 400px;
    height: 300px;
    overflow: hidden;
    background: radial-gradient(circle at 44px 44px, #fff 0, #fff var(--size), transparent var(--size), transparent 0);
    transition: --size .3s linear;
    
    &:hover {
        --size: 450px;
    }
}

By controlling the radial gradient animation effect, we can change the original small circle background into a large circle background when hovering. The effect is as follows:

Emmm, the effect is indeed restored, but the problem is also fatal:

• Since it is a background change, the mouse does not need to hover over the small circle, it only needs to enter the range of the div and the animation will start. This is obviously wrong.
• Similar to the first box-shadow method, the DOM of the navigation element hidden under the white is not easy to place.

CodePen Demo -- radial-gradient zoom in animation

Emmm, there is another method, which is to use scaling transform: scale() , but there are also some problems, which I will not elaborate on here.

So here, if you want to achieve the above effect, the core is:

• The animation will start when the mouse is hovered over the circle. The mouse can move freely within the expanded range without retracting the animation effect.
• After the animation is expanded, the placement of the DOM inside should not be too troublesome. It is best if you can control the display and hiding of the content inside without the help of Javascript.

Using clip-path to achieve dynamic area clipping

So, here, we actually need a dynamic area cropping.

In this article of mine - How to implement overflow: hidden without using overflow: hidden? , introduced several ways to clip elements in CSS, and among them, the most suitable one for this effect is - clip-path.

Using clip-path , you can implement dynamic clipping very well, and the code is also very simple:

<div class="g-container"></div>

.g-container {
    position: relative;
    width: 400px;
    height: 300px;
    overflow: hidden;
    transition: clip-path .3s linear;
    clip-path: circle(20px at 44px 44px);
    background: #fff;
    
    &:hover {
        clip-path: circle(460px at 44px 44px);
    }
}

We just need to use clip-path to clip a rectangular div into a circle at the beginning using clip-path: circle(20px at 44px 44px) . When hovering, we can expand the radius of the clipping circle to the entire rectangular range.

The effect is as follows:

In this way, we can perfectly achieve the effect of the title image, and the built-in DOM elements can be directly written into this div.

<div class="g-container">
    <ul>
        <li>11111</li>
        <li>22222</li>
        <li>33333</li>
        <li>44444</li>
    </ul>
</div>

The effect is as follows:

CodePen Demo -- clip-path zoom in animation

This is a very interesting technique, using clip-path to achieve dynamic area clipping. I hope everyone can master it.

This is the end of this article about how to use clip-path in JS to implement dynamic area cropping. For more relevant clip-path area cropping content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!