Реалистичный снег с парящими снежинками на HTML5 Canvas
Простой, но классный снежок для вашего сайта. Большой его плюс в том, что он почти не потребляет ресурсы устройства для прорисовки снежинок
Для начала посмотрите ДЕМО
Установка:
1#: В самый низ вашего CSS вставьте:
|
1 2 3 4 5 6 |
#canvas { position:absolute; left:0; top:0; z-index:-1; } |
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 |
<canvas id="canvas"></canvas> <script type="text/javascript"> /* All code belongs to Sloan. Created by Sloan AKA Sloansta This code may be used freely, just give credit! */ window.onload = function() { const WIDTH = window.innerWidth, HEIGHT = window.innerHeight; var canvas = document.getElementById('canvas'), c = canvas.getContext('2d'); canvas.width = WIDTH; canvas.height = HEIGHT; var snowIndex = [], snowNumber = 0; function Snow() { this.x = Math.random() * WIDTH; this.y = 0; this.vx = Math.random() * 1 + -1; this.vy = Math.random() * 5; this.gravity = 0.1; snowNumber++; snowIndex[snowNumber] = this; this.id = snowNumber; } Snow.prototype.draw = function() { this.x += this.vx; this.y += this.vy; c.fillStyle = 'white'; c.fillText('*', this.x, this.y, 5); if (this.x >= WIDTH) delete snowIndex[this.id]; else if (this.x <= 0) delete snowIndex[this.id]; if (this.y >= HEIGHT) delete snowIndex[this.id]; else if (this.y <= 0) delete snowIndex[this.id]; }; Update(); setInterval(function() { new Snow(); }, 50); function Update() { requestAnimationFrame(Update); c.fillStyle = 'rgb(0, 10, 45)'; c.fillRect(0, 0, WIDTH, HEIGHT); for (var i in snowIndex) snowIndex[i].draw(); } }; </script> |
Автор публикации
Я не понял вашего вопроса, но постараюсь на него ответить...
