Живой анимированный летний фон на HTML5
|
1 2 3 4 5 6 7 8 9 |
body { margin: 0; } canvas { position: fixed; top: 0px; z-index: -1; } |
|
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 |
<script> var canvas = document.createElement("canvas"), c = canvas.getContext("2d"); var w = canvas.width = window.innerWidth, h = canvas.height = window.innerHeight; particles = {}, particleIndex = 0, particleNum = 5; c.fillStyle = "black"; c.fillRect(0, 0, w, h); document.body.appendChild(canvas); function particle() { this.x = Math.random() * canvas.width; this.y = Math.random() * canvas.height; this.vx = 1; this.vy = 1; this.gravity = 0.3; particleIndex++; particles[particleIndex] = this; this.id = particleIndex; this.life = 0; this.maxLife = Math.random() * 200; this.shadeR = Math.floor(Math.random() * 90 + 60); this.shadeG = Math.floor(Math.random() * 100 + 150); this.shadeB = Math.floor(Math.random() * 60 + 10); this.alp = Math.random() * 1; this.color = 'hsla(' + this.shadeR + ',100%,' + this.shadeB + '%,' + this.alp + ')'; this.size = Math.random() * 20; this.rad = Math.round(Math.random() * (20) - (10)); } particle.prototype.draw = function() { this.x += (this.vx / this.rad) * Math.sin(this.vx); this.y += (this.vy / this.rad) * Math.cos(this.vy); this.vx += this.rad / 10; this.vy += this.rad / 10; this.life++; if (this.life >= this.maxLife) { delete particles[this.id]; } c.beginPath(); c.moveTo(this.x, this.y); c.lineTo(this.x - (this.vx / this.rad) * Math.sin(this.vx), this.y - (this.vy / this.rad) * Math.cos(this.vy)); c.strokeStyle = this.color; c.lineWidth = 1; c.stroke(); }; function drawParticle() { c.fillStyle = "rgba(0,0,0,0)"; c.fillRect(0, 0, w, h); for (var i = 0; i < particleNum; i++) { new particle(); } for (var i in particles) { particles[i].draw(); } } window.requestAnimFrame = (function() { return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(callback) { window.setTimeout(callback, 1000 / 60); }; })(); function loop() { window.requestAnimFrame(loop); drawParticle(); } loop(); </script> |
