Разноцветный метеоритный дождь на HTML5 Canvas
Вроде дождь, а вроде и не дождь
Для начала посмотрите ДЕМО
Установка:
1#: После открывающего тега <body> вставьте:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 |
<canvas id="sparks"></canvas> <script type="text/javascript"> let OPT = { selector: "#sparks", amount: 5000, speed: 0.05, // pixels per frame lifetime: 200, direction: { x: -0.5, y: 1 }, size: [2, 2], maxopacity: 1, color: "150, 150, 150", randColor: true, acceleration: [5, 40] }; if (window.innerWidth < 520) { OPT.speed = 0.05; OPT.color = "150, 150, 150"; } (function spark() { const canvas = document.querySelector(OPT.selector); const ctx = canvas.getContext("2d"); let sparks = []; window.addEventListener('resize', () => { setCanvasWidth(); }); function setCanvasWidth() { ctx.canvas.width = window.innerWidth; ctx.canvas.height = window.innerHeight; } function rand(min, max) { return Math.floor(Math.random() * (max - min + 1)) + min; } // Init animation function init() { setCanvasWidth(); window.setInterval(() => { if (sparks.length < OPT.amount) { addSpark(); } }, 1000 / OPT.amount); window.requestAnimationFrame(draw); } function draw() { ctx.fillStyle = 'rgba(0,0,0, 0.1)'; ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height); sparks.forEach((spark, i, array) => { if (spark.opacity <= 0) { array.splice(i, 1); } else { drawSpark(spark); } }); window.requestAnimationFrame(draw); } function Spark(x, y) { this.x = x; this.y = y; this.age = 0; this.acceleration = rand(OPT.acceleration[0], OPT.acceleration[1]); this.color = OPT.randColor ? rand(0, 255) + "," + rand(0, 255) + "," + rand(0, 255) : OPT.color; this.opacity = OPT.maxopacity - this.age / (OPT.lifetime * rand(1, 10)); this.go = function () { this.x += OPT.speed * OPT.direction.x * this.acceleration / 2; this.y += OPT.speed * OPT.direction.y * this.acceleration / 2; this.opacity = OPT.maxopacity - ++this.age / OPT.lifetime; }; } function addSpark() { let x = rand(-200, window.innerWidth + 200); let y = rand(-200, window.innerHeight + 200); sparks.push(new Spark(x, y)); } function drawSpark(spark) { let x = spark.x,y = spark.y; spark.go(); ctx.beginPath(); ctx.fillStyle = `rgba(${spark.color}, ${spark.opacity})`; ctx.rect(x, y, OPT.size[0], OPT.size[1], 0, 0, Math.PI * 2); ctx.fill(); } init(); })(); </script> |
2#: Следующий код вставьте в самый низ вашего CSS:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
canvas { position: absolute; width: 100%; height: 100%; top: 0; left: 0; } .aim { position: fixed; width: 100%; height: 100%; top: 0; left: 0; background: transparent; z-index: 50; -webkit-transform: translate3d(0, 0, 0); } .aim .c { position: absolute; top: 0; left: 0; width: 11px; height: 11px; background: #000; margin: -5px 0 0 -5px; transform: rotate(45deg); border: 1px solid #77f; } .aim .h { position: absolute; top: 1px; left: -50%; width: 200%; height: 1px; background: #77f; opacity: 0.5; } .aim .v { position: absolute; top: -50%; left: 1px; width: 1px; height: 200%; background: #77f; opacity: 0.5; } |
