将自定义.js文件作为背景添加到Wordpress

Question

我得到了.js文件来创建此小插图效果。

https://demo.projectwyvern.com/

我一生都无法在主页上使用该文件。 我正在使用Theme Astra和elementor页面构建器。

我希望.js用作背景，让elementor调用js。

我尝试了很多方法，包括将.js添加到标题中，但是我所得到的只是页面上的大量代码。 创建者已告诉我“在页面上放置ID为'#container'的div元素”。

我还尝试了一些自定义代码插件。 我觉得我需要在functions.php中使用入队脚本吗？

任何帮助将不胜感激。

创建者提供的所有文件都可以在他的github上找到。

https://github.com/ProjectWyvern/wyvern-logo-effects

Answer 1

您需要更改主题的header.php模板（您可能应该创建一个子主题并对其进行更改）。

根据该github项目的示例：

在header.php中添加类似的内容

<div id="container"></div>
<img src="static/logo.svg" id="logo" style="display: none; height: 100%; width: 100%;" />

然后，使用以下代码制作一个javascript文件，这可以激活您的效果：

 var canvas = document.createElement('canvas'); canvas.id = 'canvas'; canvas.height = window.innerHeight; canvas.width = window.innerWidth; document.getElementById('container').appendChild(canvas); var seriously = new Seriously(); var logo = seriously.source('#logo'); var target = seriously.target('#canvas'); var vignette = seriously.effect('vignette'); vignette.amount = 1; vignette.source = logo; var mask = seriously.transform(); mask.source = vignette; target.source = mask; var factor = 1; var diff = 0; function setPosition(x, y) { x -= canvas.offsetLeft; y -= canvas.offsetTop; var xd = Math.abs(x - (canvas.width / 2)) / canvas.width; var yd = Math.abs(y - (canvas.height / 2)) / canvas.height; diff = xd + yd; } function mouseMove(e) { setPosition(e.pageX, e.pageY); } window.addEventListener('mousemove', mouseMove, false); var amt = 0.5; var del = 200; mouseMove({pageX: 0, pageY: 0}) seriously.go(function(now) { factor = amt + (Math.sin(now / del) / Math.PI / 8); vignette.amount = factor * 100 * diff; }); 

接下来，将认真的.js和新的javascript文件保存到主题的脚本目录中

[astratheme-child]/scripts/seriously.js
[astratheme-child]/scripts/activateseriously.js

然后，在functions.php文件中，使两个javascript文件入队：

wp_enqueue_script('seriously', get_stylesheet_directory_uri() . '/scripts/seriously.js');
wp_enqueue_script('seriously', get_stylesheet_directory_uri() . '/scripts/activateseriously.js');

如果您在尝试在页面完全加载之前尝试运行时遇到麻烦，请从functions.php删除入队调用，然后将两个脚本作为标签添加到footer.php中。