当前位置：首页 > 下载站 > js特效 > html5特效 > HTML5的岩浆动画背景特效

HTML5的岩浆动画背景特效

分类: js特效 / html5特效	发布时间: 2017-12-23	访问量: 1622
下载量: 56

点击下载预览效果

更多>

24小时阅读排行榜

更多>

最新教程

最新Python教程从入门到精通

Node.js 教程

7443 2025-08-28
CSS3 教程

1046748 2025-08-27
Rust 教程

11802 2025-08-27
Vue 教程

14036 2025-08-22
PostgreSQL 教程

10801 2025-08-21
Git 教程

5138 2025-08-21

HTML5的岩浆动画背景特效

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>可设置动画属性的HTML5岩浆动画背景特效</title>

<style>
@charset "UTF-8";
*, *:before, *:after {
box-sizing: border-box;
}

body {
padding: 0;
margin: 0;
overflow: hidden;
font-family: 'Roboto', sans-serif;
}

canvas {
width: 100vw;
height: 100vh;
}

h1 {
position: absolute;
z-index: 1;
width: 100%;
left: 0;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
mix-blend-mode: overlay;
color: rgba(0, 0, 0, 0.3);
line-height: 0;
font-size: 16px;
letter-spacing: 4px;
text-align: center;
text-transform: uppercase;
transform: translateY(-50%);
cursor: pointer;
-webkit-transition: color .2s ease-in-out;
transition: color .2s ease-in-out;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
h1:hover {
color: rgba(0, 0, 0, 0.8);
}
</style>
</head>
<body>

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

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

<h1>The Floor is Lava</h1>

<script>
'use strict';

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

var settings = {
amplitudeX: 150,
amplitudeY: 20,
lines: 30,
startColor: '#500c44',
endColor: '#b4d455'
};

var c = document.getElementById("canvas");
var ctx = c.getContext("2d");
var winW = window.innerWidth;
var winH = window.innerHeight;
var Paths = [];
var color = [];
var mouseY = 0;
var mouseDown = false;
var time = 0;
var curves = undefined;
var velocity = undefined;

var Path = function () {
function Path(y, color) {
_classCallCheck(this, Path);

this.y = y;
this.color = color;
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 casual = 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 delay = Math.random() * 100;
this.root.push({ x: rootX, y: y, height: rootY, casual: casual, delay: delay });
}
};

Path.prototype.draw = function 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();
};

return Path;
}();

/* INIT */

var path = undefined;
function init() {
c.width = winW;
c.height = winH;
Paths = [];

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

document.body.style = 'background: ' + 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;
}
}

/* WIN RESIZE */
window.addEventListener('resize', function () {
winW = window.innerWidth;
winH = window.innerHeight;
c.width = winW;
c.height = winH;
init();
});
window.dispatchEvent(new Event("resize"));

/* RENDER */
function render() {
c.width = winW;
c.height = winH;

curves = mouseDown ? 2 : 4;
velocity = mouseDown ? 6 : 0.8;

time += mouseDown ? 0.1 : 0.05;

Paths.forEach(function (path, i) {
path.root.forEach(function (r, j) {
if (j % curves == 1) {
var move = Math.sin(time + r.delay) * velocity * r.casual;
r.y -= move / 2 - move;
}
if (j + 1 % curves == 0) {
var move = Math.sin(time + r.delay) * velocity * r.casual;
r.x += move / 2 - move / 10;
}
});

path.draw();
});

requestAnimationFrame(render);
}
render();

/* MOUSEDOWN */
'mousedown touchstart'.split(' ').forEach(function (e) {
document.addEventListener(e, function () {
mouseDown = true;
});
});

/* MOUSEUP */
'mouseup mouseleave touchend'.split(' ').forEach(function (e) {
document.addEventListener(e, function () {
mouseDown = false;
});
});

/* MOUSEMOVE */
'mousemove touchmove'.split(' ').forEach(function (e) {
document.addEventListener(e, function (e) {
mouseY = e.clientY || e.touches[0].clientY;
});
});

/* DATA GUI */
var gui = function datgui() {
var gui = new dat.GUI();
// dat.GUI.toggleHide();
gui.closed = true;
gui.add(settings, "amplitudeX", 40, 200).step(20).onChange(function (newValue) {
init();
});
gui.add(settings, "amplitudeY", 0, 100).step(1).onChange(function (newValue) {
init();
});
gui.add(settings, "lines", 5, 50).step(1).onChange(function (newValue) {
init();
});
gui.addColor(settings, "startColor").onChange(function (newValue) {

init();
document.querySelector('h1').innerHTML = 'or whatever you want';
});
gui.addColor(settings, "endColor").onChange(function (newValue) {
init();
document.querySelector('h1').innerHTML = 'or whatever you want';
});

return gui;
}();
</script>

</body>
</html>