HTML5的岩浆动画背景特效

<头>
<元字符集=“utf-8”>


<风格>
@字符集“UTF-8”;
*, *:之前, *:之后 {
  框大小：边框框；
}

身体 {＃＃＃   填充：0;
  边距：0；
  溢出：隐藏；
  字体系列：“Roboto”，无衬线；
}

帆布 {＃＃＃   宽度：100vw；
  高度：100vh；
}

h1 {
  位置：绝对；
  z 索引: 1;
  宽度：100%；
  左：0；
  顶部：50%；
  -webkit-transform: 翻译Y(-50%);
          变换：翻译Y(-50%);
  混合混合模式：覆盖；
  颜色: rgba(0, 0, 0, 0.3);
  行高：0;
  字体大小：16px;
  字母间距：4px；
  文本对齐：居中；
  文本转换：大写；
  变换：翻译Y(-50%);
  光标：指针；
  -webkit-transition：颜色 .2s 缓入缓出；
  过渡：颜色 .2s 缓入出；
  -webkit-用户选择：无；
     -moz-用户选择：无；
      -ms-用户选择：无；
          用户选择：无；
}
h1：悬停{
  颜色: rgba(0, 0, 0, 0.8);
}
</风格>
</头>
<正文>

<脚本 src="js/chroma.min.js"></脚本>
<脚本 src="js/dat.gui.min.js"></script>

<canvas id="canvas"></canvas>

<h1>地板是熔岩</h1>

<脚本>
'使用严格';

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("无法将类作为函数调用"); } }

变量设置 = {
  振幅X：150，
  振幅Y：20，
  行数: 30,
  开始颜色: '#500c44',
  结束颜色：'#b4d455'
};

var c = document.getElementById("canvas");
var ctx = c.getContext("2d");
var winW = window.innerWidth;
var winH = window.innerHeight;
var 路径 = [];
var 颜色 = [];
var mouseY = 0;
var mouseDown = false;
变量时间 = 0;
var 曲线=未定义;
var 速度 = 未定义;

var 路径 = 函数 () {
  函数路径（y，颜色）{
    _classCallCheck(this, 路径);

    这个.y = y;
    this.颜色 = 颜色;
    this.root = [];
    this.create();
    this.draw();
  }

  Path.prototype.create = function create() {
    var rootX = 0;
    var rootY = this.y;

    this.root = [{ x: rootX, y: rootY }];

    while (rootX < winW) {
      var休闲 = Math.random() > 0.5？ 1 : -1;
      var x = parseInt(settings.amplitudeX / 2 + Math.random() * settings.amplitudeX / 2);
      var y = parseInt(rootY + Casual * (settings.amplitudeY / 2 + Math.random() * settings.amplitudeY / 2));
      rootX += x;
      var 延迟 = Math.random() * 100;
      this.root.push({ x: rootX, y: y, 高度: rootY, 休闲: 休闲, 延迟: 延迟 });
    }
  };

  Path.prototype.draw = 函数draw() {
    ctx.beginPath();
    ctx.moveTo(0, winH);

    ctx.lineTo(this.root[0].x, this.root[0].y);

    for (var i = 1; i < this.root.length - 1; i++) {

      var x = this.root[i].x;
      var y = this.root[i].y;
      var nextX = this.root[i + 1].x;
      var nextY = this.root[i + 1].y;

      var xMid = (x + nextX) / 2;
      var yMid = (y + nextY) / 2;
      var cpX1 = (xMid + x) / 2;
      var cpY1 = (yMid + y) / 2;
      var cpX2 = (xMid + nextX) / 2;
      var cpY2 = (yMid + nextY) / 2;

      ctx.quadraticCurveTo(cpX1, y, xMid, yMid);
      ctx.quadraticCurveTo(cpX2, nextY, nextX, nextY);
    }

    var lastPoint = this.root.reverse()[0];
    this.root.reverse();
    ctx.lineTo(lastPoint.x,lastPoint.y);
    ctx.lineTo(winW, winH);
    ctx.fillStyle = this.color;
    ctx.fill();
    ctx.closePath();
  };

  返回路径；
}();

/* 在里面 */＃＃＃
var 路径 = 未定义;
函数 init() {
  c.width = winW;
  c.高度 = winH;
  路径= [];

  color = chroma.scale([settings.startColor, settings.endColor]).mode('lch').colors(settings.lines);

  document.body.style = '背景：' + settings.startColor;

  for (var i = 0; i < settings.lines; i++) {
    Paths.push(new Path(winH / settings.lines * i, color[i]));
    settings.startY = winH / settings.lines * i;
  }
}

/* 获胜调整大小 */
window.addEventListener('调整大小', function () {
  winW = window.innerWidth;
  winH = window.innerHeight;
  c.width = winW;
  c.高度 = winH;
  在里面（）;＃＃＃ });
window.dispatchEvent(new Event("resize"));

/* 使成为 */＃＃＃ 函数渲染（）{
  c.width = winW;
  c.高度 = winH;

  曲线=鼠标按下？ 2：4；
  速度 = 鼠标按下？ 6 : 0.8;

  时间+=鼠标按下？ 0.1 : 0.05;

  Paths.forEach(函数(路径, i) {
    path.root.forEach(函数 (r, j) {
      if (j % 曲线 == 1) {
        var move = Math.sin(时间 + r.delay) * 速度 * r.casual;
        r.y -= 移动 / 2 - 移动;
      }
      if (j + 1 % 曲线 == 0) {
        var move = Math.sin(时间 + r.delay) * 速度 * r.casual;
        r.x += 移动 / 2 - 移动 / 10;
      }
    });

    路径.draw();
  });

  requestAnimationFrame(渲染);
}
使成为（）;＃＃＃
/* 鼠标按下 */
'mousedown touchstart'.split(' ').forEach(function (e) {
  document.addEventListener(e, function () {
    鼠标按下 = true;
  });
});

/* 鼠标松开 */
'mouseup mouseleave touchend'.split(' ').forEach(function (e) {
  document.addEventListener(e, function () {
    鼠标按下 = false;
  });
});

/* 鼠标移动 */
'mousemove touchmove'.split(' ').forEach(function (e) {
  document.addEventListener(e, 函数 (e) {
    mouseY = e.clientY || e.touches[0].clientY;
  });
});

/* 数据图形用户界面 */
var gui = 函数 datgui() {
  var gui = new dat.GUI();
  // dat.GUI.toggleHide();
  gui.close = true;
  gui.add(settings, "amplitudeX", 40, 200).step(20).onChange(function (newValue) {
    在里面（）;＃＃＃   });
  gui.add(settings, "amplitudeY", 0, 100).step(1).onChange(function (newValue) {
    在里面（）;＃＃＃   });
  gui.add(settings, "lines", 5, 50).step(1).onChange(function (newValue) {
    在里面（）;＃＃＃   });
  gui.addColor(settings, "startColor").onChange(function (newValue) {

    在里面（）;＃＃＃     document.querySelector('h1').innerHTML = '或者你想要的任何内容';
  });
  gui.addColor(settings, "endColor").onChange(function (newValue) {
    init();
    document.querySelector('h1').innerHTML = 'or whatever you want';
  });

  return gui;
}();
</script>

</body>
</html>

这是一款不错的可设置动画属性的HTML5岩浆动画背景特效，展开网页右顶部菜单便可以设置动画动画幅度、颜色等属性。