Assistance with adding custom cursor effect to website

Question

Assistance with adding custom cursor effect to website

120 views Asked by T. VOS At 19 March 2023 at 12:59

I'll try to keep it short. We are working on a website (link below) and want to add a custom cursor effect we found (see the link below). We are making the website with the free element or version and a theme called 'Vault'.

Sadly we don't have much coding experience, even though we have tried to install this with help from various tutorials, articles, etc. it doesn't seem to work. It would be great if anyone could further assist us with how we could install this.

Link to website: https://geldmetai.nl/ Link to cursor effect: https://paveldogreat.github.io/WebGL-Fluid-Simulation/

Cursor code is made up of 88.5% Java and 11.5% HTML.

Kind regards, Thijs

Tried to the theme's build-in function to upload custom JAVA code, but didn't see anything for HTML, so that naturally didn't work out.

Tried to use a HTML widget and added the JS.

Tried some other stuff from video's and articles, but sadly to no avail.

Original Q&A

There are 1 answers

**Dave Ankin** · Answer 1 · 2023-03-19T14:54:12+00:00

replacing the top of the provided script with this

let canvasParent = document.querySelector('#home > div.elementor-background-overlay');
let canvas1 = document.createElement('canvas');
canvasParent.append(canvas1)

canvas1.width = canvasParent.clientWidth
canvas1.height = canvasParent.clientHeight

const canvas = canvas1//document.getElementsByTagName('canvas')[0];

seems to produce the needed result:

I did this by overriding some scripts in the Chrome Developer Tools console:

adding this in the index.html file:

<!doctype html>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="profile" href="https://gmpg.org/xfn/11">

    <title>geldmetai.nl</title>
<meta name='robots' content='max-image-preview:large' />

    <!-- added these dependencies to the program -->
    <script src='https://geldmetai.nl/script.js'></script>
    <script src='https://geldmetai.nl/dat.gui.min.js'></script>
<!-- ... --->

I also removed all the sidebars and "gui" for controlling parameters to the WebGL routines. also since the script is at the top, you must wait for DOMContentLoaded event:

window.addEventListener("DOMContentLoaded", () => {
    // Simulation section

    let canvasParent = document.querySelector('#home > div.elementor-background-overlay');
    let canvas1 = document.createElement('canvas');
    canvasParent.append(canvas1)

    canvas1.width = canvasParent.clientWidth
    canvas1.height = canvasParent.clientHeight

    const canvas = canvas1//document.getElementsByTagName('canvas')[0];
    // ...

TechQA.

Assistance with adding custom cursor effect to website

There are 1 answers

Related Questions in JAVA

Related Questions in HTML

Related Questions in CURSOR

Related Questions in CUSTOM-CURSOR

Popular Questions

Popular Tags

Trending Questions