Toggle navigation
在线编辑器
在线代码
文本比较
jQuery下载
前端库
在线手册
登录/注册
下载代码
html
css
js
分享到微信朋友圈
X
html
The Floor is Lava
css
@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); }
JavaScript
'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; }();
粒子
时间
文字
hover
canvas
3d
游戏
音乐
火焰
水波
轮播图
鼠标跟随
动画
css
加载动画
导航
菜单
按钮
滑块
tab
弹出层
统计图
svg
×
Close
在线代码下载提示
开通在线代码永久免费下载,需支付20jQ币
开通后,在线代码模块中所有代码可终身免费下!
您已开通在线代码永久免费下载,关闭提示框后,点下载代码可直接下载!
您已经开通过在线代码永久免费下载
对不起,您的jQ币不足!可通过发布资源 或
直接充值获取jQ币
取消
开通下载
<!doctype html> <html> <head> <meta charset="utf-8"> <title>熔岩动态背景-jq22.com</title> <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script> <style>
</style> </head> <body>
<script>
</script>
</body> </html>
2012-2021 jQuery插件库版权所有
jquery插件
|
jq22工具库
|
网页技术
|
广告合作
|
在线反馈
|
版权声明
沪ICP备13043785号-1
浙公网安备 33041102000314号