Efecto de transformación parallax clip-path al hacer scroll con Divi y WordPress

Hola, en este tutorial te enseñaré a crear un efecto de transformación tipo parallax con clip-path de CSS en divi. El efecto consiste que al ir haciendo scroll sobre la página se nos va ir revelando una imagen de fondo con un efecto de animación circular.

Estoy casi seguro que al leer la descripción no has entendido nada, no te preocupes, la verdad que esto de los efectos me es difícil de explicar de manera escrita, por eso es mejor que le des play al video tutorial para que veas de que se trata.

Antes de desplazarte hasta el video tutorial te dejo los fragmentos de código que vamos a utilizar para realizar este tutorial.

Este primer código es una pequeña línea de código CSS que nos servirá para crear una mascara de recorte sobre una sección con un fondo o background en divi. Al ver el video sabrás donde pegarlo.

clip-path: circle(100px at center);

Posteriormente vamos a necesitar un segundo fragmento de código, pero esta ves será un fragmento de código JavaScript que nos servirá para añadir la funcionalidad al ir haciendo scroll sobre la página.

<script type="text/javascript">
var section = document.querySelector('#seccionCover');
window.addEventListener('scroll', function(){
	var value = window.scrollY;
	section.style.clipPath = "circle("+ value +"px at center)"
})
</script>