Дождь, льющийся на зеркальный пол на HTML5 Canvas + CSS3
Дождь, который льётся на зеркальный пол
Для начала посмотрите ДЕМО
Установка:
1#: В самый низ вашего CSS вставьте:
|
1 2 3 |
body div.mirrow { -webkit-box-reflect: below -5px -webkit-linear-gradient(transparent, rgba(0, 0, 0, 0.4)); } |
2#: После открывающего тега <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 |
<div class="mirrow"> <canvas id="c"></canvas> </div> <script type="text/javascript"> window.onload = function(argument) { window.requestAnimFrame = (function() { return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(callback) { window.setTimeout(callback, 1000 / 60); }; })(); var canvas = document.getElementById('c'); canvas.width = window.innerWidth; canvas.height = window.innerHeight * 0.75; var c = canvas.getContext('2d'), w = canvas.width, h = canvas.height; var rain_number = 100, rain_array = []; function Rain() { this.x = Math.random() * w; this.y = Math.random() * h; this.vector_x = Math.random() - 0.5 > 0 ? Math.random() : -Math.random(); this.vector_y = Math.random() / 1.5; this.line_length = Math.random() * 5 + 20; } Rain.prototype.update = function() { this.x += this.vector_x; this.y += this.vector_y * this.line_length; if (this.x > w || this.x < 0) { this.x = Math.random() * w; } if (this.y > h) { this.y = 0; } } function init() { c.strokeStyle = 'snow'; c.fillStyle = 'white'; c.lineWidth = 1; for (var i = 0; i < rain_number; i++) { rain_array.push(new Rain()) } } init(); start(); function start() { c.fillStyle = "rgba(0,0,0,0.5)"; c.fillRect(0, 0, w, h); for (var i = 0; i < rain_array.length; i++) { c.beginPath(); c.moveTo(rain_array[i].x, rain_array[i].y); c.lineTo(rain_array[i].x + rain_array[i].vector_x, rain_array[i].y + rain_array[i].vector_y * rain_array[i].line_length); rain_array[i].update(); c.stroke(); } c.closePath(); window.requestAnimFrame(start); } window.onresize = function() {} } </script> |
