Adding Custom .js file to Wordpress as a Background

Question

I have been given the .js files to create this vignette effect.

https://demo.projectwyvern.com/

I cannot for the life of me get the file to work on my homepage. I am using the Theme Astra and the elementor page builder.

I would like the .js to work as a background and for elementor to call the js.

I have tried many ways including adding the .js into the header, but all I got was a load of code on the page. I have been told by the creator 'to put a div element with id '#container' on the page.'

I've also tried a few custom code plugins. I feel like I need to use the enqueue script in the functions.php?

Any help would be greatly appreciated.

All the files given to be by the creator can be found on his github.

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

Answer 1

You need to alter the header.php template for your theme (you should probably create a child theme and alter that).

Per the example at that github project:

Add something like this to the header.php

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

Then, make a javascript file with code like this, which is what activates your effect:

 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; }); 

Next, save serious.js and your new javascript file into theme's scripts directory

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

Then, in functions.php file, enqueue the two javascript files:

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

If you have trouble with it trying to run before the page loads all the way, remove the enqueue calls from functions.php, and instead add the two scripts as tags in the footer.php.