current location: Home > Download > JS effects > html5 special effects > HTML5 magma animation background effects
HTML5 magma animation background effects
Classify: JS effects / html5 special effects | Release time: 2017-12-23 | visits: 1559 |
Download: 55 |
Latest Downloads
Fantasy Aquarium
Girls Frontline
Wings of Stars
Little Flower Fairy Fairy Paradise
Restaurant Cute Story
Shanhe Travel Exploration
Love and Producer
The most powerful brain 3
Odd Dust: Damila
Young Journey to the West 2
24 HoursReading Leaderboard
- 1 The Challenge of Building Web Applications with Node.js Frameworks
- 2 Which exchanges can CFX coins be purchased on?
- 3 What differentiates Wrapped Dog from other dogecoins?
- 4 Learn about the origin of FTM currency in one article
- 5 Supercharge Your Web Animations: Optimize requestAnimationFrame Like a Pro
- 6 Is EOS currency worth holding for the long term?
- 7 Writing Clean, Efficient, and Maintainable Code - Python as use case.
- 8 Coldlar cold wallet usage tutorial: How to use Coldlar cold wallet in the safest way?
- 9 New 12th Gen Kindle leaks, will come in a beautiful green colorway
- 10 Sony reveals new launch event for rumoured new LinkBuds, LinkBuds S and LinkBuds speaker
- 11 What currency is FTM?
- 12 Epic Games Store gives away endearing indie game as part of weekly free game deal
- 13 Garmin releases new update for multiple smartwatches aimed at fixing activity crashes
- 14 How to successfully invest in SEI tokens?
- 15 iToken cold wallet usage tutorial: How to use iToken cold wallet in the safest way?
Latest Tutorials
-
- Go language practical GraphQL
- 1699 2024-04-19
-
- 550W fan master learns JavaScript from scratch step by step
- 3115 2024-04-18
-
- Getting Started with MySQL (Teacher mosh)
- 1582 2024-04-07
-
- Mock.js | Axios.js | Json | Ajax--Ten days of quality class
- 2419 2024-03-29
<!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.