將自定義.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中。