css + js 实现文字分割动画

欲实现如下的文字分割效果：

 

 

html部分代码如下：

悠酒网

css部分代码如下：

body {
				height: 100%;
				background: white;
			}

			h1 {
				color: black;
				text-align: center;
				font-size: 10vw;
				position: relative;
				font-weight: 900;
				text-transform: uppercase;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				position: absolute;
				margin: 0;
			}

			h1:before,
			h1:after {
				content: attr(data-heading);
				position: absolute;
				left: 0;
				width: 100%;
				text-align: center;
			}

			h1:before {
				clip-path: polygon(0 0, 100% 0%, 100% 39%, 0 67%);
				color: white;
				text-shadow: 3px -2px 5px white, -3px 3px 4px white;
				background: white;
			}

			h1:after {
				clip-path: polygon(0 0, 100% 0%, 100% 37%, 0 65%);
				color: black;
				animation: fracture 5s infinite ease;
			}

			@keyframes fracture {
				0% {
					transform: translateX(0);
				}

				50% {
					transform: translate(-20px, 2%);
				}
			}

js部分代码：

var h1 = document.querySelector("h1");
		h1.addEventListener("input", function() {
			this.setAttribute("data-heading", this.innerText);
		});