Question

我已获得.js文件来创建此晕影效果。

https://demo.projectwyvern.com/

我不能为我的生活获取文件在我的主页上工作。我正在使用Theme Astra和元素或页面构建器。

我希望.js作为背景工作，并希望元素调用js。

我尝试了很多方法，包括将.js添加到标题中，但我得到的只是页面上的一堆代码。创作者告诉我，我要把一个带有id＆＃39;＃container＆＃39;的div元素。在页面上。＆＃39;

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

非常感谢任何帮助。

创建者提供的所有文件都可以在他的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;
  });

接下来，将serious.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中删除enqueue调用，然后在footer.php中将这两个脚本添加为标记。

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

1 个答案: