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
Cool HTML5 SVG text deformation animation effects
18 Jan 2017
This is a very cool HTML5 SVG text deformation animation effect. This special effect uses SVG and anime.js to complete various beautiful letter animation special effects through SVG stroke animation.
Text animation special effects based on HTML5 Canvas
02 Apr 2018
This article shares with you the text animation special effects based on HTML5 Canvas. It is very useful. Friends in need can use it for reference.
2014 HTML5/CSS3 popular animation effects TOP10_jquery
16 May 2016
This article summarizes 10 HTML5/css3 animation special effects that are popular on this site this year, and attaches the demo address and download address for comparison and use by friends in need.
HTML5 cool responsive video background animation special effects
18 Jan 2017
This is a cool HTML5 responsive video background animation effect. This video background can adapt the video to the size of the screen to create cool dynamic video background effects.
Detailed introduction to 7 cool HTML5 Canvas animation effects
08 Mar 2017
HTML5 is really an excellent web technology. It not only allows you to manipulate page elements more conveniently, but also allows you to achieve more animation effects through canvas. After the introduction of the HTML5 standard, CSS3 can play a greater role. This article mainly introduces some animation special effects based on HTML5 Canvas and shares them with you. I hope you like them. 1. HTML5 Canvas waterfall animation, super realistic. This is a very realistic HTML5 waterfall animation, based on Canvas, the effect is quite cool. Online demo source code download 2. HTML5 Canvas color..
Detailed introduction to 7 amazing HTML5 particle animation special effects
06 Mar 2017
One of the great advantages of HTML5 is that it can more conveniently and efficiently create particle animation special effects on web pages, especially the Canvas feature, which can draw any graphics and animation on web pages. This article will share 7 amazing HTML5 particle animation effects. These particle effects provide source code download for everyone to learn. 1. HTML5 Canvas particle simulation effect This is a 30,000 particle animation simulated using HTML5 Canvas. When you move the mouse on the canvas, some particles around the mouse will move with you and form a certain pattern. Just like you are playing with sand art, the effect...
A graphic and text appreciation of 8 gorgeous HTML5 text animation special effects
06 Mar 2017
Text is the soul of web pages. A long time ago, someone invented many beautiful computer fonts, which gave web pages different styles. With the emergence of HTML5 and CSS3, we can make text more personalized. In some situations where necessary, we can even use HTML5 to animate text. This article shares 8 very gorgeous HTML5 text animation special effects, I hope it can be used as a reference for you. 1. CSS3 3D folding and flipping text animation Today we are going to share a CSS3 text special effects application. It is similar to the HTML5/CSS3 text effects shared before. It is also a CSS3 3D folding and flipping text animation, only...
![HTML5 css3 progress bar countdown animation special effects code [recommended]_html5 tutorial skills](http://files.jb51.net/file_images/game/201603/20160308161233.jpg)
HTML5 css3 progress bar countdown animation special effects code [recommended]_html5 tutorial skills
16 May 2016
The editor below will share with you an HTML5 css3 progress bar countdown animation special effects code [recommended]. Hope it helps everyone. Let’s follow the editor and take a look.
Appreciation of HTML5 animation graphics and text on 8 3D visual effects
07 Mar 2017
More and more 3D applications are used in today's web pages, especially animation special effects based on HTML5 Canvas, giving users a very shocking visual experience. This article collects 8 very cool HTML5 animations with 3D visual effects, all with source codes shared. You can learn the HTML5 animations you are interested in and take a look together. 1. CSS3 ribbon-shaped 3D menu with small icons. This time we are going to share a very special CSS3 menu. The menu has a ribbon-shaped appearance, and each menu item has a beautiful small icon. The mouse slides over it. When you click on a menu item, the menu item will bulge upward, like a ribbon fluttering, forming a very...
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.