如何在 Elementor 中添加此 codepen

Question

我正在尝试将此 Codepen 效果应用到特定部分，但我看到的只是背景颜色，没有达到所需的效果。我按照说明添加了脚本和样式标签，但不幸的是，它不起作用。结果，整个页面都呈现出渐变颜色...有人知道如何解决这个问题吗？

这是我在 Elementor 的 HTML 代码中插入的代码

    
      <script>
const rippleSettings = {
  maxSize: 100,
  animationSpeed: 5,
  strokeColor: [148, 217, 255],
};

const canvasSettings = {
  blur: 8,
  ratio: 1,
};

function Coords(x, y) {
  this.x = x || null;
  this.y = y || null;
}

const Ripple = function Ripple(x, y, circleSize, ctx) {
  this.position = new Coords(x, y);
  this.circleSize = circleSize;
  this.maxSize = rippleSettings.maxSize;
  this.opacity = 1;
  this.ctx = ctx;
  this.strokeColor = `rgba(${Math.floor(rippleSettings.strokeColor[0])},
    ${Math.floor(rippleSettings.strokeColor[1])},
    ${Math.floor(rippleSettings.strokeColor[2])},
    ${this.opacity})`;

  this.animationSpeed = rippleSettings.animationSpeed;
  this.opacityStep = (this.animationSpeed / (this.maxSize - circleSize)) / 2;
};

Ripple.prototype = {
  update: function update() {
    this.circleSize = this.circleSize + this.animationSpeed;
    this.opacity = this.opacity - this.opacityStep;
    this.strokeColor = `rgba(${Math.floor(rippleSettings.strokeColor[0])},
      ${Math.floor(rippleSettings.strokeColor[1])},
      ${Math.floor(rippleSettings.strokeColor[2])},
      ${this.opacity})`;
  },
  draw: function draw() {
    this.ctx.beginPath();
    this.ctx.strokeStyle = this.strokeColor;
    this.ctx.arc(this.position.x, this.position.y, this.circleSize, 0,
      2 * Math.PI);
    this.ctx.stroke();
  },
  setStatus: function setStatus(status) {
    this.status = status;
  },
};

const canvas = document.querySelector('#canvas');
const ctx = canvas.getContext('2d');
const ripples = [];

const height = document.body.clientHeight;
const width = document.body.clientWidth;

const rippleStartStatus = 'start';

const isIE11 = !!window.MSInputMethodContext && !!document.documentMode;

canvas.style.filter = `blur(${canvasSettings.blur}px)`;

canvas.width = width * canvasSettings.ratio;
canvas.height = height * canvasSettings.ratio;

canvas.style.width = `${width}px`;
canvas.style.height = `${height}px`;

let animationFrame;

// Add GUI settings
const addGuiSettings = () => {
  const gui = new dat.GUI();
  gui.add(rippleSettings, 'maxSize', 0, 1000).step(1);
  gui.add(rippleSettings, 'animationSpeed', 1, 30).step(1);
  gui.addColor(rippleSettings, 'strokeColor');

  const blur = gui.add(canvasSettings, 'blur', 0, 20).step(1);
  blur.onChange((value) => {
    canvas.style.filter = `blur(${value}px)`;
  });
};

addGuiSettings();

// Function which is executed on mouse hover on canvas
const canvasMouseOver = (e) => {
  const x = e.clientX * canvasSettings.ratio;
  const y = e.clientY * canvasSettings.ratio;
  ripples.unshift(new Ripple(x, y, 2, ctx));
};

const animation = () => {
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  const length = ripples.length;
  for (let i = length - 1; i >= 0; i -= 1) {
    const r = ripples[i];

    r.update();
    r.draw();

    if (r.opacity <= 0) {
      ripples[i] = null;
      delete ripples[i];
      ripples.pop();
    }
  }
  animationFrame = window.requestAnimationFrame(animation);
};

animation();
canvas.addEventListener('mousemove', canvasMouseOver);

        </script>

  <Style>
    html, body, #canvas {
      width: 100%;
      height: 100%;
      margin: 0;
    }
    body {
     background: rgb(0,22,36);
background: linear-gradient(43deg, rgba(0,22,36,1) 0%, rgba(9,84,121,1) 42%, rgba(1,128,93,1) 100%);

    }
    #wrapper {
      position: absolute;
      top: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
    }
    #menu {
      width: 100%;
    }
       </Style>


<canvas id="canvas"></canvas>
    <div id="wrapper">
    </div>

       

Answer 1

addGuiSettings()

内部是一个构建小GUI的外部库。您可能不想在页面中使用它，因此请将其删除。开发工具中也会有一个错误向您显示这一点。

如果你想使用它，你也必须使用 codepen 中的外部库。

并且您必须将

<canvas>

部分放在脚本之前。否则它会在错误日志中显示“canvas is null”