HTML5 magma animation background effects
HTML5 magma animation background effects
<!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>
This is a good HTML5 magma animation background effect that can set animation properties. Expand the menu at the top right of the web page to set the animation amplitude, color and other properties.
All resources on this site are contributed by netizens or reprinted by major download sites. Please check the integrity of the software yourself! All resources on this site are for learning reference only. Please do not use them for commercial purposes. Otherwise, you will be responsible for all consequences! If there is any infringement, please contact us to delete it. Contact information: admin@php.cn
Related Article
24 Jun 2016
61 web page special effects that are very fashionable and have great visual effects
24 Jun 2016
Animation loading special effects implemented in pure css3
jquery waterfall flow LightBox picture box special effects
06 Jul 2016
jquery waterfall flow LightBox picture box special effects
24 Jun 2016
A batch of hover special effects implemented by CSS3
24 Jun 2016
Revealing the special effects in Tencent’s Burberry event page
CSS3 mouse slides over animated line border special effects
06 Jul 2016
CSS3 mouse slides over animated line border special effects
24 Jun 2016
CSS3 series three (styles related to background borders, deformation processing, animation effects)
Hot Tools
HTML5 Canvas heart fluttering animation special effects
HTML5 Canvas heart fluttering animation special effect is a generated animation that can be directly opened with a browser to see a heart.
H5 panda bouncing game source code
HTML5 Mobile Panda is also a crazy game source code. Game description: Press and hold the screen to adjust the strength of the panda spring and jump to the stone pillar. The game ends if you fall into the river.
HTML5 Valentine's Day box animation special effects
Based on svg, draw animations of opening love box gifts on Valentine's Day, and special effects of love box animation.
H5 3D rolling ball game source code
HTML5 cool 3D ball rolling mobile game code download. Game introduction: A colored ball rolls, and the current track of the colored ball is controlled by dragging it with the mouse or the touch screen of the mobile phone. This is a simple and easy-to-operate mobile game source code.