aktueller Standort: Heim > Herunterladen > JS-Effekte > html5特效 > HTML5的岩浆动画背景特效
HTML5的岩浆动画背景特效
Klassifizieren: JS-Effekte / html5特效 | Veröffentlichkeitsdatum: 2017-12-23 | Besuche: 1560 |
Herunterladen: 55 |
Neueste Downloads
Fantasy-Aquarium
Girls Frontline
Flügel der Sterne
Kleine Blumenfee, Feenparadies
Restaurant Cute Story
Shanhe Reiseerkundung
Liebe und Produzent
Das stärkste Gehirn 3
Odd Dust: Damila
Junge Reise in den Westen 2
24 StundenBestenliste lesen
- 1 Die Herausforderung beim Erstellen von Webanwendungen mit Node.js-Frameworks
- 2 Auf welchen Börsen können CFX-Münzen gekauft werden?
- 3 Was unterscheidet Wrapped Dog von anderen Dogecoins?
- 4 Erfahren Sie in einem Artikel mehr über den Ursprung der FTM-Währung
- 5 Bringen Sie Ihre Webanimationen auf Vordermann: Optimieren Sie requestAnimationFrame wie ein Profi
- 6 Lohnt es sich, die EOS-Währung langfristig zu halten?
- 7 Sauberen, effizienten und wartbaren Code schreiben – Python als Anwendungsfall.
- 8 Tutorial zur Verwendung des Coldlar-Wallets: Wie verwende ich das Coldlar-Wallet am sichersten?
- 9 Der neue Kindle der 12. Generation ist durchgesickert und wird in einer wunderschönen grünen Farbgebung erhältlich sein
- 10 Sony kündigt neues Launch-Event für die angeblich neuen LinkBuds, LinkBuds S und LinkBuds-Lautsprecher an
- 11 Welche Währung ist FTM?
- 12 Der Epic Games Store verschenkt im Rahmen des wöchentlichen Gratisspielangebots liebenswerte Indie-Spiele
- 13 Garmin veröffentlicht neues Update für mehrere Smartwatches zur Behebung von Aktivitätsabstürzen
- 14 Wie investiert man erfolgreich in SEI-Tokens?
- 15 Tutorial zur Verwendung des iToken Cold Wallets: Wie verwende ich das iToken Cold Wallet am sichersten?
Neueste Tutorials
-
- 国外Web开发全栈课程全集
- 1412 2024-04-24
-
- Go语言实战之 GraphQL
- 1699 2024-04-19
-
- 550W粉丝大佬手把手从零学JavaScript
- 3115 2024-04-18
-
- python大神Mosh,零基础小白6小时完全入门
- 2638 2024-04-10
-
- MySQL 初学入门(mosh老师)
- 1582 2024-04-07
-
- Mock.js | Axios.js | Json | Ajax--十天精品课堂
- 2420 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>
这是一款不错的可设置动画属性的HTML5岩浆动画背景特效,展开网页右顶部菜单便可以设置动画动画幅度、颜色等属性。