如何使用WPbakery在我的Wordpress网站中实现此代码

Question

我有这个Codepen，它是Firewatch视差代码的变体。

https://codepen.io/Lancewalker/pen/EGqVZe

function castParallax() {

	var opThresh = 350;
	var opFactor = 750;

	window.addEventListener("scroll", function(event){

		var top = this.pageYOffset;

		var layers = document.getElementsByClassName("parallax");
		var layer, speed, yPos;
		for (var i = 0; i < layers.length; i++) {
			layer = layers[i];
			speed = layer.getAttribute('data-speed');
			var yPos = -(top * speed / 100);
			layer.setAttribute('style', 'transform: translate3d(0px, ' + yPos + 'px, 0px)');

		}
	});
}

document.body.onload = castParallax();

/* PARALLAX */

.body {
  margin: -5px;
}

.keyart, .keyart_layer {
	height: 1000px;
}

#parallax {
	display: block;
}

.keyart {
	position: relative;
	z-index: 10;
}

.keyart_layer {
	background-position: bottom center;
	background-size: auto 1038px;
	background-repeat: repeat-x;
	width: 100%;
	position: absolute;
}
.keyart_layer.parallax {
	position: fixed;
}
	#keyart-0 {
		background-image: url("https://i.imgur.com/1faPCRE.png");
		background-color: #ffaf1b;
	}
	#keyart-1 {
		background-image: url("https://i.imgur.com/EKhFCWk.png");
	}
	#keyart-2 {
		background-image: url("https://i.imgur.com/o4PVCnk.png");
	}
	#keyart-3 {
		background-image: url("https://i.imgur.com/bnVtpuR.png");
	}
	#keyart-4 {
		background-image: url("https://i.imgur.com/bnVtpuR.png");
	}
	#keyart-5 {
		background-image: url("https://i.imgur.com/R5jRdBC.png");
	}
	#keyart-6 {
		background-image: url("https://i.imgur.com/ORZm7M7.png");
	}
	#keyart-7 {
		background-image: url("");
	}
	#keyart-8 {
		background-image: url("");
	}
	#keyart-scrim {
		background-color: #ffaf00;
		opacity: 0;
}

<div class="keyart" id="parallax">
  <div class="keyart_layer parallax" id="keyart-0" data-speed="2"></div>		<!-- 00.0 -->
  <div class="keyart_layer parallax" id="keyart-1" data-speed="5"></div>	<!-- 12.5 -->
  <div class="keyart_layer parallax" id="keyart-2" data-speed="11"></div>		<!-- 25.0 -->
  <div class="keyart_layer parallax" id="keyart-3" data-speed="16"></div>	<!-- 37.5 -->
  <div class="keyart_layer parallax" id="keyart-4" data-speed="26"></div>		<!-- 50.0 -->
  <div class="keyart_layer parallax" id="keyart-5" data-speed="36"></div>	<!-- 62.5 -->
  <div class="keyart_layer parallax" id="keyart-6" data-speed="49"></div>		<!-- 75.0 -->
  <div class="keyart_layer" id="keyart-scrim"></div>
  <div class="keyart_layer parallax" id="keyart-7" data-speed="69"></div>		<!-- 87.5 -->
  <div class="keyart_layer" id="keyart-8" data-speed="100"></div>		<!-- 100. -->
</div>

我的目标是将其作为网站的标题/简介图像。

例如，当一个网站使用简单的html / css / JS时，我可以轻松实现此功能，例如，我能够在一两分钟之内快速使其在朋友的shopify网站上运行。

尽管使用WPBakery，自定义HTML元素不会以覆盖WPBakery配置的方式输出HTML / CSS，因此我用WPBakery创建的每个元素都有一个基类，该基类覆盖了宽度，高度，填充等内容，边距等，这取决于我在配置中选择的内容。这引起了问题，并且我的元素在网页中显示为空白。

我一生都无法弄清楚如何使此代码正常工作。我真的不知道任何PHP，但是在这一点上我非常擅长前端开发。我与CMS的合作越多，让我轻松地在html / css / js中进行更改，则wordpress给我带来的问题就越多。

我安装了一个插件，可以让我添加自定义JS和CSS / SCSS，在其中实现代码，然后在WPBakery的“自定义html”元素中使用HTML输出，但是没有用。

有什么想法吗？

在这一点上，我很舒服，仅使用IDE和html / css / js即可对我的整个网站进行编码。我希望有一种简单的方法可以轻松地将要创建的元素添加到wordpress中（是否存在）？ WPBakery造成了很多困难。