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(time r.delay) * 速度 * r.casual;
r.y -= 移動 / 2 - 移動;
}
if (j 1 % 曲線 == 0) {
var move = Math.sin(time 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 () {
滑鼠按下=假;
});
});

/* 滑鼠移動 */
'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岩漿動畫背景特效，展開網頁右頂部選單便可設定動畫動畫幅度、色彩等屬性。