前言
又简简单单地过了一周，这回给大伙带来一个新的前端特效，我把它命为-我裂开了。这个特效呈现的效果就是给背景图片加上一种裂开效果，大家可以接着往下看。
效果预览
这个效果其实就是一个撕裂特效。
HTML布局
我们首先来进行结构布局。由于是裂为两半，因此需要准备两个模块，相关代码如下所示。
<section>
<div class="side" id="side1"></div>
<div class="side" id="side2"></div>
</section>
在这里我们用section元素包含了两个div元素，它们分别有不同的id属性值：side1和side2。id属性用于给元素指定一个唯一的标识符。通过这样我们就定义好了两个不同的区域。
CSS样式
现在进入到CSS部分，这次主要介绍clip-path这个属性，关于其余部分代码大家可以去码上掘金查看完整版。
section .side#side1{
clip-path: polygon(0% 0%,66% 0%,31% 16%,63% 29%,25% 40%,64% 44%,28% 58%,65% 65%,23% 76%,62% 90%,27% 97%,56% 100%,0% 100%);
}
section .side#side2{
clip-path: polygon(100% 0%,66% 0%,31% 16%,63% 29%,25% 40%,64% 44%,28% 58%,65% 65%,23% 76%,62% 90%,27% 97%,56% 100%,100% 100%);
}
clip-path可以用于定义两个具有不同形状的边栏（side1和side2）的剪切路径。剪切路径是用来限制元素的可见区域，使其只显示指定剪切路径内的部分。具体来说，clip-path属性使用polygon()函数来定义剪切路径，其中传入的参数是一系列坐标点。每个坐标点是以百分比表示的相对于元素边界的位置。
在我们的撕裂特效中，定义的剪切路径形状类似于一个不规则的多边形。通过两个镜像对称的、不规则的多边形，达成一个撕裂效果。
大家肯定更好奇地是如何得出想要的路径参数，这里推荐一个工具给大家，我的相应参数就是通过这个工具来自定义的——Clippy — CSS clip-path maker (bennettfeely.com)。在这里可以得到各种想要的参数，大家可以去尝试一下。
JS交互
这一次特效的实现少不了JS的交互，通过监听滚动事件来实现。
<script>
let side1 = document.getElementById('side1')
let side2 = document.getElementById('side2')
window.addEventListener('scroll',function(){
side1.style.left = -window.pageYOffset + 'px'
side2.style.left = window.pageYOffset + 'px'
})
</script>
首先通过getElementById方法获取了id为side1和side2的两个元素，并将它们分别赋值给变量side1和side2。
然后，通过window.addEventListener方法给窗口对象添加了一个滚动事件的监听器。当滚动事件发生时，回调函数会被执行。window.pageYOffset表示当前窗口滚动的垂直距离，通过将其赋值给side1和side2的left样式，可以实现元素的水平移动。
具体来说，side1元素的左边距设置为滚动距离的负值，实现向右移动的效果；将side2元素的左边距设置为滚动距离，实现向左移动的效果。通过这样的设置，当我们滚动页面时，side1元素会向右移动，而side2元素会向左移动，从而创建了滚动就可以裂开图片的效果。
总结
以上就是整个效果的实现了，一个生动的我裂开了的前端特效，代码不算多，而且比较简单，主要是应用了clip-path这个属性来达到效果预期。除此之外，这个效果还有很多可以扩展的地方，比如在图片裂开的时候，在背景上加入文字或者不同的颜色，能让人眼前一亮。总之，感兴趣的小伙伴可以去试试，如果有什么问题欢迎在评论区讨论。
